標籤：
<!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>
css3動畫簡單案例
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
