Effects (source code at the end) :
Implementation (can be implemented step by step) :
1. Define the basic global style as usual, just copy it:
* {margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(164.202.224);
}
Copy the code2. Define the tag:
<! -- Bottom box -->
<div class="main">
<! -- Three radio buttons, select the first one by default -->
<input type="radio" name="choose" id="choose1" checked>
<input type="radio" name="choose" id="choose2">
<input type="radio" name="choose" id="choose3">
<! Put three images, represented by a background image, all for two selectors -->
<div class="item item1"></div>
<div class="item item2"></div>
<div class="item item3"></div>
<! -- Three labels -->
<span class="select">
<label for="choose1"></label>
<label for="choose2"></label>
<label for="choose3"></label>
</span>
</div>
Copy the codeThe label element does not present any special effects to the user. However, it improves usability for mouse users. This control is triggered if you click on text within the Label element. That is, when the user selects the label, the browser automatically shifts focus to the form control associated with the label.
The: Checked CSS pseudo-class selector represents the option HTML element (“option”) in any radio(), checkbox (), or (“select”) element that is in the selected state.
In general, we can use the label feature later. Clicking on a label means that a radio button is selected, and then we can use the: Checked selector to change the CSS style of the element associated with the button. Read on for details.
3. Basic style of bottom box:
.main{
position: relative;
width: 400px;
height: 250px;
overflow: hidden;
border-radius: 5px;
}
Copy the codeposition: relative; Relative positioning. overflow: hidden; Overflow hiding. border-radius: 5px; Angle radian.
3. Image of the same style, item selector:
.item{
position: absolute;
top: 0;
width: 100%;
height: 100%;
transition: all 0.5 s;
background-size: cover;
}
Copy the codeposition: absolute; 1. Transition: all 0.5s; I’ll give you a transition effect. It’ll look good when you slice it. background-size: cover; Expand the background image to a large enough size to completely cover the background area.
4. Each image has its own style, that is, offset the corresponding distance first:
.item1{
background-image: url(./img/1.jpg);
}
.item2{
background-image: url(./img/4.jpg);
left: 100%;
}
.item3{
background-image: url(./img/11.jpg);
left: 200%;
}
Copy the codebackground-image: url(./img/1.jpg); Background image. left: 100%; The horizontal distance of an absolute position.
5. Make the radio buttons appear first:
input{
position: relative;
z-index: 100;
display: none;
}
Copy the codeThe z-index property sets the stack order of elements. Elements with a higher stack order will always precede elements with a lower stack order. display: none; Hidden, this step first do not write this sentence, because hidden is not easy to observe, at the end of the writing to add this sentence.
6. The bottom box style of the label:
.select{
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 10px;
z-index: 1;
display: flex;
justify-content: space-between;
align-items: center;
}
Copy the codeleft: 50%; transform: translateX(-50%); First X-axis positioning goes 50% and then offset itself 50%, to achieve left and right center. display: flex; justify-content: space-between; align-items: center; Flex layout allows child elements to be aligned with edges and then dynamically bisect the remaining space.
7. Label:
.select>label{
width: 10px;
height: 10px;
background-color: rgb(255.255.255);
border-radius: 50%;
cursor: pointer;
border: 1.5 px. solid white;
}
Copy the codecursor: pointer; Mouse style for small hands. Border: 1.5 px solid white; White border.
8. Change the color black after clicking the label:
.main input:nth-of-type(1):checked ~ .select label:nth-of-type(1) {background-color: rgb(26.26.26);
}
.main input:nth-of-type(2):checked ~ .select label:nth-of-type(2) {background-color: rgb(26.26.26);
}
.main input:nth-of-type(3):checked ~ .select label:nth-of-type(3) {background-color: rgb(26.26.26);
}
Copy the codeFirst of all, the tilde can select all elements in the same layer as it, no matter where it is. .main input:nth-of-type(1):checked indicates the first selected radio button ~ select the following one of the same layer Background-color: RGB (26, 26, 26); Set the background color of the label child element to black. That’s basically the process above. And then the other two buttons do the same.
9. Implement cutting graph:
.main input:nth-of-type(1):checked ~ .item{
transform: translateX(0);
}
.main input:nth-of-type(2):checked ~ .item{
transform: translateX(-100%);
}
.main input:nth-of-type(3):checked ~ .item{
transform: translateX(-200%);
}
Copy the code.main input:nth-of-type(1): Checked indicates the first selected radio radio button ~. Item. Select all subsequent. Items of the same level and offset them relative to the x axis.
Complete code:
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Aurora Borealis night.</title>
<style>* {margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(164.202.224);
}
.main{
position: relative;
width: 400px;
height: 250px;
overflow: hidden;
border-radius: 5px;
}
.item{
position: absolute;
top: 0;
width: 100%;
height: 100%;
transition: all 0.5 s;
background-size: cover;
}
.item1{
background-image: url(./img/1.jpg);
}
.item2{
background-image: url(./img/4.jpg);
left: 100%;
}
.item3{
background-image: url(./img/11.jpg);
left: 200%;
}
input{
position: relative;
z-index: 100;
/* display: none; * /
}
.select{
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 10px;
z-index: 1;
display: flex;
justify-content: space-between;
align-items: center;
}
.select>label{
width: 10px;
height: 10px;
background-color: rgb(255.255.255);
border-radius: 50%;
cursor: pointer;
border: 1.5 px. solid white;
}
.main input:nth-of-type(1):checked ~ .select label:nth-of-type(1) {background-color: rgb(26.26.26);
}
.main input:nth-of-type(2):checked ~ .select label:nth-of-type(2) {background-color: rgb(26.26.26);
}
.main input:nth-of-type(3):checked ~ .select label:nth-of-type(3) {background-color: rgb(26.26.26);
}
.main input:nth-of-type(1):checked ~ .item{
transform: translateX(0);
}
.main input:nth-of-type(2):checked ~ .item{
transform: translateX(-100%);
}
.main input:nth-of-type(3):checked ~ .item{
transform: translateX(-200%);
}
</style>
</head>
<body>
<! -- Bottom box -->
<div class="main">
<! -- Three radio buttons, select the first one by default -->
<input type="radio" name="choose" id="choose1" checked>
<input type="radio" name="choose" id="choose2">
<input type="radio" name="choose" id="choose3">
<! Put three pictures in the background -->
<div class="item item1"></div>
<div class="item item2"></div>
<div class="item item3"></div>
<! -- Three labels -->
<span class="select">
<label for="choose1"></label>
<label for="choose2"></label>
<label for="choose3"></label>
</span>
</div>
</body>
</html>
Copy the codeConclusion:
Other articles: Surround reflection loading effects HTML + CSS Bubble floating background effects HTML + CSS Simple clock effects HTML + CSS + JS Cyberpunk style button HTML + CSS imitation oF netease Cloud official website rotation diagram HTML + CSS + JS water wave loading animation HTML + CSS Navigation bar Scrolling Gradient effect HTML + CSS + JS Book page turning HTML + CSS 3D stereo album HTML + CSS Neon painting board effect HTML + CSS + JS Remember some CSS properties summary (a) Sass Summary note…… Wait to go to my homepage to see more CSS effects, JS effects ~