Baidu Front-End Technical College 2018 notes using CSS animation to make a cool Slider

Objective

Title Address

Make a cool Slider with CSS animation

Idea Finishing

First page contains three kinds of things

• An input of type radio is actually a radio box
• The second is the label of each radio box corresponding to the
• Three is every picture you want to use as a background

Then the specific idea is that you click on each label and then appear the corresponding picture

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" ></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;}

Layout nothing to say, mainly to pay attention to a few points

• HTML set to 100% makes the entire page full screen
• The following Windows I use Flex layout
• And then all the pictures are 100% and then navigate relative to the browser.
• Label as our selection window, to input to set Display:none to hide him

And then the approximate effect is

Add a picture of the label below

label.img1 {background-image: url("001.jpg");background-size: 100% 100%;}label.img2 { }label.img3 { }label.img4 { }label.img5 { }

It's easy to add a background image to the label.

Effect

Then need the mouse to put up the effect, very simple

label:hover{filter: brightness(1);}

Add animation

began to focus on the first write keyframes, this according to the Excel table to write on it, the space is too large, I only show a

@keyframes img1 {from {left: -500px;}to {left: 0;}}@keyframes img2 { }@keyframes img3 { }@keyframes img4 { }@keyframes img5 { }

And then add checked effect, that is, after the selection of the resulting animation

.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 comes out.

You think it's a success?

You'll have a basic implementation when you're done, but when you play you'll find a bug that clicks on a new label and then the background becomes the last one immediately and then the new picture is shown on the basis of this picture. The picture before the truth should be retained and then a new image appears. So we have to add

.view:not(:checked) ~ .image img{animation: oncheck 1s linear;}@keyframes oncheck {0% {opacity: 1;z-index: 3;}100% {opacity: 1;z-index: 3;}}

Presumably it should be that all the unchecked box Z-index are set to 3 for 1 seconds, but I don't understand why?

Summarize

At the beginning of the first self-writing is to use the Div, and then Div did not click this effect only hover, so it made a very rough.
Then handed over the homework to see a lot of students are using JS to achieve, the sense of JS implementation is relatively simple, and then generally can be written out.
Then saw a lot of homework and found a big guy using the characteristics of a single box to write, opened my new world, and then I refer to the big guy's finished the homework.
Attach My Code address
Code
Attach the address of my effect
Effect

Baidu Front-End Technical College 2018 notes using CSS animation to make a cool Slider