CSS3的滑鼠移入圖片動態提示效果

來源:互聯網
上載者:User
這次給大家帶來CSS3的滑鼠移入圖片動態提示效果,實現CSS3滑鼠移入圖片動態提示效果的注意事項有哪些,下面就是實戰案例,一起來看一下。

第一次嘗試著寫部落格,不好或者有誤的地方希望大家多多指正呐,今天主要寫的是關於CSS3的一個重要屬性transform的一些用法,這些例子是之前在慕課網上學習某位老師的課程後自己敲的。

一、前言

1. transform是什嗎?

transform的含義是:改變,使....變形;轉換

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

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

transform:translate()

含義:變動,位移;例如向右位移20像素,向上位移50像素(向左向下為負值) 執行個體如下

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

transform:rotate()

含義:旋轉;“deg”是表示旋轉的度數 例如“180deg”表示旋轉“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的比例放大 如果是放大整數倍如放大3倍 必須寫成3.0 執行個體如下

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

3. transform的執行個體

demo01 說明:滑鼠移入後 圖片左移 內容依次進入

步驟:

1.寫好html代碼並通過css設定好內容和圖片的初始樣式(文字內容都在圖片上);

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

3.接下來設定滑鼠移入時(:hover)的樣式 同樣是利用transform 使內容左移的距離為0(transform:translate(0,0))這裡用到transition-delay屬性主要是為了讓三個內容分別延遲不同的時間 形成依次進入的效果。  

/*圖片左移 文字依次進入*/.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);}
        <!--移動-->        <figure class="test1">            <img src="img/altimg05.jpg">            <figcaption>                <h2>圖片標題</h2>                <p>這裡是圖片的相關描述內容</p>                <p>這裡是圖片的相關描述內容</p>                <p>這裡是圖片的相關描述內容</p>            </figcaption>        </figure>

demo02 說明:滑鼠移入後 圖片變模糊 矩形從圖片外旋轉進入圖片中指定位置 文字從右側飛過來 並逐漸顯示

    

步驟:

1.寫好html代碼並通過css設定好內容和圖片的初始樣式(矩形文字都在圖片上);

2.將矩形通過transform屬性位移到上方 看不到為止 並設定旋轉的角度為0 transform: translate(0,-400px) rotate(0deg);

3.接下來設定滑鼠移入時(:hover)的樣式 位移設定為0並旋轉360度 transform: translate(0,0) rotate(360deg);

/*旋轉*/.test2{background: #ccc;}.test2 figcaption{width: 100%;height: 100%;}.test2 figcaption h2{margin:15% 0 0 15%}.test2 figcaption p{margin-left:15%;transform: translate(50px,0);opacity: 0;}.test2 figcaption p{border:2px solid #ccc;width: 80%;height: 80%;position:absolute;top:10%;left:10%;transform: translate(0,-400px) rotate(0deg);}.test2:hover figcaption p{transform: translate(0,0) rotate(360deg);}.test2:hover img{opacity: 0.6;}.test2:hover figcaption p{transform: translate(0,0);opacity: 1;}
        <!--旋轉-->        <figure class="test2">            <img src="img/altimg05.jpg">            <figcaption>                <h2>圖片標題</h2>                <p>飛來飛去</p>                <p></p>            </figcaption>        </figure>

demo03 說明:滑鼠移入後 扭曲的字正常顯示(因為例子中扭曲了90度 所以視覺上看不到文字)

      

步驟:

1.寫好html代碼並通過css設定好內容和圖片的初始樣式;

2.將文字內容扭曲90度 transform: skew(90deg);

3.接下來設定滑鼠移入時(:hover)的樣式 將文字內容扭曲0度 transform: skew(0);

/*扭曲*/.test3{background:#CCCCCC;}.test3 figcaption{position: absolute;left:15%;top:15%}.test3 figcaption h2{transform: skew(90deg);}.test3 figcaption p{transform: skew(90deg);}.test3:hover img{opacity: 0.6;}.test3:hover figcaption h2{transform: skew(0);}.test3:hover figcaption p{transform: skew(0);}
        <!--扭曲-->        <figure class="test3">            <img src="img/altimg05.jpg">            <figcaption>                <h2>圖片標題</h2>                <p>這裡是圖片的相關描述內容</p>            </figcaption>        </figure>

demo04 說明:滑鼠移入後 矩形和文字顯示並縮小 圖片也縮小

步驟:

1.寫好html代碼並通過css設定好內容和圖片的初始樣式

2.將內容放大1.2倍 這是為了滑鼠移入後放大倍數變成1時形成縮小的效果 內容的透明度設定為0;

3.接下來設定滑鼠移入時(:hover)的樣式 內容放大倍數變成1也就是原始大小 圖片縮小 透明度都變成1;

/*縮放*/.test4{background: #000;}.test4 figcaption{width: 100%;height: 100%;}.test4 figcaption h2{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 p{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 p{transform: scale(1,1);opacity: 1;}.test4:hover img{opacity: 0.6;transform: scale(0.9,0.9);}.test4:hover figcaption h2{opacity: 1;transform: scale(1);}.test4:hover figcaption p{opacity: 1;transform: scale(1);}
        <!--縮放-->        <figure class="test4">            <img src="img/altimg05.jpg">            <figcaption>                <h2>圖片標題</h2>                <p>這裡是圖片的相關描述內容</p>                <p></p>            </figcaption>        </figure>

demo05 說明:滑鼠移入後 內容顯示 並出現井字格

  

步驟:

1.寫好html代碼並通過css設定好內容和圖片的初始樣式(井字就是兩個矩形的重疊)

2.將兩個矩形縮小0.8 並設定透明度為0 內容也設定透明度為0;

3.接下來設定滑鼠移入時(:hover)的樣式 內容透明度設定為1 設定矩形縮放為1 這裡利用到transition屬性 主要是為了縮小放大過程逐漸層化;

/*井字格*/.test5{background: #000;}.test5 figcaption{width: 100%;height: 100%;}.test5 figcaption h2{margin: 15% 0 0 18%;opacity: 0;}.test5 figcaption p{margin-left: 18%;opacity: 0;}.test5 figcaption p{position: absolute;}.test5 figcaption p.p01{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 p.p02{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 p.p01{opacity: 1;transform: scale(1);transition: transform 0.3s ease-in}.test5:hover p.p02{opacity: 1;transform: scale(1);transition: transform 0.3s ease-in}.test5:hover figcaption p{opacity: 1;}.test5:hover figcaption h2{opacity: 1;}.test5:hover img{opacity: 0.6;}
        <!--井字格-->        <figure class="test5">            <img src="img/altimg05.jpg">            <figcaption>                <h2>圖片標題</h2>                <p>這裡是圖片的相關描述內容</p>                <p class="p01"></p>                <p class="p02"></p>            </figcaption>        </figure>

以上是幾個簡單的小例子,之所以用figure和figcaption標籤,主要是標籤的語義化,截取動態圖用到的是GifCam第一次用 挺好用的 很可愛 哈哈。

figure標籤主要是用於規定獨立的流內容(圖片,圖表,照片,代碼等)而figcaption與figure標籤配套使用,主要用於定義figure元素的標題

哦,對了,由於這幾個例子寫在一個html裡面 所以提取出了部分公用的樣式

body,figure,figcaption,h2,p{margin:0;padding:0;font-family: "微軟雅黑";}figure{position: relative;overflow: hidden;float: left;width:33.33%;height: 350px;}figcaption{position: absolute;top: 0;left: 0;color:#fff;}figure img{width:101%;height: 360px;opacity: 0.8;transition: all 0.35s}figure figcaption p,h2,span,p{transition: all 0.35s}@media screen and (max-width: 600px) {    figure{width: 100%;}}@media screen and (min-width:601px) and (max-width: 1000px) {    figure{width: 50%;}}@media screen and (min-width: 1001px) {    figure{width: 33.33%;}}

總結:

之所以選擇寫部落客要是為了鍛煉自己的表達能力,培養一個總結知識點的好習慣,以前看別人寫的一些好的文章時都很羨慕,自己卻總是不知道從何下手,直到最近投簡曆的時候發現很多公司都要求註明自己的部落格地址,所以有必要逼著自己寫一下東西啦!

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

純css實現照片牆3D效果

Css繪製扇形圖案

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.