温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2022-03-11 15:46:13 来源:亿速云 阅读:152 作者:iii 栏目:web开发

这篇文章主要介绍了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:不做任何改变

  forwards:让元素结束状态保持动画最后一帧的样式;

  //向前的

  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:动画名称动画时长;

  五.云层效果

  <htmllang="en"><head>

  <metacharset="UTF-8"><title>104-动画模块-云层效果</title><style>

  *{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%;}}

  </style></head><body><ul><li></li><li></li><li></li></ul></body></html>

  六.无限滚动

  <htmllang="en"><head><metacharset="UTF-8"><title>105-动画模块-无限滚动</title>

  <style>*{margin:0;padding:0;}

  p{width:600px;height:188px;border:1pxsolid#000;

  margin:100pxauto;overflow:hidden;}ul{width:2000px;

  //这个无限滚动原理就是ul做动画

  height:188px;background-color:black;

  //背景颜色黑色,当li的透明度为半透明时,li就会有黑色蒙版效果

  animation:move10slinear0sinfinitenormal;

  //name时间速度延时无限重复是否往返(normal代表不往返)

  }

  ulli{float:left;list-style:none;width:300px;

  height:188px;background-color:red;

  border:1pxsolid#000;box-sizing:border-box;}

  ul:hover{

  /*动画添加给谁,就让谁停止*/

  animation-play-state:paused;}

  ul:hoverli{opacity:0.5;

  //当li的透明度为0.5时,就会看到父元素的背景颜色(黑色),就会有蒙版效果

  }

  ulli:hover{opacity:1;

  //透明度为1,不透明,看不到父元素的背景色,故没有蒙版效果

  }@keyframesmove{

  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>

关于“HTML与CSS中的动画模块怎么用”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“HTML与CSS中的动画模块怎么用”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI