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

老大白菜

于 2025-03-23 17:03:33 发布

阅读量1.4k

点赞数 19

分类专栏： vue3/vue2 文章标签： css html javascript

本文链接：https://blog.csdn.net/hzether/article/details/146458536

版权

在这里插入图片描述

<!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 {