做一个有天有地的css及html画的旋转阴阳鱼

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天地阴阳</title>
    <style>
        /* 重置默认样式 */
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        /* 基础布局 */
        html, body {
            height: 100%;
        }

        .container {
            height: 100%;
            display: flex;
            flex-direction: column;
            position: relative;
        }

        /* 天地背景 */
        .sky {
            flex: 1;
            background: linear-gradient(to bottom, #87CEEB, #E0F6FF);
        }

        .earth {
            height: 50%;
            background: linear-gradient(to bottom, #90EE90, #228B22);
        }

        /* 八卦图主容器 */
        .box {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 300px;
            height: 300px;
            border-radius: 50%;
            box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
            animation: rotate 8s linear infinite;
            transform-origin: center center;
            backdrop-filter: blur(5px);
            /* 移除重复的样式定义和背景色 */
        }

        /* 阴阳鱼左右半圆 */
        .semi-circle {
            position: absolute;
            height: 100%;
            width: 50%;
        }

        .left {
            left: 0;
            background: #000;
            border-radius: 150px 0 0 150px;
            width: 50%;
        }

        .right {
            right: 0;
            background: #fff;
            border-radius: 0 150px 150px 0;
            width: 50%;
        }

        /* 在box容器中添加背景色 */
        .box {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 300px;
            height: 300px;
            border-radius: 50%;
            box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
            animation: rotate 8s linear infinite;
            transform-origin: center center;
            backdrop-filter: blur(5px);
            background: rgba(255, 255, 255, 0.8);  /* 添加背景色 */
        }

        /* 阴阳鱼大圆 */
        .circle {
            position: absolute;
            left: 25%;
            width: 50%;
            height: 50%;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .top-circle {
            top: 0;
            background: #000;  /* 改为纯黑色 */
        }

        .bottom-circle {
            bottom: 0;
            background: #fff;  /* 改为纯白色 */
        }

        /* 阴阳眼 */
        .small-circle {
            width: 30px;
            height: 30px;
            border-radius: 50%;
        }

        .white { background: #fff; }  /* 改为纯白色 */
        .black { background: #000; }  /* 改为纯黑色 */

        /* 旋转动画 */
        @keyframes rotate {
            from { transform: translate(-50%, -50%) rotate(0deg); }
            to { transform: translate(-50%, -50%) rotate(360deg); }
        }

        /* 悬停效果 */
        .box:hover {
            animation-play-state: paused;
            box-shadow: 0 0 40px rgba(0, 0, 0, 0.4);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="sky"></div>
        <div class="earth"></div>
        <div class="box">
            <div class="semi-circle left"></div>
            <div class="semi-circle right"></div>
            <div class="circle top-circle">
                <span class="small-circle white"></span>
            </div>
            <div class="circle bottom-circle">
                <span class="small-circle black"></span>
            </div>
        </div>
    </div>
</body>
</html>
相关推荐
猿榜6 分钟前
魔改编译-永久解决selenium痕迹(二)
javascript·python
阿幸软件杂货间10 分钟前
阿幸课堂随机点名
android·开发语言·javascript
我要让全世界知道我很低调18 分钟前
记一次 Vite 下的白屏优化
前端·css
threelab19 分钟前
three案例 Three.js波纹效果演示
开发语言·javascript·ecmascript
1undefined220 分钟前
element中的Table改造成虚拟列表,并封装成hooks
前端·javascript·vue.js
用户7579419949701 小时前
基于JavaScript的简易Git
javascript
gzzeason1 小时前
使用Vite创建React初始化项目
前端·javascript·react.js
又双叒叕7781 小时前
React19 新增Hooks:useOptimistic
前端·javascript·react.js
归于尽1 小时前
V8 引擎是如何给 JS"打扫房间"的 ?
前端·javascript
自由逐风1 小时前
JS 处理长整型数字的坑:从雪花 ID 精度丢失说起
javascript