HTML与CSS中的动画模块

2020-03-24 18:50:19

字体：大中小

来源：转载

供稿：网友

这次给大家带来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

四. 动画模块-连写

1.动画模块连写格式
animation:动画名称动画时长动画运动速度延迟时间执行次数往返动画;

2.动画模块连写格式的简写
animation:动画名称动画时长;

五. 云层效果

 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 其它相关文章！