首页 星云 工具 资源 星选 资讯 热门工具
:

PDF转图片 完全免费 小红书视频下载 无水印 抖音视频下载 无水印 数字星空

css手撕奥运五环

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

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

<div>
  <div></div>
  <div></div>
  <div></div>
  <div></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-index3。接着,将伪元素的右边框设置为黑色,其他方向为透明,这样就成功使黑环的右侧看起来位于绿环上方了:

 
.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-index2,所以红环位于绿环下方:

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

最终效果如下:

 感谢阅读,记着点个赞哦,在此,谢谢各位啦!!!

 

From:https://www.cnblogs.com/houxianzhou/p/18342662
本文地址: http://www.shuzixingkong.net/article/796
0评论
提交 加载更多评论
其他文章 一直让 PHP 程序员懵逼的同步阻塞异步非阻塞,终于搞明白了
经常听到身边写 Java、Go 的朋友提到程序异步、非阻塞、线程、协程,让系统性能提高到百万、千万并发,使我甚是惊讶属实羡慕。
一直让 PHP 程序员懵逼的同步阻塞异步非阻塞,终于搞明白了 一直让 PHP 程序员懵逼的同步阻塞异步非阻塞,终于搞明白了
感谢「河南图奕网络」赞助园子,成为第一家创始赞助商
在8月1日发布救援行动-赞助商计划后,我们并没有抱什么奢望,更没有妄想很快能找到赞助商,只是为救园多一点可能的希望,万一找到一家赞助商,就会多一份救园力量。没想到第2天就有幸遇到一家有意向的企业
感谢「河南图奕网络」赞助园子,成为第一家创始赞助商 感谢「河南图奕网络」赞助园子,成为第一家创始赞助商 感谢「河南图奕网络」赞助园子,成为第一家创始赞助商
文本相似度 HanPL汉语言处理
@目录前言需求简介实操开始1. 添加pom.xml依赖2. 文本相似度工具类3. 案例验证4. 验证结果总结 前言 请各大网友尊重本人原创知识分享,谨记本人博客:南国以南i、 提示:以下是本篇文章正文内容,下面案例可供参考 需求 当我们需要求两个或两个以上的字符串相似度百分比时,可以使用HanLP汉
文本相似度 HanPL汉语言处理
《花100块做个摸鱼小网站! 》第一篇—买云服务器和初始化环境
一、前言 大家好呀,我是summo,前面我已经写了我为啥要做这个摸鱼小网站的原因,从这篇文章开始我会一步步跟大家聊聊我是怎么搭起这个网站的。我知道对很多新手来说,建网站可能挺头大的,不知道从哪里开始,所以我会尽量写得简单明了,让大家一看就懂,少走弯路。 咱们先从买服务器开始说起。现在阿里云好像还有免
《花100块做个摸鱼小网站! 》第一篇—买云服务器和初始化环境 《花100块做个摸鱼小网站! 》第一篇—买云服务器和初始化环境 《花100块做个摸鱼小网站! 》第一篇—买云服务器和初始化环境
MySQL 是如何实现数据的排序的?
1.背景 或许你面试的时候被问到了mysql的排序问题 又或许你在学习排序算法的时候想到了数据库的排序是如何实现的呢 下面重点从面试的角度来回答这个问题 2.面试回答 1.普通面试者回答 普通面试者的回答通常是点对点的回答,如下: MySQL 实现数据的排序主要通过排序算法和索引结构来完成。排序操作
推荐一款界面优雅、功能强大的 .NET + Vue 权限管理系统
前言 今天推荐一款用 .NET 和 Vue3 实现的开源权限管理系统。它的界面清爽干净,功能强大,还具备灵活的角色权限分配功能,能够满足不同规模企业的管理需求。无论你是开发新手还是大神,都能轻松上手,快速搭建起自己的权限管理体系。别再犹豫了,赶快来试试吧! 项目简介 Malus是海棠的意思,顾名思义
推荐一款界面优雅、功能强大的 .NET + Vue 权限管理系统 推荐一款界面优雅、功能强大的 .NET + Vue 权限管理系统 推荐一款界面优雅、功能强大的 .NET + Vue 权限管理系统
内存交换空间--Swap Space
转载请注明出处: 一、概述 内存交换空间(Swap Space)是计算机内存的一种补充,位于硬盘驱动器上。当物理内存(RAM)不足时,系统会将不活跃的页面(或称为内存页)移到交换空间中,以释放物理内存给更需要的进程。这种方式虽然比直接从物理内存中读取数据要慢,但能有效避免系统因内存不足而崩溃。 二、
内存交换空间--Swap Space 内存交换空间--Swap Space 内存交换空间--Swap Space
Spring Boot 基于 SCRAM 认证集成 Kafka 的详解
在本篇文章中,我们将探讨如何在Spring Boot应用中集成Kafka并使用SCRAM认证机制进行安全连接;并实现动态创建账号、ACL 权限、Topic,以及生产者和消费者等操作。
Spring Boot 基于 SCRAM 认证集成 Kafka 的详解