站長(zhǎng)資訊網(wǎng)
        最全最豐富的資訊網(wǎng)站

        css怎么讓鼠標(biāo)滑過(guò)圖片旋轉(zhuǎn)

        在css中,可以使用“:hover”偽類(lèi)選擇器和transform屬性實(shí)現(xiàn)鼠標(biāo)滑過(guò)圖片旋轉(zhuǎn)的效果,語(yǔ)法為“圖片元素:hover{transform:rotateZ(旋轉(zhuǎn)角度);}”。

        css怎么讓鼠標(biāo)滑過(guò)圖片旋轉(zhuǎn)

        本教程操作環(huán)境:windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

        css怎么讓鼠標(biāo)滑過(guò)圖片旋轉(zhuǎn)

        在css中可以通過(guò)transform屬性旋轉(zhuǎn)div元素,transform 屬性向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。該屬性允許我們對(duì)元素進(jìn)行旋轉(zhuǎn)、縮放、移動(dòng)或傾斜。

        表格中的數(shù)字注明了完全支持該屬性的首個(gè)瀏覽器版本。

        帶 -webkit-、-moz- 或 -ms- 的數(shù)字表示使用前綴的首個(gè)版本。

        css怎么讓鼠標(biāo)滑過(guò)圖片旋轉(zhuǎn)

        下面我們通過(guò)示例來(lái)看一下怎樣是鼠標(biāo)滑過(guò),圖片旋轉(zhuǎn),示例如下:

        <html> <head>  <style> body { background:#ddd; } .keleyi { width: 220px; height: 220px; margin: 0 auto; background: no-repeat url("1013.01.png") left top; -webkit-background-size: 220px 220px; background-size: 220px 220px; -webkit-border-radius: 110px; border-radius: 110px; -webkit-transition: -webkit-transform 2s ease-out; } .keleyi:hover { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); } </style> </head> <body> <div class="keleyi"></div>   </body> </html>

        上述示例中使用chrome瀏覽器因此使用了-webkit-前綴。

        輸出結(jié)果:

        css怎么讓鼠標(biāo)滑過(guò)圖片旋轉(zhuǎn)

        當(dāng)鼠標(biāo)滑過(guò)之后,會(huì)發(fā)生旋轉(zhuǎn):

        css怎么讓鼠標(biāo)滑過(guò)圖片旋轉(zhuǎn)

        贊(0)
        分享到: 更多 (0)
        網(wǎng)站地圖   滬ICP備18035694號(hào)-2    滬公網(wǎng)安備31011702889846號(hào)
        主站蜘蛛池模板: 99久久国产热无码精品免费| 国产成人精品视频2021| 国产精品久久久久久| 三级高清精品国产| 一区二区三区精品| 国产成人精品日本亚洲| 一本色道久久88综合日韩精品| 国产精品美女久久久久AV福利| 91视频精品全国免费观看| 日韩人妻精品无码一区二区三区 | 无码国产精品一区二区免费模式 | 亚洲一区无码精品色| 精品国产一级在线观看| 亚洲国产精品不卡在线电影| 国产精品ⅴ无码大片在线看| 夜夜高潮夜夜爽国产伦精品| 久久se这里只有精品| 99精品视频在线观看婷| 久久99精品久久久久久| 精品无码国产一区二区三区AV| 亚洲精品无码专区在线播放| 久久精品国产72国产精福利| 国产精品欧美久久久久天天影视| 久久99精品国产一区二区三区| HEYZO无码综合国产精品227| 久久狠狠高潮亚洲精品| 欧洲精品色在线观看| 中文国产成人精品久久不卡| 国内精品久久国产大陆| 老司机性色福利精品视频| 亚洲精品无码成人片在线观看| 久久久久久久久久久免费精品| 国产精品午夜无码AV天美传媒| 8050免费午夜一级国产精品| 老司机69精品成免费视频| 色花堂国产精品第一页| 色综合久久综精品| 影音先锋国产精品国语对白| 亚洲精品免费在线观看| 91精品国产91久久| 亚洲第一精品在线视频|