foreword
topic address
Make a cool Slider with CSS animation
idea arrangement
The first page contains three things
- One is that the input whose type is radio is actually a radio button
- The second is the label corresponding to each radio button
- Three is each image you want to use as a background
Then the specific implementation idea is that you click on each label and the corresponding picture will appear
basic layout
The first is to lay out the interface
<div class="page">
<div class="slider">
<input id="img1" name="img" type="radio" class="view" checked>
<input id="img2" name="img" type="radio" class="view">
<input id="img3" name="img" type="radio" class="view">
<input id="img4" name="img" type="radio" class="view">
<input id="img5" name="img" type="radio" class="view">
<label for="img1" class="img1"></label>
<label for="img2" class="img2"></label>
<label for="img3" class="img3"></label>
<label for="img4" class="img4"></label>
<label for="img5" class="img5"></label>
<div class="image">
<img src="001.jpg">
<img src="002.jpg">
<img src="003.jpg">
<img src="004.jpg">
<img src="005.jpg">
</div>
</div>
</div>* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
width: 100%;
overflow: hidden;
}
.page {
height: 100%;
width: 100%;
background-color: yellow;
}
.slider {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: flex-end;
}
.image img {
height: 100%;
width: 100%;
position: fixed;
left:0;
top: 0;
}
label {
width: 15%;
height: 130px;
background-color: red;
margin-bottom: 50px;
margin-left: 10px;
margin-right: 10px;
filter: brightness(0.8);
cursor: pointer;
z-index: 10;
}
/*去除单选框*/
.view{
display: none;
}The layout has nothing to say, mainly pay attention to a few points
- html is set to 100% to make the entire page full screen
- The following windows I use flex layout
- Then all images are 100% and position relative to the browser
- label as our selection window, set display:none for input to hide it
Then the approximate effect is
Add the image of the label below
label.img1 {
background-image: url("001.jpg");
background-size: 100% 100%;
}
label.img2 { }
label.img3 { }
label.img4 { }
label.img5 { }It is very simple to add it as a background image to the label
Effect Then you need to put the mouse on the effect, very simple
label:hover{
filter: brightness(1);
}add animation
Let’s focus on writing keyframes first. This can be written according to the excel sheet. The space is too large. I will only show one.
@keyframes img1 {
from {
left: -500px;
}
to {
left: 0;
}
}
@keyframes img2 { }
@keyframes img3 { }
@keyframes img4 { }
@keyframes img5 { }Then add the checked effect, that is, after the selection, the animation will be generated
.view:nth-child(1):checked ~ .image img:nth-child(1) {
animation: img1 .5s ease-out;
display:block;
opacity: 1;
z-index: 4;
}
.view:nth-child(2):checked ~ .image img:nth-child(2) { }
.view:nth-child(3):checked ~ .image img:nth-child(3) { }
.view:nth-child(4):checked ~ .image img:nth-child(4) { }
.view:nth-child(5):checked ~ .image img:nth-child(5) { }Just click on this to find his brother node image and then his corresponding number of child elements to add animation
and then the approximate effect will come out
Do you think this will be successful?
After completing the above, you have a basic implementation, but when you play, you will find a bug. Click a new label and the background will immediately become the last image and then a new image will appear based on this image. picture. It stands to reason that the previous picture should be kept and a new picture should appear. So add
.view:not(:checked) ~ .image img{
animation: oncheck 1s linear;
}
@keyframes oncheck {
0% {
opacity: 1;
z-index: 3;
}
100% {
opacity: 1;
z-index: 3;
}
}It probably means that the z-index of all unselected radio boxes should be set to 3 for 1 second, but I don't understand why here?
Summarize
When I wrote it myself at the beginning, I used a div, and then the div did not click on the effect, only hover, so I made a very rough one.
Then after handing in the homework, I saw that many students used js to implement it. I felt that the implementation of js was relatively simple, and then they could generally be written.
Then after reading a lot of homework, I found that a big guy used the feature of the radio button to write, which opened up my new world, and then I completed the homework with reference to the big guy.
Attach my code address
code
Attach my effect address
effect