先看看靜態(tài)的效果，運(yùn)行后的效果更好
示例代碼如下
| <!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8" /> <title>css3學(xué)習(xí)</title> <style type="text/css"> .d{width: 200px;height: 200px;border-radius: 50%;border: 2px solid red;border-left-color: green;border-right-color: blue; -webkit-animation:abc 2s infinite linear; animation:abc 2s infinite linear; } /*chrome,Safari,ff,o測(cè)試沒(méi)問(wèn)題，IE11一閃一閃的*/ @keyframes abc{ 0% {transform:skew(20deg) rotate(0deg);} 50% {transform:skew(20deg) rotate(180deg);} 100% {transform:skew(20deg) rotate(360deg);} } @-webkit-keyframes abc{ 0% {-webkit-transform:skew(20deg) rotate(0deg);} 50% {-webkit-transform:skew(20deg) rotate(180deg);} 100% {-webkit-transform:skew(20deg) rotate(360deg);} } </style></head><body> <div id="abc" class="d"></div></body></html> |
總結(jié)
以上就是利用CSS3實(shí)現(xiàn)同時(shí)執(zhí)行傾斜和旋轉(zhuǎn)動(dòng)畫(huà)效果的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流。謝謝大家對(duì)錯(cuò)新站長(zhǎng)站的支持。
新聞熱點(diǎn)
疑難解答
圖片精選
