HTML連載72-動畫效果及其他屬性
時間：2020-03-04來源：電腦系統城作者：電腦系統城
一、動畫效果
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>
分享到：
相關信息
-
-
-
2021-04-22
巧用 -webkit-box-reflect 倒影實現各類動效(小結) -
2021-04-22
HTML+CSS+JS實現圖片的瀑布流布局的示例代碼 -
2020-03-04
HTML5 video自定義視頻播放器
-
-
HTML5之audio屬性audio主要支持的音頻格式：mp3 ogg wav<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>audio</title></head><body> <!-- 方法一 --> <a...
2020-03-04
-
徹底搞懂flex彈性盒模型布局為什么要用flex 基于css3簡單方便，更優雅的實現，瀏覽器兼容性好，傳統的css實現一個div居中布局要寫一堆代碼，而現在幾行代碼就搞定了，沒有理由不用flex。...
2020-02-28
熱門系統總排行
- 1569次 1 雨林木風Win10專業版64位純凈版系統官方下載
- 1417次 2 電腦公司ghost win7 64位純凈專業版v2019.08
- 913次 3 深度技術 GHOST WIN10 X64 純凈版 V2019.09（64位）
- 722次 4 電腦系統城ghost win7 sp132位 經典標準版 V2019.11
- 666次 5 電腦公司ghost win7 32位精簡旗艦版v2019.08
- 657次 6 深度技術ghost win10 64位專業破解版v2019.08
- 574次 7 電腦公司 GHOST XP SP3 安全穩定純凈版 V2019.08
- 568次 8 電腦公司 GHOST WIN10 X64 正式專業版 V2019.09（64位）
系統教程欄目
欄目熱門教程
人氣教程排行
- 43528次 1 VMware密鑰16 VMware虛擬機16版本激活密鑰大全教程
- 14956次 2 win10系統更新到57%出現死機的原因和解決方法
- 13627次 3 電腦免費的加速器有哪些 永久免費的四款加速器推薦
- 11634次 4 如果微信被同步了如何取消? 取消微信電腦與手機同步的技巧
- 11225次 5 win10添加打印機提示輸入碼無效怎么辦_win10打印機輸入碼無效解決方法
- 10715次 6 系統城推出鼠標引擎天梯圖2020_鼠標傳感器天梯圖2020
- 9426次 7 藍牙耳機長按無反應怎么辦 藍牙耳機長按燈不亮的處理方法
- 9399次 8 魯大師跑分100萬什么水平 魯大師跑分多少算好電腦
- 9250次 9 拯救者Y7000如何使用錄屏功能
- 8545次 10 由于找不到vcruntime140.dll無法繼續執行代碼的解決方法
站長推薦
- 4025次 1 聯想拯救者win10一鍵恢復如何使用_聯想win10一鍵還原孔使用方法
- 2407次 2 Win11怎么激活？Win11系統永久激活方法匯總(附激活碼)
- 2302次 3 怎么在u盤pe下給電腦系統安裝ahci驅動
- 1977次 4 聯想電腦開機出現PXE-MOF:Exiting Intel PXE ROM怎么解決
- 1807次 5 win10怎么改為uefi啟動_win10系統設置uefi啟動模式的方法
- 1800次 6 如何用u盤裝系統？用系統城U盤啟動制作盤安裝Win10系統教程
- 1486次 7 華碩筆記本bios utility ez mode設置圖解以及切換成傳統bios界面方法華碩筆記本bios utility ez mode設置圖解以及切換成傳統bios界面方法
- 915次 8 CentOS 8 系統圖形化安裝教程（超詳細）
- 825次 9 VMware中安裝Linux系統（Redhat8）及虛擬機的網絡配置方法
- 683次 10 win10系統下檢測不到獨立顯卡如何解決
熱門系統下載
- 2422次 1 網吧游戲專用Win7 Sp1 64位免激活旗艦版 V2021.05
- 1759次 2 電腦公司ghost win10 64位游戲專用精簡網吧版v2020.05
- 1616次 3 Windows Server 2019 官方原版系統64位系統下載
- 1569次 4 雨林木風Win10專業版64位純凈版系統官方下載
- 1417次 5 電腦公司ghost win7 64位純凈專業版v2019.08
- 1417次 6 系統之家win7系統安裝盤_系統之家ghost win7 64位免激活專業網吧專業完整版v2021.05下載
- 1208次 7 電腦公司Win7 Sp1 32位純凈旗艦版 V2021.05
- 1199次 8 UOS Desktop home 20 （1010）桌面個人版（64位）系統下載
