一、影片效果
1.過渡與影片相類似，都需要三要素，那么他們的區別在哪里呢？
?答：過渡必須是人為的觸發才會執行影片，影片不需要人為的觸發就可以自動執行?影片，
2.?相同點：
（1）過度和影片都是用來給元素添加影片的；（2）過渡和影片都是系統?新增的一些屬性；（3）過渡和影片都需要滿足三要素才會有影片效果
3.影片的三要素
（1）告訴系統需要執行哪個影片?；
animation-name:影片名稱;
（2）告訴系統我們需要自己創建一個自定義名稱的影片
@keyframs 影片名稱{
from{
}
to{
}
}
（3）影片持續的時長
animation:時間；/*這里的時間可以使用秒做單位*/
<style>
*{
padding:0;
margin:0;
}
div{
width:100px;
height: 50px;
background-color: red;
animation-name:lnj;
animation-duration: 1s;
}
@keyframes lnj {
from{
margin-left:0;
}
to{
margin-left:500px;
}
}
.........省略代碼........
<div></div>
二、影片模塊其他屬性
<style> *{ padding:0; margin:0; } div{ width: 100px; height: 50px; background-color: red; animation-name:sport; animation-duration: 1s; animation-delay:1s;/*影片執行前的延遲時間*/ animation-timing-function:linear;/*影片持續的速度函式型別*/ animation-iteration-count:3;/*影片執行的次數*/ animation-direction:alternate;/*影片執行回圈往復，回圈往復一次是算兩次影片效果的，如果使用normal，那么就是重復影片而已，默認是此值*/ animtion-play-state:running;/*默認是running,也就是執行影片*/ } @keyframes sport { from{ margin-left:0px; } to{ margin-left:500px; } } div:hover{ /*告訴系統當前影片是否需要暫停*/ animation-play-state:paused; } .........省略代碼....... <div></div>
三、影片效果其他屬性下
通過我們的觀察，影片是有一定的狀態的
（1） ?等待狀態；（2）?執行狀態；（3）結束狀態
animation-fill-mode:none;
屬性值有四種
n?one:不做任何的改變；
forwards:讓元素結束狀態保持影片的最后一幀的樣式
backwards:讓元素等待狀態的時候顯示影片的第一幀的樣式
both:?兩個屬性值的效果都顯示，
<style> *{ padding:0; margin:0; } .box1{ width: 100px; height: 50px; background-color: red; animation-name:sport; animation-duration:2s; } @keyframes sport {/*這里的百分比代表占用的時間*/ 0%{ margin-left:0px; margin-top:0px; } 10%{ margin-left: 300px; margin-top:0px; } 20%{ margin-left:300px; margin-top:300px; } 30%{ margin-left:0px; margin-top:300px; } 100%{ margin-left:0px; margin-top:0px; } } ? .box2{ width: 100px; height: 50px; background-color: red; margin:100px auto; animation-name:sport2; animation-duration:2s; animation-fill-mode:backwards; animation-delay:2s; } @keyframes sport2 { 0%{ tranform:rotate(10deg); } 25%{ transform:rotate(45deg); } 50%{ transform:rotate(79deg); } 100%{ transform:rotate(160deg); } } </style> </head> <body> <div class="box1"></div> <div class="box2"></div>
四、原始碼：
D175_CartoonModule.html
D176_OtherAttrubuteOfAnimationModule.html
D176_OtherAttributeOfAnimationModule2.html
地址:
https://github.com/ruigege66/HTML_learning/blob/master/D175_CartoonModule.html
https://github.com/ruigege66/HTML_learning/blob/master/D176_OtherAttrubuteOfAnimationModule.html
https://github.com/ruigege66/HTML_learning/blob/master/D176_OtherAttributeOfAnimationModule2.html
2.CSDN：https://blog.csdn.net/weixin_44630050
3.博客園：https://www.cnblogs.com/ruigege0000/
4.歡迎關注微信公眾號：傅里葉變換，個人賬號，僅用于技術交流，后臺回復“禮包”獲取Java大資料學習視頻禮包
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/65710.html
標籤：Html/Css
上一篇：CSS 實作蜂巢/六邊形圖集
下一篇：何時使用 Em 與 Rem【轉】