概述 · 前端

## 概述動畫是CSS3中具有顛覆性的特征之一,可通過設置多個節點來精確控制一個或一組動畫,常用來實現復雜的動畫效果. ## 語法格式 ``` animation : 動畫名稱動畫時間運動曲線何時開始播放次數是否反方向 ``` ## 模仿網易云唱片效果 ``` img { width: 200px; height: 200px; background-color: pink; border-radius: 50%; /*動畫名稱是自定義的*/ animation: go 20s linear 0s infinite; /*引用動畫,infinite是無限循環*/ } @keyframes go { /*定義動畫*/ from { //起始點 transform: rotate(0deg); } to { //結束點 transform: rotate(360deg); } } </style> </head> <body> <img src="1.jpg" alt=""> </body> ``` ## 案例 ``` img { width: 200px; height: 200px; border-radius: 50%; /*動畫名稱是自定義的*/ animation: go 10s linear 0s infinite; /*引用動畫*/ } @keyframes go { /*定義動畫*/ 0% { /*相當于剛才的from*/ transform: translate3d(0, 0, 0); } 25% { transform: translate3d(800px, 0, 0); } 50% { transform: translate3d(800px, 400px, 0); } 75% { transform: translate3d(0, 400px, 0); } 100% { /*相當于結束*/ transform: translate3d(0, 0, 0); } } </style> </head> <body> <img src="1.jpg" alt=""> </body> ```