HTML与CSS中的动画模块怎么用


这篇文章主要介绍了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的动画*/
  @keyframeslnj{
  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;}
  @keyframessport{
  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:100pxauto;
  animation-name:myRotate;
  animation-duration:5s;
  animation-delay:2s;
  /*通过我们的观察,动画是有一定的状态的
  1.等待状态2.执行状态3.结束状态*/
  /*animation-fill-mode作用:指定动画等待状态和结束状态的样式
  取值:none:不做任何改变
  fo免费云主机域名rwards:让元素结束状态保持动画最后一帧的样式;
  //向前的
  backwards:让元素等待状态的时候显示动画第一帧的样式;
  //向后的
  both:让元素等待状态显示动画第一帧的样式,让元素结束状态保持动画最后一帧的样式
  */
  /*animation-fill-mode:backwards;*/
  /*animation-fill-mode:forwards;*/
  animation-fill-mode:both;}
  @keyframesmyRotate{
  0%{transform:rotate(10deg);}
  50%{transform:rotate(50deg);}
  100%{transform:rotate(70deg);}
  }
  animation-fill-mode
  四.动画模块-连写
  1.动画模块连写格式
  animation:动画名称动画时长动画运动速度延迟时间执行次数往返动画;
  2.动画模块连写格式的简写
  animation:动画名称动画时长;
  五.云层效果
  
  104-动画模块-云层效果


  *{margin:0;padding:0;}
  ul{height:400px;background-color:skyblue;
  margin-top:100px;animation:change5slinear0sinfinitealternate;
  position:relative;overflow:hidden;//让屏幕下方的滚动条隐藏掉}
  ulli{list-style:none;width:400%;
  //设置li的宽度为屏幕的四倍,移动最多的为屏幕宽度的三倍,为保证屏幕内一直有云朵,故多设置一个屏幕的宽度的云朵
  height:100%;position:absolute;
  //设置子绝父相后,三个li会重叠到一起
  left:0;top:0;}ulli:nth-child(1){
  background-image:url(“images/cloud_one.png”);
  animation:one30slinear0sinfinitealternate;}
  ulli:nth-child(2){background-image:url(“images/cloud_two.png”);
  animation:two30slinear0sinfinitealternate;}
  ulli:nth-child(3){background-image:url(“images/cloud_three.png”);
  animation:three30slinear0sinfinitealternate;}
  @keyframeschange{
  from{background-color:skyblue;}
  to{background-color:black;}}
  @keyframesone{
  from{margin-left:0;}
  to{margin-left:-100%;
  //如果先往右移动,又出现屏幕上有一节没云朵的情况,故先往左移动;
  }}
  @keyframestwo{
  from{margin-left:0;}
  to{margin-left:-200%;
  //由于动画的时间都一样,但是运动的距离不一样,又由于都是线性速度,所以就会出现有点运动快,有的运动慢!
  }}
  @keyframesthree{from{margin-left:0;}
  to{margin-left:-300%;}}
  

相关推荐: C++控制结构是什么意的

这篇文章主要介绍了C++控制结构是什么意的,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。C++的控制结构和其它编程语言类似,共包含以下三种:顺序结构选择结构循环结构不知道是否有论文证明过,上述三…

免责声明:本站发布的图片视频文字,以转载和分享为主,文章观点不代表本站立场,本站不承担相关法律责任;如果涉及侵权请联系邮箱:360163164@qq.com举报,并提供相关证据,经查实将立刻删除涉嫌侵权内容。

(0)
打赏 微信扫一扫 微信扫一扫
上一篇 01/20 12:45
下一篇 01/20 12:45

相关推荐