随笔- 265 文章- 8 评论- 9 阅读- 51万

012:前端学习-CSS动画

CSS动画

动画是使元素从一种样式逐渐变化为另一种样式的效果您可以改变任意多的样式任意多的次数
请用百分比来规定变化发生的时间，或用关键词"from"和"to"，等同于0%和100%0%是动画的开始，100%是动画的完成。
@keyframes创建动画（animation）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @keyframes myAnim(){
            0%{
                CSS样式
            }
            50%{
                 CSS样式
            }
        }
    </style>
</head>
<body>
     
</body>
</html>

　animation执行动画的属性　：

https://blog.csdn.net/qq_40340943/article/details/100733638

animation: name duration timing-function delay iteration-count direction fill-mode;

animation:动画名称动画的持续时间动画效果速率动画的开始时间动画循环次数动画播放方向控制动画播放状态：animation-play-state（running代表播放，paused代表停止播放）

timing-function的值

ease 逐渐变慢

linear 匀速

ease-in 加速

ease-out 减速

ease-in-out 先加速后减速

direction值

normal 默认值为normal表示向前播放

alternate 动画播放在低偶数次向前播放，第奇数次反方向播放，

1.在style中编写动画执行

2.在body中创建div

3.再在style中编写div对应的样式

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>Document</title>
 8     <style>
 9         /*设置div的样式*/
10         div{
11             width:60px;
12             height: 100px;
13             background-color: darkgreen;
14             animation: myAnim 3s linear 0s infinite ;
15         }
16         /*鼠标放div上其背景颜色改变
17         div:hover{
18             background-color: cornflowerblue;
19         }
20         */
21 
22         @keyframes myAnim{
23             0%{
24                 /*设置初始宽度*/
25                 width: 200px;
26                 background-color:darkgreen;
27             }
28             50%{
29                 /*设置中间过程宽度*/
30                 width: 100px;
31                 background-color: cornflowerblue;
32             }
33             100%{
34                 /*设置最后宽度*/
35                 width: 200px;
36                 background-color: crimson;
37             }
38         }    
39     </style>
40  
41 </head>
42 <body> 
43     <div> </div>
44 </body>
45 </html>

运行效果如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width:200px;
            height: 200px;
            margin: 20px auto;
            background-color: rgb(156, 97, 97);
            /*设置圆角效果*/
            border-radius: 50%;
            box-shadow: 0 1px 2px rgba(0,0,0,.3);
            /*设置动画执行,包括动画名称，动画执行时间，动画执行过程(infinite无限循环)，偶数正向播放，奇数时反向播放*/
            animation: breathe 2s ease-in-out infinite alternate;
        }
        @keyframes breathe{
            0%{
                /*设置透明度*/
                opacity: 0.2;
                box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
            }
            50%{
                /*设置透明度为0.5*/
                opacity: 0.5;
                 /*设置阴影效果，让透明度也有变化*/
                box-shadow: 0 1px 2px rgba(17, 192, 78, 0.76);
            }
            100%{
                /*设置透明度，1代表完全不透明*/
                opacity: 1;
                box-shadow: 0 1px 30px rgb(23, 175, 175);
            }
        }  
    </style>
     
</head>
<body>
    <div class="box"></div>
</body>
</html>