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

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

news 2026/1/15 15:42:31

使用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

idea大量爆红问题解决

问题描述 在学习和工作中&#xff0c;idea是程序员不可缺少的一个工具&#xff0c;但是突然在有些时候就会出现大量爆红的问题&#xff0c;发现无法跳转&#xff0c;无论是关机重启或者是替换root都无法解决 就是如上所展示的问题&#xff0c;但是程序依然可以启动。 问题解决…...

编程新知 2026/1/15 6:52:08

css实现圆环展示百分比，根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

编程新知 2026/1/15 5:47:35

Python爬虫（二）：爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

编程新知 2025/10/19 5:48:51

PHP 8.5 即将发布：管道操作符、强力调试

前不久&#xff0c;PHP宣布了即将在 2025 年 11 月 20 日 正式发布的 PHP 8.5&#xff01;作为 PHP 语言的又一次重要迭代&#xff0c;PHP 8.5 承诺带来一系列旨在提升代码可读性、健壮性以及开发者效率的改进。而更令人兴奋的是&#xff0c;借助强大的本地开发环境 ServBay&am…...

编程新知 2026/1/15 5:21:10

阿里云Ubuntu 22.04 64位搭建Flask流程（亲测）

cd /home 进入home盘 安装虚拟环境&#xff1a; 1、安装virtualenv pip install virtualenv 2.创建新的虚拟环境&#xff1a; virtualenv myenv 3、激活虚拟环境&#xff08;激活环境可以在当前环境下安装包&#xff09; source myenv/bin/activate 此时&#xff0c;终端…...

编程新知 2026/1/14 23:22:31

恶补电源：1.电桥

一、元器件的选择 搜索并选择电桥&#xff0c;再multisim中选择FWB&#xff0c;就有各种型号的电桥: 电桥是用来干嘛的呢&#xff1f; 它是一个由四个二极管搭成的“桥梁”形状的电路&#xff0c;用来把交流电&#xff08;AC&#xff09;变成直流电&#xff08;DC&#xff09;。…...

编程新知 2026/1/14 23:22:38

jdbc查询mysql数据库时，出现id顺序错误的情况

我在repository中的查询语句如下所示&#xff0c;即传入一个List<intager>的数据&#xff0c;返回这些id的问题列表。但是由于数据库查询时ID列表的顺序与预期不一致&#xff0c;会导致返回的id是从小到大排列的&#xff0c;但我不希望这样。 Query("SELECT NEW com…...

编程新知 2026/1/15 6:09:01

【实施指南】Android客户端HTTPS双向认证实施指南

&#x1f510; 一、所需准备材料 证书文件&#xff08;6类核心文件&#xff09; 类型 格式 作用 Android端要求 CA根证书 .crt/.pem 验证服务器/客户端证书合法性 需预置到Android信任库 服务器证书 .crt 服务器身份证明 客户端需持有以验证服务器 客户端证书 .crt 客户端身份…...

编程新知 2025/9/15 14:56:23

【java面试】微服务篇

【java面试】微服务篇 一、总体框架二、Springcloud&#xff08;一&#xff09;Springcloud五大组件&#xff08;二&#xff09;服务注册和发现1、Eureka2、Nacos &#xff08;三&#xff09;负载均衡1、Ribbon负载均衡流程2、Ribbon负载均衡策略3、自定义负载均衡策略4、总结 …...

编程新知 2026/1/15 5:22:13

【笔记】AI Agent 项目 SUNA 部署 之 Docker 构建记录

#工作记录 构建过程记录 Microsoft Windows [Version 10.0.27871.1000] (c) Microsoft Corporation. All rights reserved.(suna-py3.12) F:\PythonProjects\suna>python setup.py --admin███████╗██╗ ██╗███╗ ██╗ █████╗ ██╔════╝…...

编程新知 2026/1/15 6:50:42