首页 > 极客资料博客日记

css手撕奥运五环

2024-08-05 10:00:03极客资料围观29次

文章css手撕奥运五环分享给大家，欢迎收藏极客之家，专注分享技术知识

巴黎奥运会正如火如荼地进行，本文来使用 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>

首先，用 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;
}

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

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

此时的效果是这样的，黑环的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;
  }
}

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

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

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

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

.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;
  }
}

整体代码如下：

 
.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;
    }
  }
}

最终效果如下：

感谢阅读，记着点个赞哦，在此，谢谢各位啦！！！

标签：

上一篇：感谢「河南图奕网络」赞助园子，成为第一家创始赞助商
下一篇：MySQL 是如何实现数据的排序的？

首页 > 极客资料博客日记

css手撕奥运五环

相关文章

最新发布

点击排行

本站推荐

标签云

首页 > 极客资料 博客日记

css手撕奥运五环

相关文章

最新发布

点击排行

本站推荐

标签云

首页 > 极客资料博客日记