通過CSS3實現：鼠標懸停圖片360度旋轉效果

本文轉載自查看原文 2018-04-26 13:47 7717 Html

　　效果很好玩，代碼很簡單：

　　效果：

　　　　鼠標放置在圖片上：360度順時針旋轉

　　鼠標離開圖片：圖片260度逆時針旋轉

　　只要將下面代碼拷貝過去，並將圖片改成你想要的就可以看到效果

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>鼠標懸停圖片360度旋轉效果</title>
<style>
.xwcms {
    width: 220px;
    height: 220px;
    margin: 0 auto;
    background: no-repeat url(%E6%8B%9B%E5%95%86/img/arrow.gif) left top;
    -webkit-background-size: 220px 220px;
    -moz-background-size: 220px 220px;
    background-size: 220px 220px;
    -webkit-border-radius: 110px;
    border-radius: 110px;
    -webkit-transition: -webkit-transform 2s ease-out;
    -moz-transition: -moz-transform 2s ease-out;
    -o-transition: -o-transform 2s ease-out;
    -ms-transition: -ms-transform 2s ease-out;
}
.xwcms:hover {
    -webkit-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
    -o-transform: rotateZ(360deg);
    -ms-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
}

</style>
</head>
<div class="xwcms">
</div>
<body>
</body>
</html>

　　推薦一個神一樣的網站，上面有各種特效：http://www.xwcms.net/

　　以上

　　END

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 css3鼠標懸停圖片抖動效果 CSS3實現鼠標懸停擴展效果鼠標懸停css3動畫效果 CSS3鼠標懸停圖片上浮顯示描述代碼 css實現鼠標懸停在圖片上圖片緩慢縮放效果使用HTML和CSS實現鼠標懸停時文本的旋轉 CSS鼠標懸停圖片加邊框效果,不位移的方法利用CSS3實現鼠標懸停在圖片上圖片緩慢縮放的兩種方法 HTML+CSS鼠標懸停效果 css實現圖片360度旋轉