导读跟大家讲解下有关HTML与CSS中的动画模块，相信小伙伴们对这个话题应该也很关注吧，现在就为小伙伴们说说HTML与CSS中的动画模块，小编也收集
跟大家讲解下有关HTML与CSS中的动画模块，相信小伙伴们对这个话题应该也很关注吧，现在就为小伙伴们说说HTML与CSS中的动画模块，小编也收集到了有关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; animation-name: lnj; animation-duration: 3s; } @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-timing-function: linear; animation-iteration-count: 3; //infinite : 无限的 animation-direction: alternate; } @keyframes sport { from{ margin-left: 0; } to{ margin-left: 500px; } } p:hover{ animation-play-state: paused; }三.动画模块 - 其它属性 (下)
.box2{ width: 200px; height: 200px; background-color: blue; margin: 100px auto; animation-name: myRotate; animation-duration: 5s; animation-delay: 2s; 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></li> <li></li> <li></li> <li></li> //把前两个li加在后面,起到过度效果;动画不会显得太生硬. <li></li> <li></li> </ul> </p> </body> </html>相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
HTML与CSS中2D转换模块
企业开发中使用H5有哪些注意事项
以上就是HTML与CSS中的动画模块的详细内容，更多请关注php中文网其它相关文章！
来源：php中文网
免责声明：本文由用户上传，如有侵权请联系删除！