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

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

news 2026/2/10 10:44:33

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

TDengine 快速体验（Docker 镜像方式）

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能&#xff0c;本节首先介绍如何通过 Docker 快速体验 TDengine&#xff0c;然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker&#xff0c;请使用 安装包的方式快…...

编程新知 2026/2/8 20:41:53

3.3.1_1 检错编码（奇偶校验码）

从这节课开始&#xff0c;我们会探讨数据链路层的差错控制功能&#xff0c;差错控制功能的主要目标是要发现并且解决一个帧内部的位错误&#xff0c;我们需要使用特殊的编码技术去发现帧内部的位错误&#xff0c;当我们发现位错误之后&#xff0c;通常来说有两种解决方案。第一…...

编程新知 2026/1/30 3:28:14

linux 下常用变更-8

1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行&#xff0c;YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID&#xff1a; YW3…...

编程新知 2025/10/7 15:08:22

微信小程序云开发平台MySQL的连接方式

注&#xff1a;微信小程序云开发平台指的是腾讯云开发 先给结论&#xff1a;微信小程序云开发平台的MySQL&#xff0c;无法通过获取数据库连接信息的方式进行连接&#xff0c;连接只能通过云开发的SDK连接&#xff0c;具体要参考官方文档&#xff1a; 为什么&#xff1f; 因为…...

编程新知 2026/2/1 5:24:17

让AI看见世界：MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...

编程新知 2026/1/31 11:13:53

智能仓储的未来：自动化、AI与数据分析如何重塑物流中心

当仓库学会“思考”&#xff0c;物流的终极形态正在诞生 想象这样的场景&#xff1a; 凌晨3点&#xff0c;某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径&#xff1b;AI视觉系统在0.1秒内扫描包裹信息&#xff1b;数字孪生平台正模拟次日峰值流量压力…...

编程新知 2026/2/1 2:49:30

毫米波雷达基础理论（3D+4D）

3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识 主要参考博文&#xff1a; 一文入门汽车毫米波雷达基本原理 &#xff1a;https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...

编程新知 2026/1/31 14:20:10

Matlab实现任意伪彩色图像可视化显示

Matlab实现任意伪彩色图像可视化显示 1、灰度原始图像2、RGB彩色原始图像 在科研研究中&#xff0c;如何展示好看的实验结果图像非常重要&#xff01;&#xff01;&#xff01; 1、灰度原始图像 灰度图像每个像素点只有一个数值&#xff0c;代表该点的​​亮度&#xff08;或…...

编程新知 2026/2/7 2:14:33

uni-app学习笔记三十五--扩展组件的安装和使用

由于内置组件不能满足日常开发需要&#xff0c;uniapp官方也提供了众多的扩展组件供我们使用。由于不是内置组件&#xff0c;需要安装才能使用。 一、安装扩展插件 安装方法&#xff1a; 1.访问uniapp官方文档组件部分&#xff1a;组件使用的入门教程 | uni-app官网 点击左侧…...

编程新知 2026/2/6 5:51:39

Spring AOP代理对象生成原理

代理对象生成的关键类是【AnnotationAwareAspectJAutoProxyCreator】&#xff0c;这个类继承了【BeanPostProcessor】是一个后置处理器 在bean对象生命周期中初始化时执行【org.springframework.beans.factory.config.BeanPostProcessor#postProcessAfterInitialization】方法时…...

编程新知 2026/2/6 22:31:04