整理文檔，搜刮出一個CSS3效果：“W”形運行軌跡執行個體的代碼，稍微整理精簡一下做下分享。
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding:0; } #p{ width:900px; height:400px; border:2px solid black; margin: 100px auto; } #span{ float:left; display: block; font-size: 100px; width: 100px; height: 100px; line-height: 80px; text-align: center; border-radius: 50%; background: radial-gradient(blue,green); animation: move 4s ease 0s infinite alternate; } @keyframes move { 0%{ transform: translate(0px,0px); } 25%{ transform: translate(200px,300px); } 50%{ transform: translate(400px,0px); } 75%{ transform: translate(600px,300px); } 100%{ transform: translate(800px,0px); } } </style></head><body><p id="p"> <span id="span">w</span></p></body></html>
以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！
相關推薦：
如何對未知高度的圖片設定垂直置中
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
