這篇文章將為大家詳細(xì)講解有關(guān)CSS3如何實現(xiàn)鼠標(biāo)移入圖片動態(tài)提示效果，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),河?xùn)|企業(yè)網(wǎng)站建設(shè),河?xùn)|品牌網(wǎng)站建設(shè),網(wǎng)站定制,河?xùn)|網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,河?xùn)|網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

一、前言

1. transform是什么？

transform的含義是：改變，使....變形；轉(zhuǎn)換

2. transform的常見屬性有哪些？

transform的屬性包括： translate()/rotate() / skew() / scale() /，分別還有x、y之分，比如：rotatex() 和 rotatey() ，以此類推。

transform:translate()

含義：變動，位移；例如向右位移20像素，向上位移50像素（向左向下為負(fù)值） 實例如下

.test01{-webkit-transform:translate(20px,50px);-moz-transform:translate(20px,50px)}

transform:rotate()

含義：旋轉(zhuǎn)；“deg”是表示旋轉(zhuǎn)的度數(shù) 例如“180deg”表示旋轉(zhuǎn)“180度”  實例如下

.test02{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg)}

transform:skew()

含義：傾斜  實例如下

.test03{-webkit-transform:skew(20deg);-moz-transform:skew(20deg)}　

transform:scale()

含義：比例  1.8表示以1.8的比例放大 如果是放大整數(shù)倍如放大3倍 必須寫成3.0  實例如下

.test03{-webkit-transform:scale(2.5);-moz-transform:scale(2.5)}

3. transform的實例

demo01 說明：鼠標(biāo)移入后 圖片左移 內(nèi)容依次進入

步驟：

1.寫好html代碼并通過css設(shè)置好內(nèi)容和圖片的初始樣式（文字內(nèi)容都在圖片上）；

2.將描述內(nèi)容通過transform屬性位移到左側(cè) 看不到為止（transform:translate(-600px,0);）；

3.接下來設(shè)置鼠標(biāo)移入時(:hover)的樣式  同樣是利用transform   使內(nèi)容左移的距離為0（transform:translate(0,0)）這里用到transition-delay屬性主要是為了讓三個內(nèi)容分別延遲不同的時間 形成依次進入的效果。

/*圖片左移 文字依次進入*/
.test1{background: #fff;}
.test1 figcaption p{background: #fff;color:#333;margin:5px 0;transform: translate(-600px,0px);}
.test1 figcaption{padding:20px}
.test1:hover figcaption p{transform: translate(0,0);}

.test1 figcaption p:nth-of-type(1){transition-delay: 0.2s;}
.test1 figcaption p:nth-of-type(2){transition-delay: 0.3s;}
.test1 figcaption p:nth-of-type(3){transition-delay: 0.4s;}
.test1:hover img{transform: translate(-5px,0);}

demo02 說明：鼠標(biāo)移入后 圖片變模糊 矩形從圖片外旋轉(zhuǎn)進入圖片中指定位置 文字從右側(cè)飛過來 并逐漸顯示

步驟：

1.寫好html代碼并通過css設(shè)置好內(nèi)容和圖片的初始樣式（矩形文字都在圖片上）；

2.將矩形通過transform屬性位移到上方 看不到為止 并設(shè)置旋轉(zhuǎn)的角度為0  transform: translate(0,-400px) rotate(0deg)；

3.接下來設(shè)置鼠標(biāo)移入時(:hover)的樣式 位移設(shè)置為0并旋轉(zhuǎn)360度  transform: translate(0,0) rotate(360deg);

/*旋轉(zhuǎn)*/
.test2{background: #ccc;}
.test2 figcaption{width: 100%;height: 100%;}
.test2 figcaption h3{margin:15% 0 0 15%}
.test2 figcaption p{margin-left:15%;transform: translate(50px,0);opacity: 0;}
.test2 figcaption div{border:2px solid #ccc;width: 80%;height: 80%;position:absolute;top:10%;left:10%;transform: translate(0,-400px) rotate(0deg);}
.test2:hover figcaption div{transform: translate(0,0) rotate(360deg);}
.test2:hover img{opacity: 0.6;}
.test2:hover figcaption p{transform: translate(0,0);opacity: 1;}

demo03 說明：鼠標(biāo)移入后 扭曲的字正常顯示（因為例子中扭曲了90度 所以視覺上看不到文字）

步驟：

1.寫好html代碼并通過css設(shè)置好內(nèi)容和圖片的初始樣式；

2.將文字內(nèi)容扭曲90度 transform: skew(90deg)；

3.接下來設(shè)置鼠標(biāo)移入時(:hover)的樣式 將文字內(nèi)容扭曲0度 transform: skew(0);

/*扭曲*/
.test3{background:#CCCCCC;}
.test3 figcaption{position: absolute;left:15%;top:15%}
.test3 figcaption h3{transform: skew(90deg);}
.test3 figcaption p{transform: skew(90deg);}
.test3:hover img{opacity: 0.6;}
.test3:hover figcaption h3{transform: skew(0);}
.test3:hover figcaption p{transform: skew(0);}

demo04 說明：鼠標(biāo)移入后 矩形和文字顯示并縮小  圖片也縮小

步驟：

1.寫好html代碼并通過css設(shè)置好內(nèi)容和圖片的初始樣式

2.將內(nèi)容放大1.2倍 這是為了鼠標(biāo)移入后放大倍數(shù)變成1時形成縮小的效果 內(nèi)容的透明度設(shè)置為0；

3.接下來設(shè)置鼠標(biāo)移入時(:hover)的樣式 內(nèi)容放大倍數(shù)變成1也就是原始大小 圖片縮小  透明度都變成1;

/*縮放*/
.test4{background: #000;}
.test4 figcaption{width: 100%;height: 100%;}
.test4 figcaption h3{margin:15% 0 0 15%;opacity:0;transform: scale(1.2);}
.test4 figcaption p{margin-left:15%;opacity:0;transform: scale(1.2);}
.test4 figcaption div{border:2px solid #ccc;width: 80%;height: 80%;position:absolute;top:10%;left:10%;transform: scale(1.2,1.2);opacity: 0;}
.test4:hover figcaption div{transform: scale(1,1);opacity: 1;}
.test4:hover img{opacity: 0.6;transform: scale(0.9,0.9);}
.test4:hover figcaption h3{opacity: 1;transform: scale(1);}
.test4:hover figcaption p{opacity: 1;transform: scale(1);}

demo05 說明：鼠標(biāo)移入后 內(nèi)容顯示 并出現(xiàn)井字格

步驟：

1.寫好html代碼并通過css設(shè)置好內(nèi)容和圖片的初始樣式（井字就是兩個矩形的重疊）

2.將兩個矩形縮小0.8 并設(shè)置透明度為0 內(nèi)容也設(shè)置透明度為0；

3.接下來設(shè)置鼠標(biāo)移入時(:hover)的樣式 內(nèi)容透明度設(shè)置為1 設(shè)置矩形縮放為1  這里利用到transition屬性 主要是為了縮小放大過程逐漸變化;

/*井字格*/
.test5{background: #000;}
.test5 figcaption{width: 100%;height: 100%;}
.test5 figcaption h3{margin: 15% 0 0 18%;opacity: 0;}
.test5 figcaption p{margin-left: 18%;opacity: 0;}
.test5 figcaption div{position: absolute;}
.test5 figcaption div.div01{width: 80%;height:70%;border-top: 2px solid #ccc;border-bottom: 2px solid #ccc;left:10%;top:15%;opacity: 0;transform: scale(0.8);}
.test5 figcaption div.div02{width: 70%;height:80%;border-left: 2px solid #ccc;border-right: 2px solid #ccc;left: 15%;top:10%;opacity: 0;transform: scale(0.8);}
.test5:hover div.div01{opacity: 1;transform: scale(1);transition: transform 0.3s ease-in}
.test5:hover div.div02{opacity: 1;transform: scale(1);transition: transform 0.3s ease-in}
.test5:hover figcaption p{opacity: 1;}
.test5:hover figcaption h3{opacity: 1;}
.test5:hover img{opacity: 0.6;}