<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动画模块</title>
<style media="screen">
*{
margin: 0;
padding: 0;
}
/*div{
width: 200px;
height: 100px;
background-color: red;
animation-name: sjw;
animation-duration: 3s;
animation-delay: 2s;
animation-timing-function: ease-in-out;
animation-iteration-count: 3;
animation-direction: alternate;
animation-play-state: running;
}
@keyframes sjw {
from{
margin-left: 0;
}
to{
margin-left: 400px;
}
}
div:hover{
animation-play-state: paused;
}*/
/*.box1{
width: 100px;
height: 50px;
background-color: red;
animation-name: squareSport;
animation-duration: 5s;
position: absolute;
}
@keyframes squareSport{
0%{
left: 0;
top: 0;
}
25%{
left: 300px;
top: 0;
}
50%{
left: 300px;
top: 300px;
}
75%{
left: 0;
top: 300px;
}
100%{
left: 0;
top: 0;
}
}
.box2{
width: 200px;
height: 200px;
background-color: blue;
margin:0 auto;
margin-left: 400px;
margin-top: 200px;
animation-name: rotate;
animation-duration: 5s;
animation-delay: 2s;
animation-fill-mode: both;
}
@keyframes rotate {
0%{
transform: rotate(10deg);
}
50%{
transform: rotate(50deg);
}
100%{
transform: rotate(75deg);
}
}*/
/*div{
width: 100px;
height: 50px;
background-color: red;
animation: moveAnimation 5s linear 0s 1 normal;
}
@keyframes moveAnimation {
from{
margin-left: 0px;
}
to{
margin-left: 400px;
}
}*/
/*ul{
height: 400px;
background-color: skyblue;
margin-top: 100px;
animation: changeDay 5s linear 0s infinite alternate;
position: relative;
overflow: hidden;
}
@keyframes changeDay {
from{
background-color: skyblue;
}
to{
background-color: black;
}
}
ul li {
width: 400%;
height: 100%;
position: absolute;
left: 0;
top: 0;
list-style: none;
}
ul li:nth-child(1){
background-image: url("../image/cloud1.jpeg");
animation: oneMove 30s linear 0s infinite alternate;
}
@keyframes oneMove {
from{
margin-left: 0%;
}
to{
margin-left: -100%;
}
}
ul li:nth-child(2){
background-image: url("../image/cloud2.jpeg");
animation: twoMove 30s linear 0s infinite alternate;
}
@keyframes twoMove {
from{
margin-left: 0%;
}
to{
margin-left: -200%;
}
}
ul li:nth-child(3){
background-image: url("../image/cloud3.jpeg");
animation: threeMove 30s linear 0s infinite alternate;
}
@keyframes threeMove {
from{
margin-left: 0%;
}
to{
margin-left: -300%;
}
}*/
div{
width: 600px;
height: 200px;
border: 1px solid;
margin: 0 auto;
margin-top: 100px;
overflow: hidden;
}
ul{
width: 2000px;
height: 200px;
animation: move 5s linear 0s infinite normal;
}
ul:hover{
animation-play-state: paused;
}
@keyframes move {
from{
margin-left: 0px;
}
to{
margin-left: -1200px;
}
}
ul li {
list-style: none;
float: left;
width: 300px;
height: 200px;
background-color: black;
}
ul:hover li{
opacity: 0.5;
}
ul li:hover{
opacity: 1;
}
ul li img{
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<!-- <div class="box1">
</div>
<div class="box2">
</div> -->
<!-- <div class="">
</div> -->
<!-- <ul>
<li></li>
<li></li>
<li></li>
</ul> -->
<div class="">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
第173课 动画模块
1、过渡和动画之间的异同
不同点
过渡必须人为的触发才会执行动画
动画不需要人为的触发就可看到执行动画
相同点
过渡和动画都是用来给元素添加动画的
过渡和动画都是系统新增的一些属性
过渡和动画都需要满足三要素才会有动画效果
1、告诉系统需要执行哪个动画
animation-name:sjw; 名称可以随意写
2、告诉系统我们需要自己创建一个名称叫做sjw的动画
@keyframes sjw{
from{
margin-left:0;
}
to{
margin-left:100px;
}
}
3、告诉系统动画持续的时长
animation-duration:3s;
第174课 动画模块-其他属性上
告诉系统多少秒后开始执行动画
animation-delay: 2s;
告诉系统动画执行的速度
animation-timing-function: ease-in-out;
告诉系统动画需要执行几次
animation-iteration-count: 3;
告诉系统是否需要执行往返动画
取值：
normal，默认值，执行完一次之后回到启动继续执行
alternate，往返动画，指定完一次之后往回执行下一次
animation-direction: alternate;
告诉系统当前动画是否需要暂停
running 执行动画
paused 暂停
animation-play-state: paused;
第175课 动画模块-其他属性下
1、百分比分割分割动画
@keyframes{
0%{
}
50%{
}
70%{
}
}
2、动画是有一定的状态的
等待状态
执行状态
结束状态
指定动画等待状态和结束状态的样式
animation-fill-mode: backwards;
取值：
none: 不做任何改变
forwards: 让元素结束状态保持动画最后一帧的样式
backwards: 让元素等待状态时候显示动画第一帧的样式
both: forwards and backwards
第176课 动画模块-连写
格式
animation:名称 时长 速度 延迟时间 次数 往返动画;
简写
animation:名称 时长;
第177课 动画模块-云层动画
保证一直有云需要改变li宽度
速度不一致的情况，调整移动距离或时长
第178课 动画模块-无限滚动上
1、实现无限将第一张或前几张复制一份添加到末尾，当跳动的时候正好显示，看不出跳转效果
