CSS動畫例項：圖文切換

阿新 • • 發佈：2020-08-09

先準備好一張圖片，在頁面中放置一個類名為container的層作為圖文容器，在該層中再定義兩個層：一個類名為image-box的層放置圖片，一個類名為text-desc的層放置文字描述，HTML程式碼描述如下：

</div>

<h3>黃鶴樓公園</h3>

<p>黃鶴樓是國家首批AAAAA級景區，中國旅遊勝地四十佳，武漢市的城市標誌。位於武昌蛇山之巔，有近1800餘年的歷史，為“江南三大名樓”之首，有“天下江山第一樓”美譽。在中國歷史上留下大量傳說故事和膾炙人口的詩篇。<br>

網址：<a href="http://www.cnhhl.com/">http://www.cnhhl.com/</p>

</div>

分別為這3個層和層中元素標籤img、h3、p等定義CSS樣式規則如下：

.container

{

margin: 0 auto;

width: 500px;

height: 350;

position: relative;

overflow: hidden;

border: 4px solid rgba(255, 0, 0, 0.9);

}

img

{

max-width: 100%;

vertical-align: middle;

}

{

font-size: 20px;

margin: 5px 0 10px;

text-align:center;

}

{

line-height: 20px;

font-size: 16px;

margin-bottom: 15px;

}

.text-desc

{

position: absolute;

left: 0;

top: 0;

background-color: #fff;

height: 100%;

opacity: 0;

width: 100%;

padding: 20px;

}

現要實現滑鼠懸停時圖文切換的效果。初始時，容器中顯示圖片，文字被隱藏，當滑鼠懸停於圖片上時，圖片略微放大，文字從頂部向下顯示出來，覆蓋圖片（圖片作為背景在文字後面）；當滑鼠移離時，文字被隱藏，圖片顯示出來，效果如圖1所示。

圖1 圖文切換效果：從頂部向下推出

這個滑鼠懸停效果可以採用CSS來實現，主要是對滑鼠懸停的圖片和文字描述的相關CSS屬性進行設定即可。

文字從頂部向下推出，實際上可看成滑鼠未懸停時，文字top屬性為-100%，懸停時，top為0。相關CSS屬性設定為：

.container img

{

transition: 0.5s;

}

.container:hover img

{

transform: scale(1.2);

}

.container .text-desc

{

opacity: 0.9;

top: -100%;

transition: 0.5s;

padding: 45px 20px 20px;

}

.container:hover .text-desc

{

top: 0;

}

完整的HTML程式碼如下。在這裡我們將CSS的定義與HTML頁面描述放在一個檔案中，主要是方便讀者直接複製程式碼儲存到一個HTML檔案中即可執行顯示效果。實際上，可以將有關的CSS定義放在一個XXX.css樣式表文件中，然後在HTML檔案中通過語句

引用這個樣式表。

<!DOCTYPE HTML> 
<html> 
<head>
<title>圖文切換</title>
<style>
   * 
   {
     margin: 0; 
     padding: 0; 
     box-sizing: border-box;
   }
   .container 
   { 
     margin: 0 auto; 
     width: 500px; 
     height: 350; 
     position: relative; 
     overflow: hidden; 
     border: 4px solid rgba(255, 0, 0, 0.9); 
   }  
   img 
   {
     max-width: 100%; 
     vertical-align: middle;
   }
   h3 
   {
     font-size: 20px; 
     margin: 5px 0 10px; 
     text-align:center;
   }
   p 
   {
     line-height: 20px; 
     font-size: 16px; 
     margin-bottom: 15px;
   }
   .text-desc 
   {
     position: absolute; 
     left: 0; 
     top: 0; 
     background-color: #fff; 
     height: 100%; 
     opacity: 0; 
     width: 100%; 
     padding: 20px;
   }
   .container img 
   {
     transition: 0.5s; 
     position: relative; 
     width: 100%; 
     right: 0;
   }
    .container:hover img 
   {
     right: 50%;
   }
   .container .text-desc 
   {
     opacity: 0; 
     transition: 0.5s; 
     transform: rotateY(90deg); 
     transform-origin: right center 0; 
     left:auto;
     right:0;
     width: 50%; 
     padding: 18px 10px;
   }
   .container:hover .text-desc
   {
     opacity: 1; 
     transform: rotateY(0deg); 
   }

</style>
</head>
<body>
<div  class="container">
  <div class="image-box">
       <img src="hhl.jpg" alt="黃鶴樓">
  </div>
  <div class="text-desc">
     <h3>黃鶴樓公園</h3>
     <p>黃鶴樓是國家首批AAAAA級景區，中國旅遊勝地四十佳，武漢市的城市標誌。位於武昌蛇山之巔，有近1800餘年的歷史，為“江南三大名樓”之首，有“天下江山第一樓”美譽。在中國歷史上留下大量傳說故事和膾炙人口的詩篇。<br>
網址：<a href="http://www.cnhhl.com/">http://www.cnhhl.com/</p>
  </div>
</div>
</body> 
</html>

View Code

若修改上面HTML檔案中的“top: -100%; ”為“top: 100%;”，其餘部分保持不變，則在瀏覽器中呈現出如圖2所示的切換效果，此時文字內容從底部向上推出。

圖2 圖文切換效果：從底部向上推出

若修改上面HTML檔案中的“top: -100%; ”為“left: -100%;”，“top:0;”為“left:0;”，其餘部分保持不變，則在瀏覽器中呈現出如圖3所示的切換效果，此時文字內容從左向右推出。

圖3 圖文切換效果：從左向右推出

若修改上面HTML檔案中的“top: -100%; ”為“left: 100%;”，“top:0;”為“left:0;”，其餘部分保持不變，則在瀏覽器中呈現出如圖4所示的切換效果，此時文字內容從右向左推出。

圖4 圖文切換效果：從右向左推出

若修改CSS樣式中的.container .text-desc 和 .container:hover .text-desc的定義如下：

.container .text-desc

{

opacity: 0.9;

transition: 0.5s;

top: 50%;

left: 50%;

width: 0;

height: 0;

overflow: hidden;

padding: 0;

}

.container:hover .text-desc

{

top: 0;

left: 0;

width: 100%;

height: 100%;

padding: 45px 20px 20px;

}

則在瀏覽器中呈現出如圖5所示的文字盒狀展開收縮的切換效果。

圖5 圖文切換效果：盒狀展開收縮

若修改CSS樣式中的相關切換效果設定的CSS屬性定義如下：

.container img

{

transition: 1s;

}

.container:hover img

{

opacity: 0;

transform: translateY(-100%);

}

.container .text-desc

{

z-index: -1;

transition: 1s;

transform: rotateX(80deg);

transform-origin: center bottom 0;

padding: 45px 20px 20px;

}

.container:hover .text-desc

{

transform: none;

opacity: 1;

}

則在瀏覽器中呈現出如圖6所示的切換效果。

圖6 圖文切換效果

若修改CSS樣式中的相關切換效果設定的CSS屬性定義如下：

.container img

{

transition: 0.5s;

}

.container:hover img

{

transform: scale(1.1);

}

.container .text-desc

{

transition: 0.5s;

left: 0;

top: 0;

width: 100%;

height: 100%;

transform: scale(0);

backface-visibility: hidden;

}

.container:hover .text-desc

{

opacity: 1;

transform: scale(1);

border-radius: 20%;

}

則在瀏覽器中呈現出如圖7所示的圖文切換效果。

圖7 圖文切換效果：盒狀展開為圓角（1）

若再將上面修改的樣式定義中“border-radius: 20%;”修改為“border-radius: 50% 0 50% 0;”，則瀏覽器中呈現出如圖8所示的圖文切換效果。

圖8 圖文切換效果：盒狀展開為圓角（2）

若修改CSS樣式中的相關切換效果設定的CSS屬性定義如下：

.container img

{

transition: 0.5s;

transform: rotateY(360deg) scale(1, 1);

}

.container:hover img

{

transform: rotateY(0deg) scale(0, 0);

}

.container .text-desc

{

transform: rotateY(0deg) scale(0, 0);

transition: 0.5s;

opacity: 0;

padding: 45px 20px 20px;

}

.container:hover .text-desc

{

transform: rotateY(360deg) scale(1, 1);

opacity: 1;

}

則在瀏覽器中呈現出如圖9所示的圖文切換效果。

圖9 圖文切換效果

若修改CSS樣式中的相關切換效果設定的CSS屬性定義如下：

.container img

{

transition: 0.5s;

position: relative;

width: 100%;

left: 0;

}

.container:hover img

{

left: 50%;

}

.container .text-desc

{

opacity: 0;

transition: 0.5s;

transform: rotateY(90deg);

transform-origin: left center 0;

left:0;

width: 50%;

padding: 18px 10px;

}

.container:hover .text-desc

{

opacity: 1;

transform: rotateY(0deg);

}

則在瀏覽器中呈現出如圖10所示的圖文切換效果。

圖10 圖文切換效果：左文右圖

若再將上面CSS樣式定義中的4個單詞“left”修改為“right”，並且在“width: 50%; ”之前加上一句“left:auto;”，則在瀏覽器中呈現出如圖11所示的圖文切換效果。

圖11 圖文切換效果：左圖右文

上面的這些圖文切換效果可以在一個頁面中佈置多個圖片，並選用所需的效果。例如，可以編寫如下的HTML檔案。

<!DOCTYPE HTML> 
<html> 
<head>
<title>圖文切換</title>
<style>
   * 
   {
     margin: 0; 
     padding: 0; 
     box-sizing: border-box;
   }
   .container 
   { 
     margin: 0 auto; 
     max-width: 1060px; 
   }  
   img 
   {
     max-width: 100%; 
     vertical-align: middle;
   }
   h3 
   {
     font-size: 20px; 
     margin: 3px 0 6px; 
   }
   p 
   {
     line-height: 20px; 
     font-size: 14px; 
     margin-bottom: 15px;
   }
   ul 
   {
     width: 100%; 
     position: relative; 
     overflow: hidden; 
     border: 4px solid rgba(255, 0, 0, 0.9);
   }
   li 
   {
     float: left; 
     width: 31.33%; 
     margin: 10px 1%; 
     list-style: none;
   }
   .text-desc 
   {
     position: absolute; 
     left: 0; 
     top: 0; 
     background-color: #fff; 
     height: 100%; 
     opacity: 0; 
     width: 100%; 
     padding: 10px;
   }
   .btn 
   {
     display: inline-block; 
     padding: 5px 10px; 
     font-size: 14px; 
     color: #fff; 
     border: 2px solid #4d92d9; 
     background-color: #4d92d9; 
     text-decoration: none; 
     transition: 0.4s;
   }
   .btn:hover 
   {
     background-color: transparent; 
     color: #4d92d9; 
     transition: 0.4s;
   }
   .port 
   {
     width: 100%; 
     position: relative; 
     overflow: hidden; 
     border: 4px solid rgba(255,0, 255, 0.9);
   }

   .port.effect1 img 
   {
     transition: 0.5s;
   }
   .port.effect1:hover img 
   {
     transform: scale(1.2);
   }
   .port.effect1 .text-desc 
   {
     opacity: 0.9; 
     top: -100%; 
     transition: 0.5s; 
     padding: 45px 20px 20px;
   }
   .port.effect1:hover .text-desc
   {
     top: 0;
   }

    .port.effect2 img 
   {
     transition: 0.5s; 
     transform: rotateY(360deg) scale(1, 1);
   }
    .port.effect2:hover img 
   {
     transform: rotateY(0deg) scale(0, 0);
   }
    .port.effect2 .text-desc 
   {
     transform: rotateY(0deg) scale(0, 0); 
     transition: 0.5s; 
     opacity: 0; 
     padding: 45px 20px 20px;
   }
   .port.effect2:hover .text-desc
   {
     transform: rotateY(360deg) scale(1, 1);  
     opacity: 1;
   }
   .port.effect3 img 
   {
     transition: 0.5s; 
     position: relative; 
     width: 100%; 
     right: 0;
   }
    .port.effect3:hover img 
   {
     right: 50%;
   }
   .port.effect3 .text-desc 
   {
     opacity: 0; 
     transition: 0.5s; 
     transform: rotateY(90deg); 
     transform-origin: right center 0; 
     left:auto;
     right:0;
     width: 50%; 
     padding: 18px 10px;
   }
   .port.effect3:hover .text-desc
   {
     opacity: 1; 
     transform: rotateY(0deg); 
   }
</style>
</head>
<body>
<div  class="container">
  <ul>
    <li>
       <div class="port effect1">
         <div class="image-box">
            <img src="mltc.png" alt="木蘭天池">
         </div>
         <div class="text-desc">
        <h3>木蘭天池</h3>
            <p>木蘭天池景區，是國家5A級景區，也是國家森林公園，木蘭天池-相傳是木蘭將軍的外婆家，是木蘭將軍小時候生活、習武的地方。</p>
              <a href="http://www.mltc.cn/" class="btn">進入官網</a>
         </div>
      </div>
    </li>
    <li>
       <div class="port effect2">
         <div class="image-box">
            <img src="mls.jpg" alt="木蘭山">
         </div>
         <div class="text-desc">
        <h3>木蘭山</h3>
            <p>荊楚名嶽-木蘭山位於黃陂區北部，是流芳千古的木蘭將軍故里，因木蘭將軍而得名。是國家5A級景區，國家地質公園、木蘭文化之源、千年宗教聖地。</p>
              <a href="http://www.whmls.cn/" class="btn">進入官網</a>
         </div>
      </div>
    </li>
    <li>
       <div class="port effect3">
         <div class="image-box">
            <img src="mlyws.png" alt="木蘭雲霧山">
         </div>
         <div class="text-desc">
        <h3>木蘭雲霧山</h3>
            <p>享有“西陵勝地、楚北名區、陂西垂障、漢地祖山”美譽的雲霧山，景區佔地25平方公里。</p>
              <a href="http://www.yunwushan.cn/" class="btn">進入官網</a>
         </div>
      </div>
    </li>
  </ul>
</div>
</body> 
</html>

View Code

在瀏覽器中開啟包含這段HTML程式碼的html檔案，可以呈現如圖12所示的圖文切換效果。

圖12 多個圖文切換效果

CSS動畫例項：圖文切換

CSS動畫例項：圖文切換

CSS動畫例項：旋轉的葉片

CSS動畫例項：一顆躁動的心

CSS動畫例項：Loading載入動畫效果（二）

CSS動畫例項：行星和衛星

CSS動畫例項：花瓣發光旋轉

JavaScript動畫例項：遞迴分形圖動態展示

JavaScript動畫例項：動感小球

JavaScript動畫例項：螺旋線

JavaScript動畫例項：曲線的繪製

JavaScript動畫例項：旋轉的正三角形

JavaScript動畫例項：粒子文字

JavaScript動畫例項：沿五角星形線擺動的小圓

JavaScript動畫例項：炸開的小球

JavaScript動畫例項：沿圓周運動的圓圈

CSS 動畫： 3D翻頁動畫

前端 | 隱藏搜尋框：CSS 動畫正反向序列

隱藏搜尋框：CSS 動畫正反向序列

css動畫：按鈕漣漪效果

瀏覽器渲染原理與 CSS 動畫

CSS動畫例項：圖文切換

相關推薦