Table of contents
4. Implementation steps and code
1. Operation effect
Picture effects
2. Project Overview
This project is a web page that demonstrates the effect of a 3D glowing toggle button. The button consists of a switch and an indicator light, and the button's state can be switched by clicking the button. When the button's status changes, the indicator light will animate, showing a 3D glowing effect. This project uses HTML and CSS to style and animate buttons.
3. Development environment
Development environment: VsCode
Programming language: HTML5+CSS3
Operating system: Windows
4. Implementation steps and code
1. Create an empty folder
<!DOCTYPE html>
<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>公众号《编程乐学》- 3D发光切换按钮效果</title>
</head>
<body>
</body>
</html>
2. Complete the page content
<div class="switch">
<input type="checkbox" name="toggle">
<label for="toggle"><i></i></label>
<span></span>
</div>3. Complete the css style
This code is an HTML and CSS code snippet for a firefly animation effect. It uses CSS for animation effects and responsive design. The code contains style definitions for the firefly's body, eyes, antennae, and wings. By using pseudo-classes and animation effects, animation effects such as the flashing of the firefly's body and the rotation of its wings are realized. The whole animation effect is very vivid and interesting.
In the code, flex layout is used to vertically center the element, and the background gradient and font style are set. Pseudo classes and absolute positioning are used to define the styles of various parts of the firefly, such as the head, eyes, antennae, thorax, and abdomen. Use transition effects and animation effects to achieve the flickering of fireflies and animated wings.
<style>
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #202838;
}
.switch input {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.switch {
width: 180px;
height: 55px;
position: relative;
margin: 100px auto;
}
.switch label {
display: block;
width: 80%;
height: 100%;
position: relative;
background: #1F2736;
/*#121823*/
background: linear-gradient(#121823, #161d2b);
border-radius: 30px 30px 30px 30px;
box-shadow:
inset 0 3px 8px 1px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(0, 0, 0, 0.5),
0 1px 0 rgba(255, 255, 255, 0.2);
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.switch input~label i {
display: block;
height: 51px;
width: 51px;
position: absolute;
left: 2px;
top: 2px;
z-index: 2;
border-radius: inherit;
background: #283446;
/* Fallback */
background: linear-gradient(#36455b, #283446);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.2),
0 0 8px rgba(0, 0, 0, 0.3),
0 12px 12px rgba(0, 0, 0, 0.4);
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.switch label+span {
content: "";
display: inline-block;
position: absolute;
right: 0px;
top: 17px;
width: 18px;
height: 18px;
border-radius: 10px;
background: #283446;
background: gradient-gradient(#36455b, #283446);
}
/* Toggle */
.switch input:checked~label+span {
content: "";
display: inline-block;
position: absolute;
width: 18px;
height: 18px;
border-radius: 10px;
-webkit-transition: all .5s ease;
transition: all .5s ease;
z-index: 2;
background: #b9f3fe;
background: gradient-gradient(#ffffff, #77a1b9);
}
.switch input:checked~label i {
left: auto;
left: 63%;
}
</style>5. Project Summary
This project implements a beautiful 3D glowing toggle button effect using HTML and CSS. By clicking the button, the button's state can be switched, accompanied by the animation effect of the indicator light. The overall design style is simple and elegant, and the color matching and transition effects are excellent, giving users a good visual experience.
During the implementation process, CSS features such as gradient background, shadow, and transition effects are mainly used to achieve the button style and animation effects. Through reasonable layout and positioning, each element of the button can correctly display and respond to the user's click event.
This project demonstrates some advanced features and techniques of HTML and CSS. It is a good practice project for those who want to learn and master front-end development. By referring to and understanding the code of this project, you can learn how to use CSS to achieve dynamic effects and interactive functions, and how to optimize the user experience.
6. Source code acquisition
✨You can also follow Gong Zonghao's "Programming Learning". There are many high-quality open source projects and more programming materials in the menu bar Waiting for you to learn.