使用css3 grid 绘制彩虹

最新推荐文章于 2023-01-08 20:12:59 发布

Irene1991

最新推荐文章于 2023-01-08 20:12:59 发布

阅读量249

点赞数

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

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

本文链接：https://blog.csdn.net/Irene1991/article/details/119790714

版权

前端开发专栏收录该内容

54 篇文章 1 订阅

订阅专栏

前言

本来想写一个彩虹效果，来练习下使用 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-image: linear-gradient(red,orange);
      }

      div.top>div:nth-child(2){
        width:600px;
        height:600px;
        line-height: 600px;
        z-index:2;
        background-image: linear-gradient(orange,yellow);
      }

      div.top>div:nth-child(3){
        width:500px;
        height:500px;
        line-height: 500px;
        z-index:3;
        background-image: linear-gradient(yellow,green);
      }

      div.top>div:nth-child(4){
        width:400px;
        height:400px;
        line-height: 400px;
        z-index:4;
        background-image: linear-gradient(green,blue);
      }

      div.top>div:nth-child(5){
        width:300px;
        height:300px;
        line-height: 300px;
        z-index:5;
        background-image: linear-gradient(blue,#528fd3);
      }

      div.top>div:nth-child(6){
        width:200px;
        height:200px;
        line-height: 200px;
        z-index:6;
        background-image: linear-gradient(#528fd3,purple);
      }

      div.top>div:nth-child(7){
        width:100px;
        height:100px;
        line-height: 100px;
        z-index:7;
        background-image: linear-gradient(purple,red);
      }
    </style>
  </head>
  <body>
    <div class="top">
      <div>👍</div>
      <div>U</div>
      <div>E</div>
      <div>V</div>
      <div>O</div>
      <div>L</div>
      <div>I</div>
    </div>
  </body>
</html>

彩虹来了

源码

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

      div.container{
        position: relative;
      }

      div.top{
        display: grid;
        place-content:center;
      }

      div.top>div{
        grid-area:1/1;
        place-self:center;
        border: 1px solid #f7f7f7;
        border-radius: 50%;
        text-align: right;
        font-size: 30px;
        color:#fff;
      }

      div.top>div:nth-child(1){
        width:820px;
        height:820px;
        z-index:1;
        background-image: linear-gradient(red,orange);
      }

      div.top>div:nth-child(2){
        width:700px;
        height:700px;
        z-index:2;
        background-image: linear-gradient(orange,yellow);
      }

      div.top>div:nth-child(3){
        width:580px;
        height:580px;
        z-index:3;
        background-image: linear-gradient(yellow,green);
      }

      div.top>div:nth-child(4){
        width:460px;
        height:460px;
        z-index:4;
        background-image: linear-gradient(green,blue);
      }

      div.top>div:nth-child(5){
        width:340px;
        height:340px;
        z-index:5;
        background-image: linear-gradient(blue,#528fd3);
      }

      div.top>div:nth-child(6){
        width:220px;
        height:220px;
        z-index:6;
        background-image: linear-gradient(#528fd3,purple);
      }

      div.top>div:nth-child(7){
        width:120px;
        height:120px;
        line-height: 120px;
        z-index:7;
        background-image: linear-gradient(purple,red);
      }

      div.bottom{
        width:100%;
        height:410px;
        background: #f7f7f7;
        position: absolute;
        top:50%;
        z-index:8;
      }

      .animation{
        cursor: pointer;
        transition: all 1s ease-in;
      }

      .animation:hover{
        transform:rotate(360deg);
        -ms-transform:rotate(360deg); 	/* IE 9 */
        -moz-transform:rotate(360deg); 	/* Firefox */
        -webkit-transform:rotate(360deg); /* Safari 和 Chrome */
        -o-transform:rotate(360deg); 	/* Opera */
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="top">
        <div class="animation"></div>
        <div class="animation"></div>
        <div class="animation"></div>
        <div class="animation"></div>
        <div class="animation"></div>
        <div class="animation"></div>
        <div class="animation"></div>
      </div>

      <div class="bottom"></div>
    </div>
  </body>
</html>