CSS3實(shí)現(xiàn)頭像旋轉(zhuǎn)效果
發(fā)布時(shí)間：2017-03-13 16:54:56 作者：erdouzhang 
我要評(píng)論
我要評(píng)論本篇文章主要介紹了CSS3實(shí)現(xiàn)頭像旋轉(zhuǎn)效果，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
鼠標(biāo)未放上效果：
鼠標(biāo)放上之后旋轉(zhuǎn)效果：
transition: all 2.0s;表示所有的屬性變換在2秒內(nèi)完成；
transform: rotate(360deg);表示圖片旋轉(zhuǎn)360度。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
img{
border: #000 solid 2px;
display: block;
margin: 50px auto;
border-radius: 50%;
transition: all 2.0s;
}
img:hover{
transform: rotate(360deg);
}
</style>
</head>
<body>
<img src="img/03.jpg" />
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
CSS3實(shí)現(xiàn)360度循環(huán)旋轉(zhuǎn)功能
這篇文章主要介紹了CSS3實(shí)現(xiàn)360度循環(huán)旋轉(zhuǎn)功能,整個(gè)div360度旋轉(zhuǎn)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考2022-01-25
css3 利用transform-origin 實(shí)現(xiàn)圓點(diǎn)分布在大圓上布局及旋轉(zhuǎn)特效
這篇文章主要介紹了css3 利用transform-origin 實(shí)現(xiàn)圓點(diǎn)分布在大圓上布局及旋轉(zhuǎn)特效,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可2021-04-29
css3 實(shí)現(xiàn)圓形旋轉(zhuǎn)倒計(jì)時(shí)
這篇文章主要介紹了css3 實(shí)現(xiàn)圓形旋轉(zhuǎn)倒計(jì)時(shí)功能,需要的朋友可以參考下2018-02-24純CSS3制作的鼠標(biāo)懸停時(shí)邊框旋轉(zhuǎn)
本文給大家分享一段css3代碼實(shí)現(xiàn)鼠標(biāo)懸停時(shí)邊框旋轉(zhuǎn)的效果，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下2017-01-03
CSS3使用雙旋轉(zhuǎn)實(shí)現(xiàn)福到了的迎春喜慶特效代碼
春節(jié)快到了，因?yàn)橐咔橐呀?jīng)好久沒(méi)有回老家了，今年終于可以回家過(guò)年了，我已經(jīng)抑制不住自己激動(dòng)的心情了。因此，我利用css3的旋轉(zhuǎn)做了一個(gè)福到了的特效，而且是雙旋轉(zhuǎn)，感興2023-01-29
