CSS3實(shí)現(xiàn)同時(shí)執(zhí)行傾斜和旋轉(zhuǎn)的動(dòng)畫效果

發(fā)布時(shí)間：2016-10-27 16:30:46 作者：佚名

這篇文章通過實(shí)例代碼給大家主要介紹了，如何利用CSS3實(shí)現(xiàn)同時(shí)執(zhí)行傾斜和旋轉(zhuǎn)的動(dòng)畫效果，文中給出了完整的實(shí)例代碼，大家直接運(yùn)行就可以看到效果，有需要的朋友們可以參考借鑒，下面來(lái)一起看看吧。

先看看靜態(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è)試沒問題，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)畫效果的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問大家可以留言交流。謝謝大家對(duì)腳本之家的支持。

Tag：CSS3 傾斜旋轉(zhuǎn) 動(dòng)畫

相關(guān)文章

純CSS3實(shí)現(xiàn)的鼠標(biāo)經(jīng)過文字傾斜線性變換動(dòng)畫特效源碼
這是一款基于純CSS3實(shí)現(xiàn)的鼠標(biāo)經(jīng)過文字傾斜線性變換動(dòng)畫特效源碼，當(dāng)鼠標(biāo)滑過文字時(shí)，文字可呈現(xiàn)出傾斜及斜線滑過的效果，且動(dòng)畫過度效果流暢自然
2016-06-07
HTML5和CSS3炫酷圖片運(yùn)動(dòng)模糊和傾斜特效源碼
本特效源碼是一款效果非常炫酷的HTML5和CSS3圖片運(yùn)動(dòng)模糊和傾斜效果的代碼。圖片產(chǎn)生輕微的運(yùn)動(dòng)模糊并傾斜的效果
2016-03-24
jQuery+CSS3單頁(yè)傾斜分割布局幻燈片特效源碼
是一款非常有創(chuàng)意的基于jQuery和CSS3單頁(yè)傾斜分割布局幻燈片特效的代碼。該幻燈片特效將整個(gè)屏幕傾斜分割為兩個(gè)部分，在鼠標(biāo)向下滾動(dòng)時(shí)，圖片部分和文本部分會(huì)相互切換
2015-11-10
HTML5+CSS3實(shí)現(xiàn)圖片可傾斜擺放的動(dòng)畫相冊(cè)效果源碼
今天我們又要來(lái)分享一個(gè)CSS3動(dòng)畫相冊(cè)，這款相冊(cè)的特點(diǎn)是圖片可以任意角度的傾斜擺放
2015-01-06
基于CSS3實(shí)現(xiàn)的圖片可傾斜四個(gè)角度傾斜特效源碼
這是一款基于CSS3實(shí)現(xiàn)的圖片特效源碼，它可以讓網(wǎng)頁(yè)上的圖片傾斜任意的角度，其實(shí)在CSS3中實(shí)現(xiàn)圖片的傾斜非常簡(jiǎn)單，我們并不需要利用復(fù)雜的JS計(jì)算各種角度，只要用CSS3的tr
2014-08-20
css3實(shí)現(xiàn)超立體3D圖片側(cè)翻傾斜效果
這篇文章主要介紹了css3實(shí)現(xiàn)超立體3D圖片側(cè)翻傾斜效果,需要的朋友可以參考下
2014-04-16
css3 給頁(yè)面加個(gè)半圓形導(dǎo)航條主要利用旋轉(zhuǎn)和傾斜樣式
利用了css3的 rolate(旋轉(zhuǎn)) 和 skew (傾斜)樣式給頁(yè)面加個(gè)半圓形導(dǎo)航條，具體的實(shí)現(xiàn)示例如下，感興趣的朋友不要錯(cuò)過
2014-02-10
css3教程之傾斜頁(yè)面
教大家一個(gè)方法使用CSS把整個(gè)網(wǎng)頁(yè)傾斜，代碼只有在支持CSS3.0的瀏覽器上有效果。目前只有IE9以上版本及firefox高版本支持，其它瀏覽器沒有測(cè)試
2014-01-27
CSS3 傾斜的網(wǎng)頁(yè)圖片庫(kù)實(shí)例教程
如何使用CSS3來(lái)定位一個(gè)傾斜的圖片.
2009-11-14
純CSS3制作圖片傾斜45度封頁(yè)角特效源碼
純CSS3制作圖片傾斜45度封頁(yè)角特效源碼是一款常用的圖片或者產(chǎn)品列表右上角CSS3標(biāo)簽效果。本段代碼可以在各個(gè)網(wǎng)頁(yè)使用，有需要的朋友可以直接下載使用
2017-03-07