CSS動畫實例：圖文切換

時間 2020-08-10

標籤 css 動畫實例圖文切換欄目 CSS 简体版

原文原文鏈接

先準備好一張圖片，在頁面中放置一個類名爲container的層做爲圖文容器，在該層中再定義兩個層：一個類名爲image-box的層放置圖片，一個類名爲text-desc的層放置文本描述，HTML代碼描述以下：css

<div class="container">html

<div class="image-box">瀏覽器

<img src="hhl.jpg" alt="黃鶴樓">ide

</div>spa

<div class="text-desc">3d

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

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

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

</div>blog

</div>

分別爲這3個層和層中元素標籤img、h三、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>