效果展示
完整代码
HTML
<!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>Document</title>
</head>
<style>
/* @import url('./index.css'); */
@import url('./index_mine.css');
</style>
<body>
<div class="container">
<div class="components">
<div class="switch">
<div class="switch__1">
<input id="switch-1" type="checkbox">
<label for="switch-1"></label>
</div>
<div class="switch__2">
<input id="switch-2" type="checkbox" checked>
<label for="switch-2"></label>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
:root {
--primary-light: #8abdff;
--primary: #6d5dfc;
--primary-dark: #5b0eeb;
--white: #FFFFFF;
--greyLight-1: #E4EBF5;
--greyLight-2: #c8d0e7;
--greyLight-3: #bec8e4;
--greyDark: #9baacf;
--shadow: .3rem .3rem .6rem var(--greyLight-2),
-.2rem -.2rem .5rem var(--white);
}
*,
*::before,
*::after {
padding: 0;
margin: 0;
box-sizing: inherit;
}
html {
box-sizing: border-box;
background-color: var(--greyLight-1);
overflow-y: scroll;
font-size: 62.5%;
}
.container {
min-height: 100vh;
background-color: var(--greyLight-1);
display: flex;
justify-content: center;
align-items: center;
}
.components {
width: 75rem;
height: 40rem;
border-radius: 3rem;
box-shadow: .8rem .8rem 1.4rem var(--greyLight-2),
-.2rem -.2rem 1.8rem var(--white);
}
.switch {
display: grid;
grid-template-columns: repeat(2, min-content);
grid-gap: 3rem;
justify-self: center;
}
.switch input {
display: none;
}
.switch__1,
.switch__2 {
width: 6rem;
}
.switch__1 label,
.switch__2 label {
display: flex;
align-items: center;
width: 100%;
height: 3rem;
border-radius: 1.6rem;
position: relative;
background: rgba(255, 255, 255, 0);
box-shadow: var(--shadow);
cursor:pointer;
}
.switch__1 label::after,
.switch__2 label::after{
content: '';
position: absolute;
left: .4rem;
width: 2.1rem;
height: 2.1rem;
background-color: var(--greyDark);
border-radius: 50%;
transition: all .4s ease;
}
.switch__1 label::before,
.switch__2 label::before{
content: '';
border-radius: inherit;
width: 100%;
height: 100%;
background: linear-gradient(330deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-light) 100%);
opacity: 0;
transition: all .4s ease;
}
.switch input:checked~label::before{
opacity: 1;
}
.switch input:checked~label::after{
left: 54%;
background-color: var(--greyLight-1);
}
大功告成!