- 动画第一种写法
<style>
*{
margin: 0;
padding: 0;
}
div {
width: 100px;
height: 50px;
background-color: red;
/*!*要执行的动画名称*!*/
animation-name: sport;
/*!*动画持续时长*!*/
animation-duration: 5s;
/*延迟执行动画*/
animation-delay: 2s;
/*动画速度*/
animation-timing-function: linear;
/*动画执行次数*/
animation-iteration-count: 2;
/*
是否在下一周期逆向播放动画
取值：
normal：默认取值，执行完一次后回到起点 继续执行下一次
alternate：往返动画，执行完一次后 往回执行下一次
*/
animation-direction: alternate;
}
div:hover{
/*
当前动画是否需要暂停
取值：
running：执行动画
paused：暂停动画
*/
animation-play-state: paused;
}
/*创建一个名字为sport的动画*/
@keyframes sport {
from{
margin-left: 0;
}
to{
margin-left: 500px;
}
}
</style>
<body>
<div></div>
</body>
- 动画第二种写法
<style>
*{
margin: 0;
padding: 0;
}
div {
width: 100px;
height: 50px;
background-color: red;
/*!*要执行的动画名称*!*/
animation-name: sport;
/*!*动画持续时长*!*/
animation-duration: 5s;
}
/*创建一个名字为sport的动画*/
@keyframes sport {
0%{
margin-left: 0;
margin-top: 0;
}
25%{
margin-left: 500px;
margin-top: 0;
}
50%{
margin-left: 500px;
margin-top: 300px;
}
75%{
margin-left: 0;
margin-top: 300px;
}
100%{
margin-left: 0;
margin-top: 0;
}
}
</style>
<body>
<div></div>
</body>
-
动画状态
1.等待状态
2.执行状态
3.结束状态 -
animation-fill-mode（了解）:
动画等待状态和结束状态的样式
none: 不做任何改变
forwards:让元素结束状态保持动画最后一帧的央视
backwards:让元素等待状态时 显示动画第一帧的样式
both:forwards、backwards结合 -
连写
animation:动画名称 动画时长 动画运动速度 延迟时间 执行次数 往返动画
animation: sport 5s 2s linear; -
CSS3-轮播图
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 600px;
height: 200px;
border: 1px solid #000;
margin: 100px auto;
overflow: hidden;
}
ul{
width: 2000px;
height: 200px;
animation: move 10s linear 0s infinite;
background-color: black;
}
ul:hover{
animation-play-state: paused;
}
li{
list-style: none;
width: 300px;
height: 200px;
border: 1px solid #000;
box-sizing: border-box;
float: left;
}
ul li img{
width: 100%;
height: 100%;
}
ul:hover li{
/*透明度*/
opacity: 0.5;
}
ul li:hover{
opacity: 1;
}
@keyframes move {
from{
margin-left: 0px;
}
to{
margin-left: -1200px;
}
}
</style>
<body>
<div>
<ul>
<li><img src="images/1.jpg" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
<li><img src="images/4.jpg" alt=""></li>
<li><img src="images/1.jpg" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
</ul>
</div>
</body>
网友评论