纯 CSS 实现奥运五环,环环相扣!

开发 前端
奥运五环是相互连接的,因此在视觉上会产生重叠效果,这也是实现五环最有挑战性的部分。接下来,将利用 CSS 的伪元素,巧妙地实现环环相扣的效果!

2024 巴黎奥运会正如火如荼地进行,本文来使用 CSS 来画一个奥运五环。奥运五环是相互连接的,因此在视觉上会产生重叠效果,这也是实现五环最有挑战性的部分。接下来,将利用 CSS 的伪元素,巧妙地实现环环相扣的效果!

根据五环的位置特点,可以将中间的黑色环设置为 HTML 的父元素,而将其他颜色的环设置为子元素。这样,其他环就可以相对于黑色环进行定位。整体的 HTML 结构如下:

<div class="black">
  <div class="ring blue"></div>
  <div class="ring yellow"></div>
  <div class="ring green"></div>
  <div class="ring red"></div>
</div>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.

首先,用 CSS 边框画出黑环和其他四环的基本样式:

.black {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border-width: 20px;
  border-style: solid;
}

.ring {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border-width: 20px;
  border-style: solid;
  top: -20px;
  right: -20px;
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.

接下来画绿环,它相对于黑环进行定位,向右向下移动,并且层级比黑环高:

.green {
  color: #30a751;
  top: 70px;
  right: -125px;
  z-index: 2;
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.

此时的效果是这样的,黑环的z-index为 1,绿环的z-index为 2:

而我们希望两环右侧的交车点处,黑环位于上方,这时就可以使用伪元素来实现。给黑环添加一个和它大小一样的伪元素::after,并将其放在黑环的正上方,z-index为3。接着,将伪元素的右边框设置为黑色,其他方向为透明,这样就成功使黑环的右侧看起来位于绿环上方了:

.black {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border-width: 20px;
  border-style: solid;

  &::after {
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 100%;
    top: -20px;
    right: -20px;
    border: 20px solid transparent;
    border-right: 20px solid currentcolor;
    z-index: 3;
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.

效果如下:

这里我来向右移动一下这个伪元素的位置,来看看他的样子:

到这你应该就明白了,这里只是视觉上的环环相扣,实际上,两个环并不在同一层。

接下来画红环。由于绿环的z-index为2,所以红环位于绿环下方:

.red {
  color: #ef314e;
  right: -230px;
}
  • 1.
  • 2.
  • 3.
  • 4.

效果如下:

此时只需按照上面的步骤,给红环添加一个带有红色下边框的伪元素即可:

.red {
  color: #ef314e;
  right: -230px;

  &::after {
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border-width: 20px;
    border-style: solid;
    top: -20px;
    right: -20px;
    border: solid 20px transparent;
    border-bottom: solid 20px currentcolor;
    z-index: 2;
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.

效果如下:

黄环和蓝环同理,这里直接附上完整代码:

.black {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border-width: 20px;
  border-style: solid;

  &::after {
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 100%;
    top: -20px;
    right: -20px;
    border: 20px solid transparent;
    border-right: 20px solid currentcolor;
    z-index: 3;
  }

  &::before {
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 100%;
    top: -20px;
    right: -20px;
    border: 20px solid transparent;
    border-bottom: 20px solid currentcolor;
    z-index: 1;
  }

  .ring {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border-width: 20px;
    border-style: solid;
    top: -20px;
    right: -20px;
  }

  .green {
    color: #30a751;
    top: 70px;
    right: -125px;
    z-index: 2;
  }

  .red {
    color: #ef314e;
    right: -230px;

    &::after {
      content: "";
      position: absolute;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      border-width: 20px;
      border-style: solid;
      top: -20px;
      right: -20px;
      border: solid 20px transparent;
      border-bottom: solid 20px currentcolor;
      z-index: 2;
    }
  }


  .yellow {
    color: #fcb32e;
    top: 70px;
    left: -125px;
  }

  .blue {
    color: #0082c9;
    left: -230px;

    &::after {
      content: "";
      position: absolute;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      border-width: 20px;
      border-style: solid;
      top: -20px;
      right: -20px;
      border: solid 20px transparent;
      border-right: solid 20px currentcolor;
      z-index: 2;
    }
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85.
  • 86.
  • 87.
  • 88.
  • 89.
  • 90.
  • 91.
  • 92.
  • 93.
  • 94.
  • 95.
  • 96.
  • 97.
  • 98.
  • 99.

最终效果如下:

责任编辑:姜华 来源: 前端充电宝
相关推荐

2022-07-12 14:53:58

区块链元宇宙资本

2021-01-15 09:36:23

漏洞shellweb安全

2016-04-26 09:47:28

2015-05-18 16:37:57

华为华为HSR方案

2015-01-20 10:57:10

2017-06-16 10:03:09

互联网

2018-10-17 14:50:08

2019-11-05 09:47:28

互联网IT程序员

2024-06-11 14:40:46

2012-02-16 10:49:09

2020-08-18 16:52:12

商业管理学

2011-07-25 09:15:21

苹果微软乔布斯

2012-06-12 11:02:52

激光打印机行情

2021-10-19 22:23:47

CSSBeautiful按钮

2024-08-29 08:13:58

2015-09-14 16:57:30

4G+4G

2022-02-21 07:02:16

CSSbeautiful按钮

2013-04-08 14:07:28

CSS

2020-11-04 13:55:06

CSS密室逃脱前端
点赞
收藏

51CTO技术栈公众号