HTML与CSS中的动画模块是什么
这篇文章运用简单易懂的例子给大家介绍HTML与CSS中的动画模块是什么,代码非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
10年积累的网站制作、成都网站制作经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站设计后付款的网站建设流程,更有达茂旗免费网站建设让你可以放心的选择与我们合作。
一. 动画模块
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:动画名称 动画时长;
五. 云层效果
104-动画模块-云层效果
六. 无限滚动
105-动画模块-无限滚动
- ![](images/banner1.png)
- ![](images/banner2.jpg)
- ![](images/banner3.jpg)
- ![](images/banner4.jpg) //把前两个li加在后面,起到过度效果;动画不会显得太生硬.
- ![](images/banner1.png)
- ![](images/banner2.jpg)
关于HTML与CSS中的动画模块是什么就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
文章名称:HTML与CSS中的动画模块是什么
URL分享:http://ybzwz.com/article/ihhhip.html