Home >Web Front-end >HTML Tutorial >利用CSS3实现图片切换特效_html/css_WEB-ITnose
利用CSS3实现图片切换特效_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:26:16971browse
利用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="../images/photo1.jpg" alt="利用CSS3实现图片切换特效_html/css_WEB-ITnose" > </label> <img src="../images/photo1.jpg" alt="利用CSS3实现图片切换特效_html/css_WEB-ITnose" > <input type = "radio" name="carousel" id = "list2"> <label for="list2"> <img src="../images/photo2.jpg" alt="利用CSS3实现图片切换特效_html/css_WEB-ITnose" > </label> <img src="../images/photo2.jpg" alt="利用CSS3实现图片切换特效_html/css_WEB-ITnose" > <input type = "radio" name="carousel" id = "list3"> <label for="list3"> <img src="../images/photo3.jpg" alt="利用CSS3实现图片切换特效_html/css_WEB-ITnose" > </label> <img src="../images/photo3.jpg" alt="利用CSS3实现图片切换特效_html/css_WEB-ITnose" > <input type = "radio" name="carousel" id = "list4"> <label for="list4"> <img src="../images/photo4.jpg" alt="利用CSS3实现图片切换特效_html/css_WEB-ITnose" > </label> <img src="../images/photo4.jpg" alt="利用CSS3实现图片切换特效_html/css_WEB-ITnose" > <input type = "radio" name="carousel" id = "list5"> <label for="list5"> <img src="../images/photo5.jpg" alt="利用CSS3实现图片切换特效_html/css_WEB-ITnose" > </label> <img src="../images/photo5.jpg" alt="利用CSS3实现图片切换特效_html/css_WEB-ITnose" > </div></body></html> 静态的效果图如下：
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：CSS3新增颜色属性_html/css_WEB-ITnoseNext article：NEC 框架规范 css function_html/css_WEB-ITnose