html基础入门----简单动画
生活随笔
收集整理的這篇文章主要介紹了
html基础入门----简单动画
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1.實(shí)現(xiàn)步驟：
（1）定義動(dòng)畫(huà)
（2）執(zhí)行動(dòng)畫(huà)
（1）定義動(dòng)畫(huà)
方式一：@keyframes 動(dòng)畫(huà)名{form{開(kāi)始狀態(tài)}to{結(jié)束狀態(tài)} }該方式?jīng)]有中間狀態(tài)方式二：@keyframes 動(dòng)畫(huà)名{0%{開(kāi)始狀態(tài)}*%{中間狀態(tài)}100%{結(jié)束狀態(tài)} }（2）執(zhí)行動(dòng)畫(huà)
animation： 動(dòng)畫(huà)名? 執(zhí)行時(shí)間? 延遲時(shí)間? 次數(shù)? 曲線? 執(zhí)行方向；
次數(shù)無(wú)數(shù)次：infinite
運(yùn)動(dòng)曲線勻速：linear
執(zhí)行方向從form到to,再?gòu)膖o到from：alternate
注意：如果有多個(gè)動(dòng)畫(huà)執(zhí)行，用逗號(hào)隔開(kāi)
?示例：
圓的縮放
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 100px;height: 100px;/* 設(shè)置圓角 */border-radius: 50%;background: lightblue;/* 執(zhí)行動(dòng)畫(huà) */animation: change 3s infinite linear alternate;}/* 定義動(dòng)畫(huà) */@keyframes change{from{/* 開(kāi)始狀態(tài)不變就不寫(xiě) */}to{width: 400px;height: 400px;background: pink;}}</style> </head> <body><div></div> </body> </html>總結(jié)
以上是生活随笔為你收集整理的html基础入门----简单动画的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 农产品SCM供应链协同系统解决方案
- 下一篇： OC语言基本语法