<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3 動畫</title> <style> body { margin: 0; padding: 0; background-color: #F7F7F7; } .box { width: 400px; margin: 100px auto; } .box img{ /*4.調用動畫*/ animation: rotateFuc 4s linear 0s; } /*動畫的第一步*/ /*1.申明動畫序列 @keyframes 跟着的是動畫序列的名稱*/ @keyframes rotateFuc{ /*2.寫動畫的節點 from 0% to 100% 百分比是時間節點*/ from{ } 25%{ /*3.添加動畫屬性*/ transform: rotate(360deg) scale(2); } 75%{ /*3.添加動畫屬性*/ transform: rotate(720deg) scale(0.5); } to{ transform: none; } } </style> </head> <body> <div class="box"> <img src="./images/fengche.png"> </div> </body> </html>