標籤：pos orm 光碟片 ack name code pre near png
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/common.css"> <style type="text/css"> .xiaoming { position: absolute; top: 100px; left: 100px; animation: name1 2s infinite; } @keyframes name1 { 0%{ top:200px; } 10%{ top: 800px; left: 800px; transform: rotate(180deg); } 60%{ top: 400px; left: 400px; transform: rotate(180deg); } 100%{ top: 100px; left: 100px; } } </style></head><body><div class="xiaoming"> <img src="http://img30.360buyimg.com/jr_image/jfs/t3943/198/1201160477/17676/4e4ae11/586b5b09N6c946d97.jpg" alt=""></div></body></html>
光碟片旋轉案例//
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .xiaoming { position: absolute; top: 100px; left: 100px; animation: go 4s infinite linear;
/*infinite無限的，也可寫數字幾次*/
/*linear勻速*/
} @keyframes go { 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); } } </style></head><body> <div class="xiaoming"> <img src="images/cd.png" alt=""> </div></body></html>
css動畫筆記
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
