利用CSS3实现图片切换特效_html/css_WEB-ITnose-html教學-PHP中文網

首頁

web前端

html教學

利用CSS3实现图片切换特效_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:26 AM

利用label标签和:checked，并使用到了transform和transition属性。实现简单，相比JS而言，非常方便，且效果更佳，有兴趣可以拷贝代码，修改图片路径，运行看看效果。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="Keywords" content="关键词一，关键词二">    <meta name="Description" content="网站描述内容">    <meta name="Author" content="刘艳">    <title></title>    <style> #content{width:800px;margin: 30px auto;position: relative;} input[type="radio"]{display: none;} input[type="radio"]~img{width: 800px;position: absolute;top:0px;left:0px;opacity: 0;height: 500px;transform:scale(1.1);transition:all 1s;} input:checked +label + img{opacity: 1;transform:scale(1.0);} input:checked +label img{border: 8px solid #FFDA34; opacity: 1.0; transition: all 1s;} label {display: inline-block;width: 134px;margin: 5px 8px;} label img{ opacity:0.5; width: 134px; margin-top:500px;height: 75px;border:8px solid #000;} </style></head><body>    <div id = "content">        <input type = "radio" name="carousel" id = "list1" checked>        <label for="list1">            <img  src="/static/imghwm/default1.png"  data-src="../images/photo1.jpg"  class="lazy" alt="利用CSS3实现图片切换特效_html/css_WEB-ITnose" >        </label>        <img  src="/static/imghwm/default1.png"  data-src="../images/photo1.jpg"  class="lazy" alt="利用CSS3实现图片切换特效_html/css_WEB-ITnose" >        <input type = "radio" name="carousel" id = "list2">        <label for="list2">            <img  src="/static/imghwm/default1.png"  data-src="../images/photo2.jpg"  class="lazy" alt="利用CSS3实现图片切换特效_html/css_WEB-ITnose" >        </label>        <img  src="/static/imghwm/default1.png"  data-src="../images/photo2.jpg"  class="lazy" alt="利用CSS3实现图片切换特效_html/css_WEB-ITnose" >        <input type = "radio" name="carousel" id = "list3">        <label for="list3">            <img  src="/static/imghwm/default1.png"  data-src="../images/photo3.jpg"  class="lazy" alt="利用CSS3实现图片切换特效_html/css_WEB-ITnose" >        </label>        <img  src="/static/imghwm/default1.png"  data-src="../images/photo3.jpg"  class="lazy" alt="利用CSS3实现图片切换特效_html/css_WEB-ITnose" >        <input type = "radio" name="carousel" id = "list4">        <label for="list4">            <img  src="/static/imghwm/default1.png"  data-src="../images/photo4.jpg"  class="lazy" alt="利用CSS3实现图片切换特效_html/css_WEB-ITnose" >        </label>        <img  src="/static/imghwm/default1.png"  data-src="../images/photo4.jpg"  class="lazy" alt="利用CSS3实现图片切换特效_html/css_WEB-ITnose" >        <input type = "radio" name="carousel" id = "list5">        <label for="list5">            <img  src="/static/imghwm/default1.png"  data-src="../images/photo5.jpg"  class="lazy" alt="利用CSS3实现图片切换特效_html/css_WEB-ITnose" >        </label>        <img  src="/static/imghwm/default1.png"  data-src="../images/photo5.jpg"  class="lazy" alt="利用CSS3实现图片切换特效_html/css_WEB-ITnose" >    </div></body></html>

静态的效果图如下：

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

公眾號網頁更新緩存難題：如何避免版本更新後舊緩存影響用戶體驗？Mar 04, 2025 pm 12:32 PM

公眾號網頁更新緩存，這玩意兒，說簡單也簡單，說複雜也夠你喝一壺的。你辛辛苦苦更新了公眾號文章，結果用戶打開還是老版本，這滋味，誰受得了？這篇文章，咱就來扒一扒這背後的彎彎繞繞，以及如何優雅地解決這個問題。讀完之後，你就能輕鬆應對各種緩存難題，讓你的用戶始終體驗到最新鮮的內容。先說點基礎的。網頁緩存，說白了就是瀏覽器或者服務器為了提高訪問速度，把一些靜態資源（比如圖片、CSS、JS）或者頁面內容存儲起來。下次訪問時，直接從緩存裡取，不用再重新下載，速度自然快。但這玩意兒，也是個雙刃劍。新版本上線，