CSS3动画demo

最新推荐文章于 2022-06-28 09:40:04 发布

yz764127031

最新推荐文章于 2022-06-28 09:40:04 发布

阅读量766

点赞数

分类专栏： web 前端

本文链接：https://blog.csdn.net/yz764127031/article/details/68537771

版权

web 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

前端

9 篇文章 0 订阅

订阅专栏

学习要点：
（1）核心在于引入了animation这个属性：
animation: name duration timing-function delay iteration-count direction;
animation共有6个属性：
1.动画名字，用于绑定 @keyframes
2.动画周期时长，与关键帧的0%-100%相关
3.动画的运动曲线，即加速度
4.动画何时开始。默认是 0。
5.规定动画被播放的次数。默认是 1。
6.规定动画是否在下一周期逆向地播放。默认是 “normal”。

（2）@keyframes
用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
变化过程中修改元素的样式。

截图

这里写图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>my demo</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="contain">
        <div id="mydiv">css3动画</div>
    </div>
    <script>
        .contain{
            width: 600px;
            height: 800px;
            margin: 0 auto;
        }

        #mydiv{
            margin: 20px 50px 20px 50px;
            padding: 20px 10px 0px 15px;
            width: 60px;
            height: 40px;
            background:#92B901;
            animation: myfirst 5s 3;
            font: bold 12px '微软软黑';
            border-radius: 5px;
            position: relative;
        }

        @keyframes myfirst
        {
            0%   {background: red;left:0px;transform: rotate(0deg);}
            20%  {background: yellow;left: 0px;transform: rotate(30deg);}
            50%  {background: blue;left: 600px;transform: rotate(60deg);}
            75%  {background: #DC143C;left: 600px;transform: rotate(120deg);}
            100% {background: green; left: 0px;transform: rotate(-360deg);}
        }

    </script>
</body>
</html>