当前位置： 首页 > news >正文

【css】使用CSS绘制奥运五环--巴黎奥运

news 2025/9/19 20:18:59

使用CSS绘制奥运五环

在2024年巴黎奥运会期间，本文来使用 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样式

接下来，我们通过CSS来定义这些环的样式。

黑环和基本样式

在这里插入图片描述

.black {position: relative;width: 200px;height: 200px;border-radius: 50%;border-width: 20px;border-style: solid;border-color: #000; /* 黑色 */margin: 0 auto; /* 水平居中 */
}.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;z-index: 2;
}

在这里插入图片描述

黄环和蓝环

.yellow {color: #fcb32e; /* 黄色 */top: 70px;left: -125px;z-index: 2;
}.blue {color: #0082c9; /* 蓝色 */left: -230px;z-index: 2;
}

伪元素实现环环相扣

为了实现环环相扣的效果，我们使用伪元素来调整环的位置和颜色。
在这里插入图片描述

.black::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;
}.black::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;
}.red::after {border-bottom: 20px solid currentcolor;
}.blue::after {border-right: 20px solid currentcolor;
}

完整示例

将上述HTML和CSS代码组合，我们就可以得到一个视觉上环环相扣的奥运五环标志。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Olympic Rings</title><style>.black {position: relative;width: 200px;height: 200px;border-radius: 50%;border-width: 20px;border-style: solid;border-color: #000; /* 黑色 */margin: 0 auto; /* 水平居中 */}.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;z-index: 2;}.yellow {color: #fcb32e; /* 黄色 */top: 70px;left: -125px;z-index: 2;}.blue {color: #0082c9; /* 蓝色 */left: -230px;z-index: 2;}.black::after, .black::before {content: "";position: absolute;width: 200px;height: 200px;border-radius: 100%;top: -20px;right: -20px;border: 20px solid transparent;}.black::after {border-right: 20px solid currentcolor;z-index: 3;}.black::before {border-bottom: 20px solid currentcolor;z-index: 1;}.red::after {border-bottom: 20px solid currentcolor;}.blue::after {border-right: 20px solid currentcolor;}</style>
</head>
<body><div class="black"><div class="ring blue"></div><div class="ring yellow"></div><div class="ring green"></div><div class="ring red"></div></div>
</body>
</html>

通过上述步骤，我们成功地使用CSS绘制了奥运五环的标志。这个方法不仅展示了CSS的强大能力，也体现了前端开发中对细节的关注和对视觉效果的追求。

相关文章：

【css】使用CSS绘制奥运五环--巴黎奥运

使用CSS绘制奥运五环 在2024年巴黎奥运会期间&#xff0c;本文来使用 CSS 来画一个奥运五环。奥运五环由五个相互交叠的圆环组成&#xff0c;分别代表五大洲。 奥运五环是相互连接的&#xff0c;因此在视觉上会产生重叠效果&#xff0c;这也是实现五环最有挑战性的部分 HTML结…...

编程日记 2024/8/9 4:03:46

【Python数据处理】MatplotlibNumpyPandas常用API整理

目录 Matplotlib 1. 导入 Matplotlib 并创建图布 2. 实现基础绘图 2.1 折线图 2.2 柱状图 2.3 散点图 2.4 直方图 3. 完善绘图辅助功能 3.1 添加标题和标签 3.2 添加网格线 3.3 添加图例 4. 在一个坐标系下绘制多个图像 5. 在一个图形窗口创建多个子图 5.1 使用 a…...

编程日记 2024/8/9 4:01:45

Nacos是阿里巴巴开源的一款分布式服务注册中心和配置中心

Nacos是阿里巴巴开源的一款分布式服务注册中心和配置中心&#xff0c;旨在帮助开发人员更轻松地构建和管理微服务架构。以下是关于Nacos的详细介绍&#xff1a; 一、概述 Nacos是Dynamic Naming and Configuration Service&#xff08;动态命名和配置服务&#xff09;的缩写&a…...

编程日记 2024/8/9 4:00:42

条形码与二维码报表

概述 条形码与二维码&#xff1a;演示条形码与二维码&#xff0c;条形码数据将来自于关联的字段值。支持各种常用的条形码与二维码。 应用场景 如下图所示&#xff0c;简单展示数据 示例说明 数据准备 在数据面板中添加数据集&#xff0c;可选择Json数据集和API服务数据…...

编程日记 2024/8/9 3:58:38

数据采集工具之Flume

本文主要实现数据到datahub的采集过程 1、下载 Index of /dist/flume/1.11.0 datahub插件下载 https://aliyun-datahub.oss-cn-hangzhou.aliyuncs.com/tools/aliyun-flume-datahub-sink-2.0.9.tar.gz 2、安装 $ tar aliyun-flume-datahub-sink-x.x.x.tar.gz $ cd aliyun-…...

编程日记 2024/8/9 3:56:36

【24年最新】AI大模型零基础入门到精通学习资料大全，学完你就是LLM大师！

零基础如何学习大模型 AI 领取方式在文末 为什么要学习大模型&#xff1f; 学习大模型课程的重要性在于它能够极大地促进个人在人工智能领域的专业发展。大模型技术&#xff0c;如自然语言处理和图像识别&#xff0c;正在推动着人工智能的新发展阶段。通过学习大模型课程&am…...

编程日记 2024/8/9 3:52:32

使用RabbitMQ死信交换机实现延迟消息

文章目录 什么是死信交换机&#xff1f;死信交换机实现延迟消息的思路实现过程配置类消费者监听死信队列发送延迟消息 注意事项总结 在开发过程中&#xff0c;我们常常会遇到需要延迟处理某些消息的场景&#xff0c;例如订单的支付超时处理、短信的定时发送等。本文将介绍如何使…...

编程日记 2024/8/9 3:51:31

overleaf上latex表格的使用，latex绘制三线表

三线表需要的包、代码及其示例解释。 一般需要用到的包&#xff1a; \usepackage{tabu} % 表格插入 \usepackage{multirow} % 一般用以设计表格&#xff0c;将所行合并 \usepackage{multicol} % 合并多列 \usepackage{m…...

编程日记 2024/8/9 3:50:30

聚焦光热型太阳光模拟器助力多晶硅均匀加热

晶圆均匀加热技术综述 晶圆均匀加热是半导体制造过程中的关键技术之一&#xff0c;直接影响着晶圆上各种加工工艺的质量和稳定性。晶圆加热的目的在于化学气相沉积、退火、氧化等工艺中&#xff0c;通过对晶圆进行必要的热处理&#xff0c;以促进或优化后续工艺步骤。不均匀的…...

编程日记 2024/8/9 3:48:28

【Android】四大组件（Activity、Service、Broadcast Receiver、Content Provider）、结构目录

文章目录 Android系统架构Android四大组件ActivityServiceBroadcast ReceiverContent Provider 两大视图主要结构目录 Android系统架构 https://blog.csdn.net/xzzteach/article/details/140904613 Android四大组件 Activity 一个 Activity 包含了用户能够看到的界面&#xff0…...

编程日记 2024/8/9 3:45:24

前端开发：创建可拖动的固定位置 `＜div＞` 和自动隐藏悬浮按钮

在前端开发中&#xff0c;实现一个可拖动的固定位置 <div>&#xff0c;并且根据拖动的状态控制其显示和隐藏&#xff0c;同时在特定条件下显示悬浮按钮&#xff0c;涉及以下技术和原理&#xff1a; 技术细节和实现步骤&#xff1a; 1. HTML 结构&#xff1a; <!DOC…...

编程日记 2024/8/9 3:43:22

Java Bean Validation 注解：@NotEmpty、@NotBlank 和 @NotNull 的区别

1. 概述 Bean Validation 是 Java 提供的一种对 Java Bean 实例的字段或方法参数进行校验的标准机制。它允许开发者使用注解的方式定义验证逻辑&#xff0c;这些注解可以在类、字段或者方法上声明&#xff0c;并且可以被任何实现了 JSR 303/JSR 349 规范的框架&#xff08;如 …...

编程日记 2024/8/9 3:42:21

Java | Leetcode Java题解之第322题零钱兑换

题目&#xff1a; 题解&#xff1a; public class Solution {public int coinChange(int[] coins, int amount) {int max amount 1;int[] dp new int[amount 1];Arrays.fill(dp, max);dp[0] 0;for (int i 1; i < amount; i) {for (int j 0; j < coins.length; j)…...

编程日记 2024/8/9 3:41:19

Linux初启征程指南：攻克常见系统指令与权限初理解

有时候觉得&#xff0c;电脑就像一个高贵冷艳的妹纸。 400&#xff0c;是她冷冰冰地说&#xff1a;“我听不懂你在说什么”&#xff1b; 401&#xff0c;是她无情地转身&#xff1a;“我不认识你&#xff0c;别说那些奇怪的话”&#xff1b; 403&#xff0c;是她残酷的拒绝&…...

编程日记 2024/8/9 3:39:17

第十九节、野猪受伤死亡逻辑动画

一、协程 在这个代码中&#xff0c;update更新非常快&#xff0c;不会有时间去addforce增加力 所以需要使用协程&#xff0c;同时开启 1、写法 WaitForSeconds(0.45f) 意思是等待时间0.45秒后 写完协程程序后&#xff0c;需要开启 &#xff0c;固定写法如下 2、注意 dir是局…...

编程日记 2024/8/9 3:38:15

vue 开发工具 Hbuilder 简介及应用

一、简介 HBuilderX 是一款流行的前端开发工具&#xff0c;由DCloud公司开发。它支持多种编程语言&#xff0c;如HTML、CSS、JavaScript、Vue、UniApp等&#xff0c;非常适合用来开发Web应用、移动端应用和跨平台应用。 官网地址&#xff1a;https://www.dcloud.io/hbuilderx.…...

编程日记 2024/8/9 3:36:12

【杂谈】-MQTT与HTTP在物联网中的比较：为什么MQTT是更好的选择

MQTT与HTTP在物联网中的比较&#xff1a;为什么MQTT是更好的选择 文章目录 MQTT与HTTP在物联网中的比较&#xff1a;为什么MQTT是更好的选择1、什么是MQTT2、什么是HTTP3、MQTT和HTTP之间的差异 MQTT&#xff08;消息队列遥测传输&#xff09;和HTTP&#xff08;超文本传输协议…...

编程日记 2024/8/9 3:35:11

冠豪猪优化算法（CPO）、卷积神经网络（CNN）与支持向量机（SVM）结合的预测模型（CPO-CNN-SVM）及其Python和MATLAB实现

### 一、背景 在现代数据挖掘和机器学习领域&#xff0c;特征选择与模型优化是两个重要的研究方向。随着深度学习的发展&#xff0c;卷积神经网络&#xff08;CNN&#xff09;在图像、视频等多媒体数据处理中的表现优异。然而&#xff0c;传统的CNN模型通常需要大量的标注数据和…...

编程日记 2024/8/9 3:32:08

【通信原理】

通信原理 二、频谱与随机信号2.1 频谱2.1.1 频谱or频谱密度函数2.1.2 幅度谱&#xff08;幅频特性&#xff09;or相位谱&#xff08;相频特性&#xff09; 2.2 能量信号2.2.1 什么是能量信号2.2.2 巴塞瓦尔定理2.2.3 维纳钦辛定理 2.3 功率信号2.3.1 功率信号2.3.2 巴塞瓦尔定理…...

编程日记 2024/8/9 3:31:07

有序数组的平方（LeetCode）

题目 给你一个按 非递减顺序 排序的整数数组 nums&#xff0c;返回 每个数字的平方 组成的新数组&#xff0c;要求也按 非递减顺序 排序。 解题 以下算法时间复杂度为 def sortedSquares(nums):n len(nums)result [0] * n # 创建一个结果数组&#xff0c;长度与 nums 相同le…...

编程日记 2024/8/9 3:29:05

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

编程新知 2025/9/19 16:57:37

Spark 之 入门讲解详细版（1）

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

编程新知 2025/9/19 3:31:04

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

编程新知 2025/9/11 13:56:27

江苏艾立泰跨国资源接力：废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下&#xff0c;江苏艾立泰以一场跨国资源接力的创新实践&#xff0c;重新定义了绿色供应链的边界。 跨国回收网络&#xff1a;废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点&#xff0c;将海外废弃包装箱通过标准…...

编程新知 2025/8/3 22:02:59

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户&#xff0c;但你不希望用 root 权限运行 ns-3&#xff08;这是对的&#xff0c;ns3 工具会拒绝 root&#xff09;&#xff0c;你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案&#xff1a;创建非 roo…...

编程新知 2025/9/11 11:00:29

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

编程新知 2025/7/9 1:12:03

【JavaWeb】Docker项目部署

引言 之前学习了Linux操作系统的常见命令&#xff0c;在Linux上安装软件&#xff0c;以及如何在Linux上部署一个单体项目&#xff0c;大多数同学都会有相同的感受&#xff0c;那就是麻烦。 核心体现在三点&#xff1a; 命令太多了&#xff0c;记不住 软件安装包名字复杂&…...

编程新知 2025/9/19 7:43:25

【HarmonyOS 5 开发速记】如何获取用户信息（头像/昵称/手机号）

1.获取 authorizationCode&#xff1a; 2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 3.获取手机&#xff1a;文档中心 4.获取昵称头像&#xff1a;文档中心 首先创建 request 若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...

编程新知 2025/9/17 2:39:21

CSS设置元素的宽度根据其内容自动调整

width: fit-content 是 CSS 中的一个属性值&#xff0c;用于设置元素的宽度根据其内容自动调整&#xff0c;确保宽度刚好容纳内容而不会超出。 效果对比 默认情况&#xff08;width: auto&#xff09;&#xff1a; 块级元素&#xff08;如 <div>&#xff09;会占满父容器…...

编程新知 2025/6/20 15:09:15

基于Java Swing的电子通讯录设计与实现：附系统托盘功能代码详解

JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用&#xff0c;结合SQLite数据库实现联系人管理功能&#xff0c;并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能&#xff0c;同时可以最小化到系统…...

编程新知 2025/6/15 22:59:29