web前端入门到实战：纯CSS画动态彩虹

最新推荐文章于 2023-12-13 21:19:40 发布

原创

最新推荐文章于 2023-12-13 21:19:40 发布 · 594 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #web前端 #前端开发 #前端基础

本文介绍了如何使用CSS从入门到实战，一步步实现一个动态的彩虹效果。通过box-shadow创建七个颜色的弧形并拼接，结合after伪元素和动画，使彩虹呈现左右摇摆的动态视觉。内容包括实现思路、DOM结构和CSS样式设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果

效果图如下

实现思路

使用box-shadow画赤橙黄绿蓝靛紫7个弧形，拼接在一起
after伪元素写投影样式
彩虹和投影都有动画

dom结构

用两个嵌套的div容器，父容器来控制图标显示的位置，子容器用来写彩虹的样式。

<div class="container">
    <div class="rainbow"></div>
</div>

css样式

1、定义父容器样式，控制图标位置，顺便给整个页面加个背景色，方便预览

body{
    background: rgba(73,74,95,1);
}

.container{
    width: 170px;
    height: 170px;
    position: relative;
    margin: 250px auto;
}
web前端开发学习Q-q-u-n：784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（详细的前端项目实战教学视频，PDF）

2、彩虹样式，彩虹有一个左右摇摆的动画效果

.rainbow{
    width: 70px;
    height: 70px;
    position: absolute;
    top: 70px;
    left: 80px;
    margin-left: -40px;
    border-radius: 170px 0 0 0;
    box-sh