(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)给大家展示一下样图吧