使用css3 grid 绘制彩虹

Irene1991

于 2021-08-18 22:48:03 发布

阅读量308

点赞数

分类专栏：前端开发文章标签： css渐变

原创文章如需转载请注明地址。

本文链接：https://blog.youkuaiyun.com/Irene1991/article/details/119790714

版权

这篇博客介绍了如何利用CSS3的相对定位和绝对定位创建一个有趣的热气球效果，以及使用CSS3 Grid布局实现一个动态旋转的彩虹效果。通过示例代码，作者展示了不同颜色层的叠加以及利用过渡效果实现360度旋转，为前端开发者提供了一种创新的视觉元素实现方式。

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

前言

本来想写一个彩虹效果，来练习下使用 css3 grid 布局，在实现的过程中，发现用不上表格，哈哈，意外收获一个热气球（css 相对定位+绝对定位）。

彩虹效果附在后面，是使用了css3 grid 布局。正好可以前后对比一下。

告白气球

都有裸眼3D效果了呢，哈哈。

源码

<!DOCTYPE html>
  <head>
    <meta charset="UTF-8">
    <title>彩虹</title>
    <style>
      body{
        background: #f7f7f7;
      }

      div.top{
        position: relative;
      }

      div.top>div{
        border: 1px solid #f7f7f7;
        border-radius: 50%;
        position: absolute;
        text-align: right;
        font-size: 30px;
        color:#fff;
      }

      div.top>div:nth-child(1){
        width:700px;
        height:700px;
        line-height: 700px;
        z-index:1;
        background-im