css+js实现日出日落效果

最新推荐文章于 2024-07-14 14:29:26 发布

恬歆羽

最新推荐文章于 2024-07-14 14:29:26 发布

阅读量424

点赞数 1

分类专栏： CSS js 文章标签： css html css3

本文链接：https://blog.csdn.net/qq_45921597/article/details/127098003

版权

js 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

CSS

17 篇文章 0 订阅

订阅专栏

效果如下：

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        #container{
            height: 100vh;
        }
        .bg{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .sun{
            margin: 0;
            padding: 0;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 600px;
            height: 600px;
            background-color: orange;
            border-radius: 50%;
            /* display: none; */
        }
        .moon{
            margin: 0;
            padding: 0;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(calc(-50% + -160px),calc(-50% + -180px));
            width: 600px;
            height: 600px;
            box-shadow: 160px 180px 0 cyan;
            border-radius: 50%
        }
        .sea{
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 35%;
            backdrop-filter: blur(100px);
            -webkit-backdrop-filter: blur(100px);
            z-index: 100;
        }
        .sun,.moon,.sun-box,.moon-box,.bg{
            transition: all 1s ease-in-out;
        }
        .sun-box,.moon-box{
            position: relative;
            overflow: hidden;
        }
        .light .sun-box{
            height: 100%;
        }
        .light .moon-box{
            height: 0;
        }
        .light .bg{
            background-color: #ffeea2;
        }
        .dark .sun-box{
            height: 0;
        }
        .dark .moon-box{
            height: 100%;
        }
        .dark .bg{
            background-color: #040720;
        }
        .btn-box{
            position: absolute;
            top: 5px;
            left: 5px;
            z-index: 101;
            display: flex;
            flex-direction: row;
        }
        .btn-box div{
            background-color: rgba(255,255,255,0.7);
            color: #000;
            width: 90px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            margin: 5px;
            font-size: 14px;
            border-radius: 5px;
            cursor: pointer;
        }
        .btn-box div:hover{
            background-color: #fff;
        }
    </style>
</head>
<body>
    <div class="btn-box">
        <div onclick="change('light')">
            <i class="fa fa-sun-o" aria-hidden="true"></i>你叉叉
        </div>
        <div onclick="change('dark')">
            <i class="fa fa-moon-o" aria-hidden="true"></i>穷哈哈
        </div>
    </div>
    <div class="dark" id="container">
        <div class="bg"></div>
        <div class="moon-box">
            <div class="moon"></div>
        </div>
        <div class="sun-box">
            <div class="sun"></div>
        </div>
        <div class="sea"></div>
    </div>
</body>
<script>
    function change(str){
        document.getElementById('container').setAttribute('class',str)
    }
</script>
</html>