动画三要素
1.animation-name:keyframe /*值为需要执行的动画的名称*/
2.animation-duration:time /*值为需要执行的动画的执行时间*/
3.@keyframes keyframe {
from {
top:0px; /*动画的初始状态*/
}
to {
top:200px;/*动画的结束状态*/
}
}
/*规定需要执行的动画*/
其他属性
3.animation-timing-function:value;
/*value可取以下值*/
linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始，然后加快，在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
4.animation-delay:time; /*动画延迟多少时间后开始执行*/
5.animation-iteration-count: n | infinite;/*动画执行次数，infinite为无限次*/
6.animation-play-state: paused|running;/*动画暂停或者执行状态*/
7.animation-fill-mode : none | forwards | backwards | both;
/*
none 不改变默认行为。
forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both 向前和向后填充模式都被应用。
*/
动画连写属性
animation:name duration timing-function delay iteration-count direction;
/*动画名词 动画时长 动画运动速度 延迟时间 执行次数 往返动画*/
云层动画代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>云层动画</title>
<style>
*{
margin:0;
padding:0;
}
.cloud{
height:480px;
margin-top:100px;
background-color:skyblue;
overflow:hidden;
}
.cloud ul{
height:100%;
position:relative;
animation:cloud-bg 5s infinite alternate;
}
.cloud ul li{
list-style:none;
width:400%;
height:100%;
position:absolute;
top:0;
left:0;
}
.cloud ul li:nth-of-type(1){
background-image:url("imges/cloud1.png");
animation:cloud 20s linear infinite alternate;
}
.cloud ul li:nth-of-type(2){
background-image:url("imges/cloud2.png");
animation:cloud 20s ease infinite alternate;
}
.cloud ul li:nth-of-type(3){
background-image:url("imges/cloud3.png");
animation:cloud 20s ease-in-out infinite alternate;
}
@keyframes cloud-bg {
from{
background-color:skyblue;
}
to{
background-color:black;
}
}
@keyframes cloud {
from{
top:0;
left:0;
}
to{
top:0;
left: -100%;
}
}
</style>
</head>
<body>
<div class="cloud">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
无限滚动代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无限滚动</title>
<style>
*{
margin:0;
padding:0;
}
div{
width:1040px;
height:280px;
margin:200px auto;
overflow:hidden;
border:1px solid #000;
background-color:black;
}
ul{
width:4000px;
height:280px;
animation:roll 5s linear infinite;
}
@keyframes roll {
from{
margin-left:0;
}
to{
margin-left: -200%;
}
}
ul li{
float:left;
list-style:none;
opacity:0.8;
}
ul:hover{
animation-play-state:paused;
}
li:hover{
opacity:1;
}
</style>
</head>
<body>
<div>
<ul>
<li><img src="imges/w1.jpg" alt=""></li>
<li><img src="imges/w2.jpg" alt=""></li>
<li><img src="imges/w3.jpg" alt=""></li>
<li><img src="imges/w4.jpg" alt=""></li>
<li><img src="imges/w1.jpg" alt=""></li>
<li><img src="imges/w2.jpg" alt=""></li>
</ul>
</div>
</body>
</html>
