CSS3實現(xiàn)同時執(zhí)行傾斜和旋轉(zhuǎn)的動畫效果
發(fā)布時間：2016-10-27 16:30:46 作者：佚名 
我要評論
我要評論這篇文章通過實例代碼給大家主要介紹了，如何利用CSS3實現(xiàn)同時執(zhí)行傾斜和旋轉(zhuǎn)的動畫效果，文中給出了完整的實例代碼，大家直接運行就可以看到效果，有需要的朋友們可以參考借鑒，下面來一起看看吧。
先看看靜態(tài)的效果，運行后的效果更好
示例代碼如下
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>css3學習</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測試沒問題，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實現(xiàn)同時執(zhí)行傾斜和旋轉(zhuǎn)動畫效果的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。謝謝大家對腳本之家的支持。
相關文章
純CSS3實現(xiàn)的鼠標經(jīng)過文字傾斜線性變換動畫特效源碼
這是一款基于純CSS3實現(xiàn)的鼠標經(jīng)過文字傾斜線性變換動畫特效源碼，當鼠標滑過文字時，文字可呈現(xiàn)出傾斜及斜線滑過的效果，且動畫過度效果流暢自然2016-06-07
本特效源碼是一款效果非常炫酷的HTML5和CSS3圖片運動模糊和傾斜效果的代碼。圖片產(chǎn)生輕微的運動模糊并傾斜的效果2016-03-24
是一款非常有創(chuàng)意的基于jQuery和CSS3單頁傾斜分割布局幻燈片特效的代碼。該幻燈片特效將整個屏幕傾斜分割為兩個部分，在鼠標向下滾動時，圖片部分和文本部分會相互切換2015-11-10
HTML5+CSS3實現(xiàn)圖片可傾斜擺放的動畫相冊效果源碼
今天我們又要來分享一個CSS3動畫相冊，這款相冊的特點是圖片可以任意角度的傾斜擺放2015-01-06
基于CSS3實現(xiàn)的圖片可傾斜四個角度傾斜特效源碼
這是一款基于CSS3實現(xiàn)的圖片特效源碼，它可以讓網(wǎng)頁上的圖片傾斜任意的角度，其實在CSS3中實現(xiàn)圖片的傾斜非常簡單，我們并不需要利用復雜的JS計算各種角度，只要用CSS3的tr2014-08-20- 這篇文章主要介紹了css3實現(xiàn)超立體3D圖片側(cè)翻傾斜效果,需要的朋友可以參考下2014-04-16
css3 給頁面加個半圓形導航條主要利用旋轉(zhuǎn)和傾斜樣式
利用了css3的 rolate(旋轉(zhuǎn)) 和 skew (傾斜)樣式給頁面加個半圓形導航條，具體的實現(xiàn)示例如下，感興趣的朋友不要錯過2014-02-10- 教大家一個方法使用CSS把整個網(wǎng)頁傾斜，代碼只有在支持CSS3.0的瀏覽器上有效果。目前只有IE9以上版本及firefox高版本支持，其它瀏覽器沒有測試2014-01-27
- 如何使用CSS3來定位一個傾斜的圖片.2009-11-14
純CSS3制作圖片傾斜45度封頁角特效源碼是一款常用的圖片或者產(chǎn)品列表右上角CSS3標簽效果。本段代碼可以在各個網(wǎng)頁使用，有需要的朋友可以直接下載使用2017-03-07
