使用Trae做一个简单的天狗食日动画效果试试

作者先吃几口饭

2025年9月12日 10:31

如何使用纯CSS制作"天狗食日"动画的详细步骤和代码实现，模拟日食过程中月亮（天狗）逐渐遮挡太阳的效果：

实现思路

创建太阳（黄色圆形）和月亮（黑色圆形）
使用CSS动画让月亮沿水平方向移动遮挡太阳
添加背景渐变色模拟日食时的天空明暗变化
使用滤镜增强光影效果

完整代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>天狗食日CSS动画</title>
    <style>
        .sky {
            position: relative;
            width: 100vw;
            height: 100vh;
            background: linear-gradient(to bottom, #1a2980, #26d0ce);
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .sun {
            width: 150px;
            height: 150px;
            background: radial-gradient(circle, #FFD700, #FF8C00);
            border-radius: 50%;
            box-shadow: 0 0 50px #FF4500, 0 0 100px rgba(255, 215, 0, 0.5);
            position: relative;
            z-index: 2;
        }
        
        .moon {
            width: 150px;
            height: 150px;
            background: #000;
            border-radius: 50%;
            position: absolute;
            z-index: 3;
            animation: eclipse 8s ease-in-out infinite;
            filter: blur(1px); /* 边缘柔化 */
        }
        
        .flare {
            position: absolute;
            width: 200px;
            height: 200px;
            background: radial-gradient(circle, transparent 60%, rgba(255, 69, 0, 0.3) 90%);
            border-radius: 50%;
            animation: pulse 3s ease-in-out infinite;
            z-index: 1;
        }
        
        @keyframes eclipse {
            0% { transform: translateX(-200px); }
            50% { transform: translateX(0); }
            100% { transform: translateX(200px); }
        }
        
        @keyframes pulse {
            0%, 100% { transform: scale(1); opacity: 0.7; }
            50% { transform: scale(1.2); opacity: 0.9; }
        }
        
        .stars {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            animation: stars-appear 8s infinite;
        }
        
        @keyframes stars-appear {
            45%, 55% { opacity: 0.8; }
            0%, 40%, 60%, 100% { opacity: 0; }
        }
    </style>
</head>
<body>
    <div class="sky">
        <div class="stars"></div>
        <div class="flare"></div>
        <div class="sun"></div>
        <div class="moon"></div>
    </div>
    
    <script>
        // 动态创建星空背景
        document.addEventListener('DOMContentLoaded', () => {
            const stars = document.querySelector('.stars');
            for (let i = 0; i < 200; i++) {
                const star = document.createElement('div');
                star.style.position = 'absolute';
                star.style.width = `${Math.random() * 3}px`;
                star.style.height = star.style.width;
                star.style.background = '#FFF';
                star.style.borderRadius = '50%';
                star.style.top = `${Math.random() * 100}%`;
                star.style.left = `${Math.random() * 100}%`;
                star.style.boxShadow = '0 0 5px white';
                stars.appendChild(star);
            }
        });
    </script>
</body>
</html>

视频效果

核心原理说明

太阳实现
radial-gradient创建发光效果，box-shadow模拟日冕

月亮移动动画
@keyframes eclipse控制月亮从左到右的水平移动：

@keyframes eclipse {
  0% { transform: translateX(-200px); }   /* 起始位置（左侧） */
  50% { transform: translateX(0); }      /* 完全遮挡太阳 */
  100% { transform: translateX(200px); } /* 移出右侧 */
}

光影效果增强
- .flare元素使用半透明渐变模拟日珥
- filter: blur(1px)柔化月亮边缘
- animation: pulse实现光晕脉动效果
星空特效
JavaScript动态生成200个随机位置的白色圆点，在日全食阶段浮现（通过stars-appear动画控制透明度）

Flexbox布局上手：10分钟告别垂直居中难题

掘金前端

作者先吃几口饭

2025年9月11日 09:45

你是否曾经为网页布局中的垂直居中问题头疼过？传统的CSS布局方法让我们在实现垂直居中时写了大量代码，甚至不得不使用一些"黑魔法"技巧。今天，就将Flexbox布局做一个小小的总结，只需10分钟，就可以完全理解透彻。

那就从概念都爱实际例子这几个步骤进行吧。

什么是Flexbox？

Flexbox（弹性盒子布局）是CSS3中一种新的布局模式，专门为解决复杂布局而设计。它让我们可以更轻松地创建响应式布局，特别是处理元素在容器中的对齐和分布。

核心概念：Flex容器和Flex项目

使用Flexbox只需要记住两个核心概念：

Flex容器：设置了display: flex的元素
Flex项目：Flex容器内的直接子元素

<div class="container"> <!-- Flex容器 -->
  <div class="item">项目1</div> <!-- Flex项目 -->
  <div class="item">项目2</div> <!-- Flex项目 -->
  <div class="item">项目3</div> <!-- Flex项目 -->
</div>

快速开始

让我们创建一个Flex容器：

.container {
  display: flex; /* 这就创建了一个Flex容器 */
}

就是这么简单！现在.container的所有直接子元素都变成了Flex项目，会自动排列在一行上。

解决垂直居中问题

现在来到重点：如何实现垂直居中？传统方法需要各种技巧，但Flexbox只需几行代码：

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;    /* 垂直居中 */
  height: 300px; /* 需要给容器一个高度 */
}

看！就这么简单，容器内的所有项目都会在水平和垂直方向上都居中显示。

实际例子

让我们创建一个简单的示例来演示Flexbox的强大之处：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Flexbox示例</title>
  <style>
    .container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh; /* 视口高度 */
      background-color: #f0f0f0;
    }
    
    .box {
      width: 100px;
      height: 100px;
      background-color: #4CAF50;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
  </div>
</body>
</html>

在这个例子中，我们创建了一个全屏高度的容器，里面的三个盒子在水平和垂直方向上都完美居中。

其他常用Flexbox属性

除了居中外，Flexbox还有很多实用属性：

flex-direction：控制项目排列方向（行或列）

.container {
  flex-direction: row; /* 默认值，水平排列 */
  flex-direction: column; /* 垂直排列 */
}

flex-wrap：控制项目是否换行

.container {
  flex-wrap: wrap; /* 允许换行 */
}

flex：控制项目的伸缩比例

.item {
  flex: 1; /* 项目会平均分配剩余空间 */
}

浏览器支持

现代浏览器对Flexbox的支持已经非常好了。对于旧版浏览器，可以考虑使用自动前缀工具（如Autoprefixer）来添加必要的浏览器前缀。

总结

Flexbox彻底改变了CSS布局的方式，特别是解决了令人头疼的垂直居中问题。只需要记住display: flex创建容器，justify-content控制水平对齐，align-items控制垂直对齐，你就掌握了Flexbox的核心用法。

10个你可能不知道的实用CSS技巧，立竿见影提升开发效率

掘金前端

作者先吃几口饭

2025年9月10日 10:57

CSS是前端开发的基石，但它的奥秘远不止color和margin。掌握一些实用的高级技巧，能让你在开发中少写代码，事半功倍，瞬间提升效率。下面总结的这10个技巧，也许对你会有些许帮助！

1. 使用 `:empty` 隐藏空元素

场景：有时动态生成内容时，某些元素可能会空着，导致页面上出现不必要的空白或边框。

技巧：使用 :empty 伪类可以直接隐藏这些空元素，无需编写额外的JavaScript逻辑。

/* 隐藏没有任何内容（包括空格、换行）的元素 */
.container:empty {
    display: none;
}

注意：只有真正空无一物（无内容、无空格、无换行）的元素才会被匹配。

2. 精灵图（CSS Sprites）与 `background-position`

场景：页面有多个小图标（Icon），每次加载都产生多个HTTP请求，影响性能。

技巧：将所有小图标合并到一张图上（精灵图），然后通过 background-position 来精准定位每个图标。这是老牌但极其高效的性能优化技巧。

.icon {
    background-image: url('sprite.png');
    background-repeat: no-repeat;
    display: inline-block;
    width: 24px;
    height: 24px;
}

.icon-home {
    /* 将背景图向左移动0px，向上移动0px，显示出“家”图标 */
    background-position: 0 0;
}

.icon-user {
    /* 将背景图向左移动24px，显示出下一个图标 */
    background-position: -24px 0;
}

3. 超好用的 `currentColor` 关键字

场景：想让一个元素的边框、阴影或背景颜色和它的文字颜色保持一致，但又不想写重复的值。

技巧：使用 currentColor 关键字，它代表当前元素的 color 值。修改 color，所有用到 currentColor 的属性都会自动改变。

.box {
    color: #ff5733; /* 文字颜色 */
    border: 2px solid currentColor; /* 边框颜色和文字颜色一致 */
    box-shadow: 0 0 10px currentColor; /* 阴影颜色也和文字颜色一致 */
    background-color: rgba(255, 87, 51, 0.1); /* 稍微麻烦点，但思路类似 */
}

4. 使用 `calc()` 进行动态计算

场景：想要一个元素的宽度是“100% - 50px”，这种动态计算在响应式布局中非常常见。

技巧：使用 calc() 函数，它可以在CSS中进行简单的数学运算，加减乘除都没问题。

.sidebar {
    width: 250px;
    float: left;
}

.main-content {
    /* 宽度等于父元素的100%减去侧边栏的宽度和外边距 */
    width: calc(100% - 250px - 20px);
    float: left;
    margin-left: 20px;
}

5. 使用 `filter` 制作毛玻璃效果

场景：想实现那种半透明模糊的苹果风毛玻璃（Glassmorphism）背景效果。

技巧：使用 backdrop-filter: blur() 为元素后面的区域添加模糊效果。

.frosted-glass {
    background-color: rgba(255, 255, 255, 0.2); /* 半透明背景 */
    backdrop-filter: blur(10px); /* 关键：模糊背景 */
    -webkit-backdrop-filter: blur(10px); /*  Safari 支持 */
    padding: 20px;
    border-radius: 10px;
}

6. 灵活控制大小写的 `text-transform`

场景：从API或数据库获取的文本大小写不规范，但又想在页面上统一显示。

技巧：用 text-transform 直接控制文本的大小写，无需在JavaScript中处理。

.uppercase {
    text-transform: uppercase; /* 全部大写 */
}
.lowercase {
    text-transform: lowercase; /* 全部小写 */
}
.capitalize {
    text-transform: capitalize; /* 每个单词首字母大写 */
}

7. 防止文本换行溢出 `text-overflow`

场景：单行文字内容过长，希望超出容器部分用“...”省略号表示。

技巧：配合 white-space: nowrap（不换行）和 overflow: hidden（隐藏溢出），使用 text-overflow: ellipsis 实现省略号。

.ellipsis {
    width: 200px;
    white-space: nowrap; /* 1. 强制一行显示 */
    overflow: hidden; /* 2. 隐藏溢出内容 */
    text-overflow: ellipsis; /* 3. 溢出显示... */
}

8. 使用 `object-fit` 处理图片比例

场景：用户上传的头像图片尺寸比例不一，直接设置宽高会导致图片被拉伸变形。

技巧：使用 object-fit 属性，让图片在容器内以类似 background-size 的方式显示。

.avatar {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover; /* 关键：填充容器，并保持比例，可能裁剪图片 */
}

cover（覆盖），contain（包含），fill（填充）等值非常实用。

9. 原生CSS变量（Custom Properties）

场景：网站有主题色，到处都在用，哪天要换颜色得一个一个找。

技巧：在 :root 选择器上定义CSS变量（自定义属性），在整个项目中引用它。

:root {
    --main-color: #3498db;
    --accent-color: #e74c3c;
    --default-radius: 8px;
}

.button {
    background-color: var(--main-color);
    border-radius: var(--default-radius);
    color: white;
    padding: 10px 20px;
}

.header {
    color: var(--accent-color);
}

要修改主题，只需在 :root 里改一次变量值，全局生效！

10. 一行代码实现居中布局

场景：让一个元素在水平和垂直方向上居中，一直是经典的布局问题。

技巧：现代CSS给出了终极简洁方案：Flexbox 和 Grid。

Flexbox 终极居中：

.parent-flex {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    height: 300px;
}

Grid 终极居中（更简洁）：

.parent-grid {
    display: grid;
    place-items: center; /* 一行代码，两者都居中 */
    height: 300px;
}

告别 margin: 0 auto; 和绝对定位的复杂计算吧！

这次文章就分享到这里了！感谢各位大神们的观看！

普通视图

实现思路

完整代码

视频效果

核心原理说明

什么是Flexbox？

核心概念：Flex容器和Flex项目

快速开始

解决垂直居中问题

实际例子

其他常用Flexbox属性

浏览器支持

总结

1. 使用 :empty 隐藏空元素

2. 精灵图（CSS Sprites）与 background-position

3. 超好用的 currentColor 关键字

4. 使用 calc() 进行动态计算

5. 使用 filter 制作毛玻璃效果

6. 灵活控制大小写的 text-transform

7. 防止文本换行溢出 text-overflow

8. 使用 object-fit 处理图片比例

9. 原生CSS变量（Custom Properties）

10. 一行代码实现居中布局

1. 使用 `:empty` 隐藏空元素

2. 精灵图（CSS Sprites）与 `background-position`

3. 超好用的 `currentColor` 关键字

4. 使用 `calc()` 进行动态计算

5. 使用 `filter` 制作毛玻璃效果

6. 灵活控制大小写的 `text-transform`

7. 防止文本换行溢出 `text-overflow`

8. 使用 `object-fit` 处理图片比例