Tomcat 中配置SSL
阿新 • • 發佈：2020-09-12
css3動畫
css3裡面的animation屬性非常強大，但是自己用的比較少，趁現在有時間就對animation做一個小總結。同時實現一個逐幀動畫的demo作為練習
css3動畫用來做什麼
主要用來做一些頁面的美化,和一些前端簡單的動畫比如:旋轉,變形,若影若現,逐幀動畫和x軸y軸的一些直線動畫
animation屬性一覽
因為animation屬性比較多，然後在w3c上看有點蛋疼，乾脆也做了一份導圖，以後想檢視，就一目瞭然了
css3的簡單實現
使用animation實現動畫
需求是：當我開啟頁面的時候，會有一個300*300的粉色的正方形從左邊移動到右邊。
首先我們來看看CSS3是怎樣使用動畫的，可以大致分為兩步：
定義動畫
呼叫動畫
- 如何定義動畫
定義動畫需要用到 @keyframes 關鍵字，他的格式是下面這樣的：
@keyframes 動畫名稱 {
0% {
// 初始狀態
}
100% {
// 結束狀態
}
}
其中0%和100%可以用from和to代替，也就是：
@keyframes 動畫名稱 {
from {
// 初始狀態
}
to {
// 結束狀態
}
}
- 如何呼叫動畫
呼叫動畫要用到 animation-name 以及 animation-duration 屬性，前者是要呼叫的動畫的名字，後者是該動畫要持續的時長。比如：
/* 第二步：使用動畫 */
animation-name: move; animation-duration: 1.3s;//完成動畫的時間
這樣就OK了。
最後附上實現開始需求的完成程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS動畫的簡單使用</title> <style> div { height: 300px; width: 300px; background-color: pink; /* 第二步：使用動畫 */ animation-name: move; animation-duration: 1.3s;//完成動畫的時間 } /* 第一步：定義動畫 */ @keyframes move { /* 初始狀態 */ 0% { transform: translateX(0); } /* 結束狀態 */ 100% { transform: translateX(1000px); } } </style> </head> <body> <div></div> </body> </html>