CSS3 动画的学习animation

最新推荐文章于 2022-12-22 08:45:00 发布

村望老弟

最新推荐文章于 2022-12-22 08:45:00 发布

阅读量147

点赞数

分类专栏： CSS3学习记录文章标签： CSS3学习记录

本文链接：https://blog.csdn.net/weixin_42716535/article/details/90417486

版权

CSS3学习记录专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章目录

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 做出围绕太阳的行星运动

村望老弟

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3 动画的学习animation

CSS3 动画的学习初步认识 animation.box { width: 200px; height: 200px; /* background-color: darkcyan; */ animation: myfirst 5s linear;//定义动画过程名字，加上动画时间 linear匀...
复制链接

扫一扫