<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>動(dòng)畫模塊</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課 動(dòng)畫模塊
1潮秘、過渡和動(dòng)畫之間的異同
不同點(diǎn)
過渡必須人為的觸發(fā)才會(huì)執(zhí)行動(dòng)畫
動(dòng)畫不需要人為的觸發(fā)就可看到執(zhí)行動(dòng)畫
相同點(diǎn)
過渡和動(dòng)畫都是用來給元素添加動(dòng)畫的
過渡和動(dòng)畫都是系統(tǒng)新增的一些屬性
過渡和動(dòng)畫都需要滿足三要素才會(huì)有動(dòng)畫效果
1躏精、告訴系統(tǒng)需要執(zhí)行哪個(gè)動(dòng)畫
animation-name:sjw; 名稱可以隨意寫
2、告訴系統(tǒng)我們需要自己創(chuàng)建一個(gè)名稱叫做sjw的動(dòng)畫
@keyframes sjw{
from{
margin-left:0;
}
to{
margin-left:100px;
}
}
3、告訴系統(tǒng)動(dòng)畫持續(xù)的時(shí)長(zhǎng)
animation-duration:3s;
第174課 動(dòng)畫模塊-其他屬性上
告訴系統(tǒng)多少秒后開始執(zhí)行動(dòng)畫
animation-delay: 2s;
告訴系統(tǒng)動(dòng)畫執(zhí)行的速度
animation-timing-function: ease-in-out;
告訴系統(tǒng)動(dòng)畫需要執(zhí)行幾次
animation-iteration-count: 3;
告訴系統(tǒng)是否需要執(zhí)行往返動(dòng)畫
取值：
normal止状，默認(rèn)值怯疤，執(zhí)行完一次之后回到啟動(dòng)繼續(xù)執(zhí)行
alternate，往返動(dòng)畫催束，指定完一次之后往回執(zhí)行下一次
animation-direction: alternate;
告訴系統(tǒng)當(dāng)前動(dòng)畫是否需要暫停
running 執(zhí)行動(dòng)畫
paused 暫停
animation-play-state: paused;
第175課 動(dòng)畫模塊-其他屬性下
1集峦、百分比分割分割動(dòng)畫
@keyframes{
0%{
}
50%{
}
70%{
}
}
2、動(dòng)畫是有一定的狀態(tài)的
等待狀態(tài)
執(zhí)行狀態(tài)
結(jié)束狀態(tài)
指定動(dòng)畫等待狀態(tài)和結(jié)束狀態(tài)的樣式
animation-fill-mode: backwards;
取值：
none: 不做任何改變
forwards: 讓元素結(jié)束狀態(tài)保持動(dòng)畫最后一幀的樣式
backwards: 讓元素等待狀態(tài)時(shí)候顯示動(dòng)畫第一幀的樣式
both: forwards and backwards
第176課 動(dòng)畫模塊-連寫
格式
animation:名稱 時(shí)長(zhǎng) 速度 延遲時(shí)間 次數(shù) 往返動(dòng)畫;
簡(jiǎn)寫
animation:名稱 時(shí)長(zhǎng);
第177課 動(dòng)畫模塊-云層動(dòng)畫
保證一直有云需要改變li寬度
速度不一致的情況抠刺，調(diào)整移動(dòng)距離或時(shí)長(zhǎng)
第178課 動(dòng)畫模塊-無(wú)限滾動(dòng)上
1塔淤、實(shí)現(xiàn)無(wú)限將第一張或前幾張復(fù)制一份添加到末尾，當(dāng)跳動(dòng)的時(shí)候正好顯示矫付，看不出跳轉(zhuǎn)效果
