HTML与CSS中的动画模块
发布时间：09/01 来源：未知 浏览：
关键词：
一. 动画模块
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:动画名称 动画时长;
五. 云层结果
<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>信赖看了本案牍例你已经把握了办法，更多出色请关注百分百源码网其它相关文章！
引荐阅读：
HTML与CSS中2D转换模块
公司开发中使用H5是什么留意事项
以上就是HTML与CSS中的动画模块的具体内容，更多请关注百分百源码网其它相关文章！
