HTML与CSS中的动画模块

互联网 18-3-13

这次给大家带来HTML与CSS中的动画模块，使用HTML与CSS中的动画模块注意事项有哪些，下面就是实战案例，一起来看一下。

一. 动画模块

1.过渡和动画之间的异同

1.1不同点

1.2相同点

过渡和动画都是用来给元素添加动画的过渡和动画都是系统新增的一些属性过渡和动画都需要满足三要素才会有动画效果

2 动画三要素

2.1告诉系统需要执行哪个动画 2.2告诉系统我们需要自己创建一个名称叫做lnj的动画 2.3告诉系统动画持续的时长

p{             width: 100px;       height: 50px;     background-color: red;          /*1.告诉系统需要执行哪个动画*/      animation-name: lnj;          /*3.告诉系统动画持续的时长*/                 animation-duration: 3s;       }           /*2.告诉系统我们需要自己创建一个名称叫做lnj的动画*/     @keyframes lnj {                from{                 margin-left: 0;           }                 to{                 margin-left: 500px; }             }

二.动画模块 - 其它属性 (上)

  p {             width: 100px;             height: 50px;             background-color: red;             animation-name: sport;             animation-duration: 2s;             /*告诉系统多少秒之后开始执行动画*/             /*animation-delay: 2s;*/             /*告诉系统动画执行的速度*/             animation-timing-function: linear;             /*告诉系统动画需要执行几次*/             animation-iteration-count: 3;      //infinite : 无限的             /*告诉系统是否需要执行往返动画             取值:         normal, 默认的取值, 执行完一次之后回到起点继续执行下一次             alternate, 往返动画, 执行完一次之后往回执行下一次             */         animation-direction: alternate;     }         @keyframes sport {             from{             margin-left: 0;         }             to{             margin-left: 500px;         }     }         p:hover{             /*         告诉系统当前动画是否需要暂停             取值:         running: 执行动画,默认取值             paused: 暂停动画, 当动画执行时,鼠标hover到p上方时,动画停止,鼠标移开,则继续动画;             */             animation-play-state: paused;     }

三.动画模块 - 其它属性 (下)

      .box2{                     width: 200px;                     height: 200px;                     background-color: blue;                     margin: 100px auto;                     animation-name: myRotate;                     animation-duration: 5s;                     animation-delay: 2s;                     /*             通过我们的观察, 动画是有一定的状态的                     1.等待状态             2.执行状态             3.结束状态             */        /*             animation-fill-mode作用:             指定动画等待状态和结束状态的样式                     取值:             none: 不做任何改变                                 forwards: 让元素结束状态保持动画最后一帧的样式;                     //向前的                     backwards: 让元素等待状态的时候显示动画第一帧的样式;                      // 向后的                                  both: 让元素等待状态显示动画第一帧的样式, 让元素结束状态保持动画最后一帧的样式        */                     /*animation-fill-mode: backwards;*/                     /*animation-fill-mode: forwards;*/                     animation-fill-mode: both;         }                 @keyframes myRotate {                     0%{                 transform: rotate(10deg);             }                      50%{                 transform: rotate(50deg);             }                      100%{                 transform: rotate(70deg);             }                  }         animation-fill-mode

四. 动画模块-连写

五. 云层效果

<html lang="en"> <head>       <meta charset="UTF-8">     <title>104-动画模块-云层效果</title>     <style>           *{             margin: 0;             padding: 0;         }           ul{             height: 400px;             background-color: skyblue;               margin-top: 100px;             animation: change 5s linear 0s infinite alternate;               position: relative;             overflow: hidden; //让屏幕下方的滚动条隐藏掉         }            ul li{             list-style: none;             width: 400%;        //设置li的宽度为屏幕的四倍,移动最多的为屏幕宽度的三倍,为保证屏幕内一直有云朵,故多设置一个屏幕的宽度的云朵          height: 100%;             position: absolute;           // 设置子绝父相后,三个li会重叠到一起                       left: 0;             top: 0;         }         ul li:nth-child(1){                       background-image: url("images/cloud_one.png");                       animation: one 30s linear 0s infinite alternate;         }                   ul li:nth-child(2){             background-image: url("images/cloud_two.png");                       animation: two 30s linear 0s infinite alternate;         }                   ul li:nth-child(3){             background-image: url("images/cloud_three.png");                       animation: three 30s linear 0s infinite alternate;         }                   @keyframes change {                       from{                 background-color: skyblue;             }                       to{                 background-color: black;             }         }                   @keyframes one {                       from{                 margin-left: 0;             }                        to{                 margin-left: -100%;             //如果先往右移动,又出现屏幕上有一节没云朵的情况,故先往左移动;                        }         }                    @keyframes two {                        from{                 margin-left: 0;             }                         to{                 margin-left: -200%;            //由于动画的时间都一样,但是运动的距离不一样,又由于都是线性速度,所以就会出现有点运动快,有的运动慢!                         }         }                    @keyframes three {             from{                 margin-left: 0;             }                        to{                 margin-left: -300%;             }         }                </style> </head> <body> <ul>     <li></li>     <li></li>     <li></li> </ul> </body> </html>

六. 无限滚动

<html lang="en"> <head>     <meta charset="UTF-8">     <title>105-动画模块-无限滚动</title>       <style>         *{             margin: 0;             padding: 0;         }           p{             width: 600px;             height: 188px;             border: 1px solid #000;                margin: 100px auto;             overflow: hidden;         }         ul{             width: 2000px;      //这个无限滚动原理就是ul做动画                  height: 188px;             background-color: black;       //背景颜色黑色,当li的透明度为半透明时,li就会有黑色蒙版效果                  animation: move 10s linear 0s infinite normal;                           //name 时间 速度 延时 无限重复 是否往返(normal代表不往返)              }                       ul li{             float: left;             list-style: none;             width: 300px;                           height: 188px;             background-color: red;                                        border: 1px solid #000;             box-sizing: border-box;         }                                    ul:hover{                                                 /*动画添加给谁, 就让谁停止*/                                                 animation-play-state: paused;         }                                                         ul:hover li{             opacity: 0.5;                                                         //当li的透明度为0.5时,就会看到父元素的背景颜色(黑色),就会有蒙版效果                                                                 }                                                                          ul li:hover{             opacity: 1;                                                                  //透明度为1,不透明,看不到父元素的背景色,故没有蒙版效果                                    }         @keyframes move {                                                 from{                 margin-left: 0;             }                                                 to{                 margin-left: -1200px;                                    //只需要移除屏幕4个li的宽度就可.   屏幕上就会显示第5.6两个li,这时,原本的动画就会恢复的原来的位置接着动画,实现了无线滚动效果                                      }         }     </style> </head> <body> <p>     <ul>                                  <li>![](images/banner1.png)</li>         <li>![](images/banner2.jpg)</li>                                 <li>![](images/banner3.jpg)</li>         <li>![](images/banner4.jpg)</li>                                  //把前两个li加在后面,起到过度效果;动画不会显得太生硬.                                  <li>![](images/banner1.png)</li>         <li>![](images/banner2.jpg)</li>                              </ul> </p> </body> </html>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

HTML与CSS中的动画模块

相关资讯

标签推荐