（1）现在每个网页上都有轮播图，那么该怎么去制作呢？
（2）给大家推荐一个轮播图的网站
swiper------------->Swiper中文网-轮播图幻灯片js插件,H5页面前端开发
(3)那么我们怎么利用css去制作轮播图呢？
（4）分析一下吧
（1）给大家一个小提示，label标签中的for属性 和 input的id属性是可以绑定的哟（2）那么怎么将其联系到一起呢？------这要用到checked属性（3）因为他是左右的移动，我们可以利用css3的新特性-----transform：translateX()
（5）分享一下代码吧
<div class="box2"><div class="main"><input type="radio" name="button" id="but1" checked="checked" /><label for="but1" style="--i:1"></label><div class="image"><img src="img/1.png"><div class="title"><h1>龙</h1><p>龙能大能小，能升能隐：大则兴云吐雾，小则隐介藏形；升则飞腾于宇宙之间，隐则潜伏于波涛之内。方今春深，龙乘时变化，犹人得志而纵横四海，龙之为物，可比世之英雄”“夫英雄者，胸怀大志，腹有良谋，有包藏宇宙之机，吞吐天地之志者也。”</p></div></div></div><div class="main"><input type="radio" name="button" id="but2" checked="checked" /><label for="but2" style="--i:2"></label><div class="image"><img src="img/2.png"><div class="title"><h1>马</h1><p>马，这豪迈而剽悍的动物，它象征着威武，无畏的精神，但它却被人类所征服，默默付出，当主人需要它的时候，它慷慨以赴，为主人的成功兴奋鼓舞，却不问回报，当主人不满时，它便窥伺人的表情，它一切的行动都为主人的意愿。</p></div></div></div><div class="main"><input type="radio" name="button" id="but3" checked="checked" /><label for="but3" style="--i:3"></label><div class="image"><img src="img/3.png"><div class="title"><h1>狮</h1><p>谁，唤我之心，掩我一生凌轹。谁，弃我而去，留我一世独殇；谁，可明我意，使我此生无憾；谁，可助我臂，纵横万载无双；谁，可倾我心，寸土恰似虚弥； 谁，可葬吾怆，笑天地虚妄，吾心狂。伊，覆我之唇，祛我前世流离； 伊，揽我之怀，除我前世轻浮。执子之手，陪你痴狂千生；深吻子眸，伴你万世轮回。</p></div></div></div><div class="main"><input type="radio" name="button" id="but4" checked="checked" /><label for="but4" style="--i:4"></label><div class="image"><img src="img/4.png"><div class="title"><h1>鹤</h1><p>我命由我不由天，天欲灭我我灭天。天若有情天亦老，人若有情死得早！累么？累就对了，舒服是留给死人的。当某人装酷时，姐都会低下头，不是姐害羞，姐是在找砖头！宁可牺牲中国最后一个处男，决不留下日本任何一个处nv！老鼠扛刀，满街找猫。你今天流的汗和泪，都是你当初脑子进了水……</p></div></div></div><div class="main"><input type="radio" name="button" id="but5" checked="checked" /><label for="but5" style="--i:5"></label><div class="image"><img src="img/5.png"><div class="title"><h1>狼</h1><p>一个狼群就是一支训练有素，纪律严明的部队，统一行动，绝对服从，协同作战，这就是狼的纪律。一只狼可以捕获一只羊，一百只狼却可以屠杀一万只羊。双拳难敌四手，恶虎敌不过群狼。狼的咆哮不会因为狗的吠叫而销声匿迹。野心勃勃才是狼的本色。只有狗才逆来顺受，才安于现状。能温暖一匹独狼的，不是狼群，而是另一匹独狼。狼，是我们的榜样，狼的生存之道就是一个字，够狠，所以永远记住站在你面前的比你狠，要想超越，那你就要比他更狠。</p></div></div></div><div class="main"><input type="radio" name="button" id="but6" checked="checked" /><label for="but6" style="--i:6"></label><div class="image"><img src="img/6.png"><div class="title"><h1>凤</h1><p>火焰渐渐褪去,露出了一个巨大的身影， 一只火红色地大鸟翱翔于半空之中。炫丽的火红色尾羽,完美的体态,无不彰显着他鸟中之王地威仪。晶莹中带着一些红色的血丝一般腾起，冲天而起的凤凰火焰眨眼间已经密布于天空之中。庞大的火焰冲天而起，嘹亮的凤鸣声也随之爆发开来。炫丽的凤凰火焰划破夜空，几乎照亮了整座海神山，伴随着升腾，火焰渐渐褪去，露出了一个巨大的身影。一只火红色地大鸟翱翔于半空之中。炫丽的火红色尾羽，完美的体态，无不彰显着他鸟中之王地威仪。</p></div></div></div><div class="main"><input type="radio" name="button" id="but7" checked="checked" /><label for="but7" style="--i:7"></label><div class="image"><img src="img/7.png"><div class="title"><h1>鹿</h1><p>不是路不平，而是你不行。幸福对我说，你还太小。别逼我，否则我伟大起来，一发不可收拾。孤独的人常表现得很坚强;寂寞的人则多半温和。从天堂到地狱，我只是路过人间。真心离伤心最近。大笑是绽放的微笑。旅行就是从自己呆腻的地方到别人呆腻的地方去。天生落魄，五行缺钱。老子仰着头，那是落枕了。女人，活的自在一些，要让别人瞧得起。没有你的日子里太阳依旧升起人又不聪明，还学别人秃顶。我以神的姿态,闪耀在这美的瞬间</p></div></div></div></div>
*{margin: 0;padding: 0;}body{width: 100vw;height: 100vh;font-size: 0.15rem;background-color: rgb(44,62,80);}.box2{position: relative;width: 1230px;height: 670px;margin: 20px auto;overflow: hidden;box-shadow: 10px 10px 99px 6px rgba(1,2,3,1);}.box2::after{content: '';position: absolute;width: 100%;height: 1px;background-color: rgba(255,255,255,.5);bottom: 50px;z-index: 11;}.box .main{position: absolute;top: 0;left: 0;width: 1230px;height: 670px;}label{position: absolute;width: 30px;height: 30px;background-color: rgba(255,255,255,.3);cursor: pointer;bottom: 35px;border-radius: 50%;left: calc((var(--i) - 1) * 120px + 210px);transition: all 1s;z-index: 12;}label:hover{background-color: rgba(255,255,255,.7);}input[type=radio] {transform : translateY(-900px);opacity: 0;}input[type=radio]:checked+label{background-color: #fff;box-shadow: 0 0 0 6px rgba(255, 255, 255, .5);}.image{position: absolute;top: 0;left: 0;width: 1230px;height: 670px;}.image img{position : absolute;transform : translateX(1230px);transition: all .5s;}input[type=radio]:checked~.image img {transform: translateX(0px);z-index : 9;}.image .title{position: relative;width: 300px;height: 670px;background-color: rgba(255,254,253,.1);z-index: 10;float: right;left: 0;transform: translateX(300px);transition: all .5s;}@font-face {font-family:wocao;src: url(font/1234.ttf);}.image .title h1{text-align: center;width: 300px;height: 60px;margin: 20px 0 20px 0;color: rgb(201,197,195);font-family:wocao;font-size: 50px;}.image .title p{text-indent: 2em;font-size: 20px;color: rgb(201,197,195);font-weight: 300;font-family:wocao;}input[type=radio]:checked~.image .title{transform: translateX(0px);}
（6）图片的话：大家可以自己去找一下
（7）推荐一个图片的网站----站酷 (ZCOOL) - 设计师互动平台 - 打开站酷，发现更好的设计！
（8）给大家展示一下样图吧
