电话
13363039260
HTML与CSS中的动画模块
2024-01-17 15:12 小编
一.动画模块
过渡和动画之间的异同
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
四.动画模块-连写
动画模块连写格式 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></li><li></li> <li></li><li></li> //把前两个li加在后面,起到过度效果;动画不会显得太生硬. <li></li><li></li> </ul></p></body></html>
猜你喜欢
联络方式：
13363039260
微信二维码 