前言
前端本身很雜，想必在學前端的大家都懂，前端技能的各種學習心得，各種教程，只要你有一顆學習的心都可以搞定，關鍵在于你有沒有需求分析的能力，解決問題的能力，這兩個才是決定工資高低的本事，就那么點知識嘛，大家都懂了，拼的還是這兩點能力。
本文將詳細介紹利用純css如何來實現縮略圖懸停效果，分享出來供大家參考借鑒，下面話不多說了，來一起看看完整的實例代碼吧。
縮略圖懸停效果如下：
👇源碼：
<!doctype html><html><head><meta charset="UTF-8"><meta name="Keywords" content="關鍵詞,關鍵詞"><meta name="Description" content="描述"><title>網頁的標題</title><style type="text/css">{/通配符 所有元素/margin:0;padding:0;}a{text-decoration:none;}.content{width:680px;margin:20px auto 0;/*上右下左 上 左右 下 上下 左右 auto自動*/}.view{width:300px;height:200px;border:10px solid #fff;position:relative;overflow:hidden;float:left;margin:10px;}.view .info{width:300px;height:200px;background:rgba(219,127,8, 0.7);position:absolute;top:0;left:0;text-align:center;}.view .info h2{font-size:16px;background:rgba(0,0,0,0.8);padding:10px;color:#fff;text-align:center;margin-top:20px;}.view .info p{font-size:12px;padding:10px 20px;line-height:18px;text-align:left;color:#fff;}.view .info a{color:#fff;font-size:12px;background:#000;padding:5px 15px;display:inline-block;}.view-frist .info{opacity:0;transition:all 0.4s linear;}.view-frist .info h2{transform:translateY(-100px);opacity:0;transition:all 0.2s linear;/*過渡 all 時間 linear 速度 勻速 ease*/}.view-frist .info p{transform:translateY(100px);opacity:0;transition:all 0.2s linear;}.view-frist .info a{transform:translateX(-200px);opacity:0;transition:all 0.2s linear;}/*數字 關鍵（odd even） 公式*/.view-frist:nth-child(2n) .info a{transform:translateX(200px);opacity:0;transition:all 0.2s linear;}.view-frist:hover .info{opacity:1;}.view-frist:hover .info h2,.view-frist:hover .info p{opacity:1;transform:translateY(0);/*傾斜 旋轉 比例縮放 位移*/}.view-frist:hover .info p{transition-delay:0.2s;/*延時*/}.view-frist:hover .info a{opacity:1;transform:translateX(0);transition-delay:0.3s;} </style></head><body> <div class="content"> <div class="view view-frist"> <img src="images/1.jpg" alt="" width="" height="" /> <div class="info"> <h2>HTML5 + CSS3</h2> <p>創建HTML5文檔，實戰HTML5表單，實戰HTML5繪畫，HTML5音頻與視頻，Web存儲，離線應用，Workers多線程處理，Geolocation地理位置等技術。</p> <a href="">Read More</a> </div> </div> <div class="view view-frist"> <img src="images/2.jpg" alt="" width="" height="" /> <div class="info"> <h2>HTML5 + CSS3</h2> <p>創建HTML5文檔，實戰HTML5表單，實戰HTML5繪畫，HTML5音頻與視頻，Web存儲，離線應用，Workers多線程處理，Geolocation地理位置等技術。</p> <a href="">Read More</a> </div> </div> <div class="view view-frist"> <img src="images/3.jpg" alt="" width="" height="" /> <div class="info"> <h2>HTML5 + CSS3</h2> <p>創建HTML5文檔，實戰HTML5表單，實戰HTML5繪畫，HTML5音頻與視頻，Web存儲，離線應用，Workers多線程處理，Geolocation地理位置等技術。</p> <a href="">Read More</a> </div> </div> <div class="view view-frist"> <img src="images/4.jpg" alt="" width="" height="" /> <div class="info"> <h2>HTML5 + CSS3</h2> <p>創建HTML5文檔，實戰HTML5表單，實戰HTML5繪畫，HTML5音頻與視頻，Web存儲，離線應用，Workers多線程處理，Geolocation地理位置等技術。</p> <a href="">Read More</a> </div> </div> </div></body></html>總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。
新聞熱點
疑難解答
