Comment: When it comes to slider, in the past, css+js has been used to achieve related switching effects. I have heard that everyone has been discussing the implementation method of using html5+css3, but I have never implemented it myself. OK, I have time to play CSS3 this time. Interested friends can learn more
Well, last time I said I would add a few articles quickly, but I calmly broke the appointment. It's only been published in another month, which is really depressing. I found that I have always been unable to find time recently, and basically arranged one project after another. I either couldn’t find the right topic when I was free, or I couldn’t find time when I was confused. So I decided to summarize the knowledge points of the problems I have been struggling with for a period of time, and study them one by one when I am free, and then organize them into articles and share them.Starting from the topic, when you mention slider, you have always used css+js to achieve related switching effects. I have heard that everyone has been discussing the implementation method of using html5+css3, but I have never implemented it myself. OK, I have time to play css3 this time. In fact, I was also attracted by a message on Weibo. Seeing that the results achieved by others were very good, I had the urge to do it.
1. Reproduction diagram
It looks not much different from the effect achieved with JS in the past, but the overall feeling is very elegant. Well, the power of css3 is that I have written very little code to achieve more complex results. However, this example also has something not perfect. When switching between two pictures, if there are pictures in the middle, you will still see it during the execution of the css3 animation, which is less powerful. But think about it, this is the effect achieved by pure CSS3. The complex html structure changes implemented using JS cannot be seen here, so the above effect is difficult to simply implement with CSS3.
2. HTML structure
<div>
<input checked type="radio">
<input type="radio">
<input type="radio">
<input type="radio">
<input type="radio">
<div>
<div>
<div>
<article>
<div>
<h1>Title1</h1>
<a href="#">Description1</a>
</div>
<img src="img/pic1.png"/>
</article>
<article>
<div>
<h1>Title2</h1>
<a href="#">Description2</a>
</div>
<img src="img/pic2.png"/>
</article>
<article>
<div>
<h1>Title3</h1>
<a href="#">Description3</a>
</div>
<img src="img/pic3.png"/>
</article>
<article>
<div>
<h1>Title4</h1>
<a href="#">Description4</a>
</div>
<img src="img/pic4.png"/>
</article>
<article>
<div>
<h1>Title5</h1>
<a href="#">Description5</a>
</div>
<img src="img/pic5.png"/>
</article>
</div>
</div>
</div>
<div>
<label for="slider1"></label>
<label for="slider2"></label>
<label for="slider3"></label>
<label for="slider4"></label>
<label for="slider5"></label>
</div>
<div>
<label for="slider1"></label>
<label for="slider2"></label>
<label for="slider3"></label>
<label for="slider4"></label>
<label for="slider5"></label>
</div>
</div>
The above code is the main html structure, which contains an input radio group, which you can see here as a hub, and it plays a very critical role in this example (this is why I don't want to hide it in the example, the real hero should not be the hero behind the scenes).
The sliders below contain images that need to be displayed. Here it seems to be the effect of a sliding door, which displays different images by controlling the inner margin-left.
Controls is the switching arrow on the left and right sides of the picture. Don’t worry, why do you need to design 5? It only seems that two are enough. Please remind us that in this example, we will never use js to achieve switching.
The last active is the click button below the picture. You can directly select the picture you want to browse by clicking it. You can also enrich the structure inside to design a thumbnail effect.
3. CSS style sheet
@charset utf-8;
/* common */
body{background: #ddd;overflow-x: hidden;}
#bd{width: 960px;margin: 100px auto;max-width: 960px;}
/* module: sliders */
#sliders{
border-radius: 5px;
box-shadow: 1px 1px 4px #666;
padding: 1%;
background: #ffff;
}
#overflow{
width: 100%;
overflow: hidden;
}
#sliders .inner{
width: 500%;
transiton: all 1s linear;
-webkit-transition: all 1s linear;
}
#sliders article{
float: left;
width: 20%;
}
#sliders article .info{
position: absolute;
opacity: 0;
padding: 30px;
color: #666;
font-family: Arial;
transition: opacity 0.1s ease-out;
-webkit-transform: translateZ(0);
-webkit-transition: opacity 0.1s ease-out;
}
#sliders article .info h1{
font-size: 22px;
font-weight: bold;
margin: 0 0 5px;
}
#sliders article .info a{
color: #666;
text-decoration: none;
}
/* module: controls */
#controls{
height: 50px;
width: 100%;
margin-top: -25%;
}
#controls label{
display: none;
width: 50px;
height: 50px;
opacity: 0.3;
cursor: pointer;
}
#controls label:hover{
opacity: 1;
}
/* module: active */
#active{
width: 100%;
margin-top: 23%;
text-align: center;
}
#active label{
display: inline-block;
width: 10px;
height: 10px;
border-radius: 5px;
background: #bbb;
border-color: #777;
}
#active label:hover{
background: #ccc;
}
/* input checked change style */
#slider1:checked ~ #active label:nth-child(1),
#slider2:checked ~ #active label:nth-child(2),
#slider3:checked ~ #active label:nth-child(3),
#slider4:checked ~ #active label:nth-child(4),
#slider5:checked ~ #active label:nth-child(5){
background: #333;
}
#slider1:checked ~ #controls label:nth-child(5),
#slider2:checked ~ #controls label:nth-child(1),
#slider3:checked ~ #controls label:nth-child(2),
#slider4:checked ~ #controls label:nth-child(3),
#slider5:checked ~ #controls label:nth-child(4){
display: block;
float: left;
background: url(../img/prev.png) no-repeat;
margin-left: -70px;
}
#slider1:checked ~ #controls label:nth-child(2),
#slider2:checked ~ #controls label:nth-child(3),
#slider3:checked ~ #controls label:nth-child(4),
#slider4:checked ~ #controls label:nth-child(5),
#slider5:checked ~ #controls label:nth-child(1){
display: block;
float: right;
background: url(../img/next.png) no-repeat;
margin-right: -70px;
}
#slider1:checked ~ #sliders article:nth-child(1) .info,
#slider2:checked ~ #sliders article:nth-child(2) .info,
#slider3:checked ~ #sliders article:nth-child(3) .info,
#slider4:checked ~ #sliders article:nth-child(4) .info,
#slider5:checked ~ #sliders article:nth-child(5) .info{
opacity: 1;
transition: all 0.6s ease-out 1s;
-webkit-transition: all 0.6s ease-out 1s;
}
#slider1:checked ~ #sliders .inner{
margin-left: 0;
}
#slider2:checked ~ #sliders .inner{
margin-left: -100%;
}
#slider3:checked ~ #sliders .inner{
margin-left: -200%;
}
#slider4:checked ~ #sliders .inner{
margin-left: -300%;
}
#slider5:checked ~ #sliders .inner{
margin-left: -400%;
}
OK, I admit that the above css code is really more complicated and complicated, but it really achieves a very dazzling effect, and when I finished writing it, I was also impressed by the huge magic of css3. . .
The code in the first half of this is mainly used to design the structure of the slider, including some rounded corners and shadow beautification designs. The second half mainly contains some animation effects to realize some dynamic effects when switching pictures or control buttons. However, the most important thing is the use of the bottom css3 selector, which truly realizes the function of image switching. I really think selectors play a very, very important role in the examples, because this is what I have ignored in learning css3 in the past. I always think that what is powerful about css3 is rounded corners, shadows, deformations, and animations, but this code really tells us how important the selector is in css3. In some complex logic, using these css3 selectors can achieve unimaginable effects.
4. The principle of slider implementation
When I first finished reading the above code, you must be the same as I did at the beginning. I don’t believe that such code can achieve the effect of slider.
OK, let me analyze the implementation principle.
As I said above, the top radio group is very important and is the hub of slider implementation. Yes, it really is.
To implement a slider, there are only two types of switching, that is, when clicking the control button, the picture is switched; at the same time, when switching the picture, ensure that all control buttons are displayed correctly.
In this example, we use label as the control button, the article contains the picture, and the inner as the container of the picture.
Just thinking about it simply, label and article cannot be connected, and label status information is difficult to reflect the article's choice. Unless there is something that can record the switching state of the label, and then select the pictures in the corresponding order to display it through some means.
Well, now you understand why that radio group is the key to implementing slider. Yes, it appears to record the click status of the label.
We use the label's for attribute to correspond to the corresponding radio. When the label is clicked, the corresponding radio becomes checked. Then move the inner to the left through the powerful css3 selector to display the corresponding picture. Of course, the corresponding left and right selection buttons are also displayed through the selector. By the same token, when the left and right buttons are clicked, the status of the 5 selection buttons below is also realized in this way.
The above implementation principle is relatively simple. In fact, as long as you can record the click status of the control button, you can achieve the slider effect through the selector.
Not only radio groups can do it, a:hover can also implement image switching when a hover according to this idea. Of course, there are many other implementation methods, as long as you understand the principle of implementation.
5. Summary
In fact, css3 is really fun, with many effects. In css3, there are only unexpected results, but not impossible. Sometimes I really find that writing CSS3 requires a little cleverness, and sometimes some exquisite implementation methods are really praiseworthy.
Well, as a small practice, this example has gained a lot, especially the powerful selector, which makes me ashamed that I have ignored it in the past. . .
I also need to consider the issue of discontinuous image switching. It seems that I have to use a little js to assist.
OK, let’s share it if there is a result.