html基础入门----简单动画
生活随笔
收集整理的這篇文章主要介紹了
html基础入门----简单动画
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.實現步驟：
（1）定義動畫
（2）執行動畫
（1）定義動畫
方式一：@keyframes 動畫名{form{開始狀態}to{結束狀態} }該方式沒有中間狀態方式二：@keyframes 動畫名{0%{開始狀態}*%{中間狀態}100%{結束狀態} }（2）執行動畫
animation： 動畫名? 執行時間? 延遲時間? 次數? 曲線? 執行方向；
次數無數次：infinite
運動曲線勻速：linear
執行方向從form到to,再從to到from：alternate
注意：如果有多個動畫執行，用逗號隔開
?示例：
圓的縮放
<!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;/* 設置圓角 */border-radius: 50%;background: lightblue;/* 執行動畫 */animation: change 3s infinite linear alternate;}/* 定義動畫 */@keyframes change{from{/* 開始狀態不變就不寫 */}to{width: 400px;height: 400px;background: pink;}}</style> </head> <body><div></div> </body> </html>總結
以上是生活随笔為你收集整理的html基础入门----简单动画的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 农产品SCM供应链协同系统解决方案
- 下一篇： OC语言基本语法