欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

CSS3 动画的学习animation

程序员文章站 2022-03-09 20:16:21
...

CSS3 动画的学习animation**

初步认识 animation

.box {
            width: 200px;
            height: 200px;
            /* background-color: darkcyan; */
            animation: myfirst 5s linear;//定义动画过程名字，加上动画时间  linear匀速，
        }
        //from to 写法
        @keyframes myfirst {
            from {
                background: yellow
            }
            to {
                background: blue
            }
        
        @keyframes myfirst {
            from {
                background: blue
            }
            to {
                background: yellow
            }
        }//也是有覆盖的，不会按照自己想的那样子（黄->蓝->黄）
        //实际执行  就是按照最后一次设置   蓝->黄  执行完了背景颜色会瞬间变成你预设给这个盒子的颜色，
        //待解决这个问题
    </style>
</head>
<body>
    <div class="box"></div>
</body>

animation动画 keyframes 百分比写法（较喜欢）

 <style>
        .box {
            width: 200px;
            height: 200px;
            /* background-color: darkblue; */
            margin: 200px auto;
            animation: hao 4s linear infinite alternate //名字 时间  速度曲线 动画次数infinite无限次 alternate轮流的.
            
        }
        @keyframes hao {
            0% {
                background: yellow;
            }
            25% {
                background: blue;
            }
            50% {
                background: red;
            }
            100% {
                background: pink;
                //因为加了alternate 动画会按照设定正向变化再反向变化
            }
        }
    </style>
</head>
<body>
    <div class="box">
    </div>
</body>

解决设定动画完成后的盒子样式

  animation: hao 5s linear  alternate   forwards //当动画没有无限循环的时候 forwards 会保留动画最后一次的样式
  //具体其他用法看文档好罗   O(∩_∩)O

09JS控制动画 object.style.animationPlayState=“runnning/paused”

 <style>
        .box {
            width: 400px;
            height: 400px;
            border-radius: 50%;
            background: linear-gradient(red, blue);
            transform: translate(50%, 50%);
            animation: hao 2s linear infinite;
        }
       @keyframes hao {
            0% {
                transform: rotateZ(0deg)
            }
            25% {
                transform: rotateZ(90deg)
            }
            50% {
                transform: rotateZ(180deg)
            }
            75% {
                transform: rotateZ(270deg)
            }
            100% {
                transform: rotateZ(360deg)
            }
        }
    </style>
</head>
<body>
    <div class="box" id="box">
    </div>
    <input type="button" value="开始" id="btn">
</body>
<script>
    var obox = document.getElementById("box");
    var obtn = document.getElementById("btn");
    obox.style.animationPlayState = "paused"
    obtn.onclick = function () {
        if (this.value == "暂停") {
            this.value = "开始"
            obox.style.animationPlayState = "paused"
        } else {
            this.value = "暂停"
            obox.style.animationPlayState = "running"
        }
    }
</script>

小任务 用CSS 做出 围绕太阳的行星运动

上一篇： C++_Time类的定义

下一篇： Spring Boot入门

推荐阅读