网红前端按钮

2023-07-30 17:46:01 浏览数 (2)

效果图： 太阳：

月亮：

代码链接：https://leafbackaut.cn/file/按钮.zip

原理：

  1. 单击按钮触发js事件，切换css样式表
  2. 背景垂直平移
  3. 太阳/月亮水平平移

代码：

html代码

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="button.css">
    <link rel="stylesheet" href="dark.css" id="theme" class="dark">
    <script type="text/javascript" src="button.js"></script>
    <title>Button</title>
</head>
<body>
    <div id="box">
        <div id="background">
            <div id="dark">
                <div class="dc"></div>
                <div class="dc"></div>
                <div class="dc"></div>
                <div class="dc"></div>
                <div class="dc"></div>
                <div class="dc"></div>
                <div class="dc"></div>
                <div class="dc"></div>
            </div>
            <div id="light">
                <div class="lc"></div>
                <div class="lc"></div>
                <div class="lc"></div>
                <div class="lc"></div>
                <div class="lc"></div>
                <div class="lc"></div>
                <div class="lc"></div>
                <div class="lc"></div>
                <div class="lc"></div>
                <div class="lc"></div>
                <div class="lc"></div>
                <div class="lc"></div>
            </div>
        </div>
        <div id="o1">
            <div id="o2">
                <div id="o3">
                    <div id="o" onclick="change()">
                        <div class="gra"></div>
                        <div class="gra"></div>
                        <div class="gra"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="box_shadow" onclick="change()"></div>
</body>
</html>

button.css

代码语言：javascript复制
body{
    transition: 0.4s ease-in-out;
}
#box{
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
    width: 500px;
    height: 200px;
    border-radius: 100px;
    overflow: hidden;
}
#background{
    width: 500px;
    height: 400px;
    position: absolute;
    transition: 0.4s ease-in-out;
    overflow: hidden;
}
#dark{
    width: 100%;
    height: 50%;
    left: 0;
    top: 0;
    position: absolute;
    background-color: rgb(40, 50, 60);
}
.dc{
    background-color: white;
    border-radius: 50%;
    position: absolute;
}
.dc:nth-of-type(1){
    width: 15px;
    height: 15px;
    top: 30px;
    left: 250px;
}
.dc:nth-of-type(2){
    width: 30px;
    height: 30px;
    left: 260px;
    top: 150px;
}
.dc:nth-of-type(3){
    width: 10px;
    height: 10px;
    left: 240px;
    top: 100px;
}
.dc:nth-of-type(4){
    width: 25px;
    height: 25px;
    left: 160px;
    top: 40px;
}
.dc:nth-of-type(5){
    width: 5px;
    height: 5px;
    left: 60px;
    top: 40px;
}
.dc:nth-of-type(6){
    width: 5px;
    height: 5px;
    left: 80px;
    top: 50px;
}
.dc:nth-of-type(7){
    width: 15px;
    height: 15px;
    left: 130px;
    top: 120px;
}
.dc:nth-of-type(8){
    width: 10px;
    height: 10px;
    left: 80px;
    top: 160px;
}
#light{
    width: 100%;
    height: 50%;
    left: 0;
    bottom: 0;
    position: absolute;
    background-color: rgb(90, 128, 177);
}
.lc{
    background: white;
    position: absolute;
}
.lc:nth-of-type(12){
    width: 170px;
    height: 170px;
    left: 20px;
    bottom: -100px;
    border-radius: 50%;
}
.lc:nth-of-type(11){
    width: 160px;
    height: 160px;
    left: 150px;
    bottom: -100px;
    border-radius: 50%;
}
.lc:nth-of-type(10){
    width: 160px;
    height: 160px;
    left: 300px;
    bottom: -60px;
    border-radius: 50%;
}
.lc:nth-of-type(9){
    width: 150px;
    height: 150px;
    left:420px;
    bottom: 40px;
    border-radius: 50%;
}
.lc:nth-of-type(8){
    width: 60px;
    height: 60px;
    left: 270px;
    bottom: 0;
    border-radius: 50%;
}
.lc:nth-of-type(7){
    width: 130px;
    height: 130px;
    right: 0;
    bottom: 0;
    border-top-left-radius: 50%;
}
.lc:nth-of-type(6){
    width: 200px;
    height: 200px;
    left: 5px;
    bottom: -100px;
    border-radius: 50%;
    background: rgb(170, 190, 215);
}
.lc:nth-of-type(5){
    width: 170px;
    height: 170px;
    left: 140px;
    bottom: -60px;
    border-radius: 50%;
    background: rgb(170, 190, 215);
}
.lc:nth-of-type(4){
    width: 80px;
    height: 80px;
    left: 250px;
    bottom: 30px;
    border-radius: 50%;
    background: rgb(170, 190, 215);
}
.lc:nth-of-type(3){
    width: 160px;
    height: 160px;
    left: 300px;
    bottom: 0;
    border-radius: 50%;
    background: rgb(170, 190, 215);
}
.lc:nth-of-type(2){
    width: 60px;
    height: 60px;
    right: 60px;
    top: 20px;
    position: absolute;
    border-radius: 50%;
    background: rgb(170, 190, 215);
}
.lc:nth-of-type(1){
    width: 50px;
    height: 50px;
    right: 40px;
    top: 0;
    position: absolute;
    border-radius: 50%;
    background: rgb(170, 190, 215);
}
#o{
    width: 175px;
    height: 175px;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
    transition: 0.4s ease-in-out;
    box-shadow: 5px 5px 5px inset #FFFFFF, -5px -5px 5px inset #888888, 0 0 10px #404040;
}
#o1{
    width: 600px;
    height: 600px;
    border-radius: 50%;
    top: 100px;
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
    background: rgb(255, 255, 255, 0.1);
    transition: 0.4s ease-in-out;
}
#o2{
    width: 450px;
    height: 450px;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
    background: rgb(255, 255, 255, 0.1);
}
#o3{
    width: 300px;
    height: 300px;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
    background: rgb(255, 255, 255, 0.1);
}
.gra{
    border-radius: 50%;
    position: absolute;
    transition: 0.4s ease-in-out;
}
.gra:nth-of-type(1){
    width: 30px;
    height: 30px;
    left: 80px;
    top: 30px;
}
.gra:nth-of-type(2){
    width: 55px;
    height: 55px;
    left: 30px;
    top: 70px;
}
.gra:nth-of-type(3){
    width: 40px;
    height: 40px;
    left: 100px;
    top: 100px;
}
#box_shadow{
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
    width: 500px;
    height: 200px;
    border-radius: 100px;
    box-shadow: 5px -5px 10px inset rgb(250, 250, 250, 0.2), -5px 5px 10px inset rgb(0, 0, 0, 0.3),
    -5px 5px 10px rgb(250, 250, 250, 0.2), 5px -5px 10px rgb(0, 0, 0, 0.3);
}

light.css

代码语言：javascript复制
body{
    background: #EEEEEE;
}
#background{
    left: 0;
    top: -100%;
}
#o1{
    left: 100px;
}
#o{
    background: rgb(245, 215, 90);
}
.gra{
    background: rgb(245, 215, 90);
}

dark.css

代码语言：javascript复制
body{
    background: #333333;
}
#background{
    left: 0;
    top: 0;
}
#o1{
    left: 400px;
}
#o{
    background: rgb(215, 215, 230);
}
.gra{
    background: rgb(160, 170, 180);
}

button.js

代码语言：javascript复制
window.onload = change();

function change(){
    let theme = document.getElementById("theme");
    if (theme.className === "dark"){
        theme.className = "light"
        theme.href = "light.css";
    }
    else {
        theme.className = "dark"
        theme.href = "dark.css";
    }
}
background class height width 前端

0 人点赞