我们先来看下效果图：
（相关教程：css教程）
切换前：
切换中：
切换成功：
html代码：
<!doctype html><html><head><meta charset="utf-8"><title>来自limou的尝试解读</title><link href="css/public.css" rel="stylesheet" type="text/css"></head><body style="background-color:#eaf5ff;"> <div><h1>来自limou的尝试解读</h1></div> <div class="button"> <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <div class="images"> <!--选中第一个input--> <input id="in-img-1" name="inpitimages" class="cr-in-img-1" type="radio" checked> <label for="in-img-1" class="la-checklabel-1">1</label> <input id="in-img-2" name="inpitimages" class="cr-in-img-2" type="radio"> <label for="in-img-2" class="la-checklabel-2">2</label> <input id="in-img-3" name="inpitimages" class="cr-in-img-3" type="radio"> <label for="in-img-3" class="la-checklabel-3">3</label> <input id="in-img-4" name="inpitimages" class="cr-in-img-4" type="radio"> <label for="in-img-4" class="la-checklabel-4">4</label> <div class="spanstyle"> <div> <span>images1</span> <span>images2</span> <span>images3</span> <span>images4</span> </div> <div> <span>images1</span> <span>images2</span> <span>images3</span> <span>images4</span> </div> <div> <span>images1</span> <span>images2</span> <span>images3</span> <span>images4</span> </div> <div> <span>images1</span> <span>images2</span> <span>images3</span> <span>images4</span> </div> </div> <div class="h3span"> <h3><span>我的世界</span><span>钻石</span></h3> <h3><span>小动物</span><span>松鼠</span></h3> <h3><span>上古卷轴</span><span>雪漫城随从</span></h3> <h3><span>守望先锋</span><span>不知道是谁</span></h3> </div> </div> </div></body> </html>
css代码：
@charset "utf-8";/* css document */h1{ text-align: center; color:deepskyblue; text-shadow: 1px 1px 1px rgba(0,0,0,0.1);/*设置字体的阴影*/}/*顶部a标签动画与样式 开始*/.button{ text-align: center; height: 80px; width: 100%; display: block;}.button a{ height: 60px; width: 60px; display: inline-block;/*布局属性：内联-块， 使其成为并排显示的块级元素，让其宽高可以编辑，且宽高和内外边距可以超过父级元素*/ text-decoration: none;/*去除下划线*/ line-height: 60px; border-radius: 50%; /*设置字符的行高，通常用于自定义的某些样式，字符在顶部或底部时使用，让其上下居中*/ background-color: rgba(104,171,194,0.5); transition:background-color 0.15s linear;/*组合写法*/ /*transition-property 规定设置过渡效果的 css 属性的名称。 -duration 规定完成过渡效果需要多少秒或毫秒。 -timing-function 规定速度效果的速度曲线。 -delay 定义过渡效果开始时间。*/ color: white;}.button a:hover{ background-color: rgba(255,255,255); color:#68abc2; transition:background-color 0.15s linear;}/*顶部a标签动画与样式 开始*//*图片的样式与动画 开始*/.spanstyle{ width: 100%; height: 400px; z-index: 1; position: absolute; top: 0; background-repeat: no-repeat; background-size: 100% 100%; background-position: 0 0;}.spanstyle div{ width: 25%; height: 100%; float: left; position: relative; overflow: hidden; background-repeat: no-repeat;}.spanstyle div span{ position: absolute; width: 100%; height: 100%; top: 0px; left: -100%;/*设置元素初始位置，为动画准备*/ z-index: 2; color: rgba(255,255,255,0); background-repeat: no-repeat; background-size: 400% 100%;}/*设置图片在元素的位置*/.spanstyle div:nth-child(1) span{ background-position: 0% 0px;}.spanstyle div:nth-child(2) span{ background-position: 33.5% 0px;}.spanstyle div:nth-child(3) span{ background-position: 66.5% 0px;}.spanstyle div:nth-child(4) span{ background-position: 100% 0px;}/*父级元素下的 某个input标签和 它的类名:选中后匹配元素(单复选框专用) ~ 一个父级元素下的div里面的span元素:匹配元素(第n个) *//*定义指定的input标签点击后将匹配的元素绑定新图片*/.images input.cr-in-img-1:checked ~ .spanstyle, .spanstyle div span:nth-child(1){ background-image: url(../images/1.jpg);}.images input.cr-in-img-2:checked ~ .spanstyle,.spanstyle div span:nth-child(2){ background-image: url(../images/2.jpg);}.images input.cr-in-img-3:checked ~ .spanstyle,.spanstyle div span:nth-child(3){ background-image: url(../images/3.jpg);}.images input.cr-in-img-4:checked ~ .spanstyle,.spanstyle div span:nth-child(4){ background-image: url(../images/4.jpg);}/*定义指定的input标签点击后将绑定的新图片所在的元素插入*/.images input.cr-in-img-1:checked ~ .spanstyle div span:nth-child(1),.images input.cr-in-img-2:checked ~ .spanstyle div span:nth-child(2),.images input.cr-in-img-3:checked ~ .spanstyle div span:nth-child(3),.images input.cr-in-img-4:checked ~ .spanstyle div span:nth-child(4){ animation: none; transition: left 0.8s ease-in-out; left: 0%; z-index: 10;}/*定义指定的input标签点击后将要替换的旧图片所在的元素撤出*/.images input:checked ~ .spanstyle div span{ animation: slideout 0.8s ease-in-out;}@keyframes slideout{ 0%{ left: 0%; } 100%{ left: 100%; }}/*图片的样式与动画 结束*//*文本动画与样式 开始*/.images{ height: 400px; width: 40%; text-align: center; position: relative; margin: 2% auto 0 auto; border: 20px solid #fff; box-shadow: 1px 1px 3px rgba(0,0,0,0.1);}.images input{ display: none;}.images label{ font-style: italic; /*字体样式：倾斜*/ margin-top: 350px; text-align: center; width: 25%; height: 30px; cursor: pointer;/*光标：手*/ color: #fff; /*字体颜色*/ position: relative; float: left; line-height: 34px; font-size: 24px;/*字号，字体大小*/ z-index: 5;}.images label:before{ content:'';/*绑定文本也可以绑定文件*/ width: 34px; height: 34px; background: rgba(130,195,217,0.9); position: absolute; left: 50%; margin-left: -14px; border-radius: 50%; box-shadow: 0px 0px 0px 4px rgba(255,255,255,0.3); z-index:-1;}.images label:after{ width: 1px; height: 400px; content: ''; background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); position: absolute; bottom: -20px; right: 0px;}.h3span h3{ position: absolute; width: 100%; top: 45%; z-index: 10; text-align: center; opacity: 0; color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,0.1); transition: opacity 0.8s ease-in-out;}.h3span h3 span{ z-index: 10; position: absolute; width: 100%; left: 0px; text-align: center; opacity: 1;}.h3span h3 span:nth-child(1){ font-family: 'nsimsun'; font-size: 50px; display: block; letter-spacing: 7px;}.h3span h3 span:nth-child(2){ margin-top: 84px; letter-spacing: 0px; background: rgba(104,171,194,0.9); font-size: 14px; padding: 10px 0px; font-style: italic; transition: opacity 0.8s ease-in-out;}.images input.cr-in-img-1:checked ~ .h3span h3:nth-child(1),.images input.cr-in-img-2:checked ~ .h3span h3:nth-child(2),.images input.cr-in-img-3:checked ~ .h3span h3:nth-child(3),.images input.cr-in-img-4:checked ~ .h3span h3:nth-child(4){ opacity: 1;}/*文本的动画与样式 结束*//*页面缩小显示复选框*/@media screen and (max-width: 1200px) { .images input{ display: inline; width: 22%; margin-top: 350px; z-index: 10; position: relative; } .images label{ display: none; }}
以上就是css实现点击切换图片效果的详细内容。