利用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"> @@##@@ </label> @@##@@ <input type = "radio" name="carousel" id = "list2"> <label for="list2"> @@##@@ </label> @@##@@ <input type = "radio" name="carousel" id = "list3"> <label for="list3"> @@##@@ </label> @@##@@ <input type = "radio" name="carousel" id = "list4"> <label for="list4"> @@##@@ </label> @@##@@ <input type = "radio" name="carousel" id = "list5"> <label for="list5"> @@##@@ </label> @@##@@ </div></body></html>静态的效果图如下：
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
885
