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

css手写奥运五环

news 2026/6/3 19:58:03

完整代码

<!DOCTYPEhtml><htmllang="zh-CN"><head><!-- 文档类型声明 --><metacharset="UTF-8"><!-- 字符编码设置为UTF-8 --><metaname="viewport"content="width=device-width, initial-scale=1.0"><!-- 响应式设计设置 --><title>奥运五环</title><!-- 页面标题 --></head><body><!-- 奥运五环容器 --><divclass="olympic-rings"><!-- 蓝色环 --><divclass="ring blue"></div><!-- 黑色环 --><divclass="ring black"></div><!-- 红色环 --><divclass="ring red"></div><!-- 黄色环 --><divclass="ring yellow"></div><!-- 绿色环 --><divclass="ring green"></div></div></body><stylelang="css">/* 全局样式重置 */*{margin:0;padding:0;box-sizing:border-box;}/* 页面主体样式 */body{display:flex;/* 使用flex布局 */justify-content:center;/* 水平居中 */align-items:center;/* 垂直居中 */height:100vh;/* 高度为视口高度 */background-color:#f5f5f5;/* 背景颜色 */}/* 奥运五环容器：相对定位，用于承载五个环形元素 */.olympic-rings{position:relative;/* 相对定位，便于子元素绝对定位 */width:400px;/* 容器宽度，确保五环水平排布空间 */height:200px;/* 容器高度，确保上下两行环的垂直空间 */transform-style:preserve-3d;/* 保持3D变换效果，为后续可能的3D动画预留 */}/* 环形基础样式 */.ring{width:120px;/* 环的宽度 */height:120px;/* 环的高度 */border:10px solid;/* 环的边框宽度和样式 */border-radius:50%;/* 圆角设置为50%，形成圆形 */position:absolute;/* 绝对定位，便于精确定位每个环 */}/* 蓝色环样式 */.ring.blue{border-color:#0085ca;/* 蓝色环的颜色 */top:0;/* 顶部位置 */left:0;/* 左侧位置 */}/* 黄色环样式 */.ring.yellow{border-color:#fdb813;/* 黄色环的颜色 */top:60px;/* 顶部位置（第二行） */left:70px;/* 左侧位置 */transform:rotateX(6deg);/* X轴旋转，增加立体感 */transform-origin:center 25%;/* 旋转原点设置 */}/* 黑色环样式 */.ring.black{border-color:#000000;/* 黑色环的颜色 */top:0;/* 顶部位置 */left:130px;/* 左侧位置 */}/* 绿色环样式 */.ring.green{border-color:#00b140;/* 绿色环的颜色 */top:60px;/* 顶部位置（第二行） */left:200px;/* 左侧位置 */transform:rotateX(6deg);/* X轴旋转，增加立体感 */transform-origin:center 25%;/* 旋转原点设置 */}/* 红色环样式 */.ring.red{border-color:#e6193c;/* 红色环的颜色 */top:0;/* 顶部位置 */left:260px;/* 左侧位置 */}</style></html>

实现效果

主要使用 transform-style: preserve-3d; /* 保持3D变换效果，为后续可能的3D动画预留 */ transform: rotateX(6deg); /* X轴旋转，增加立体感 */ transform-origin: center 25%; /* 旋转原点设置 */

奥运五环代码要点讲解

1. 整体结构

这段代码使用了HTML5和内联CSS实现了奥运五环的经典设计，主要包含两个部分：

HTML结构：创建了基本的文档结构和五环容器
CSS样式：实现了五环的布局、样式和交互效果

2. HTML结构要点

<divclass="olympic-rings"><divclass="ring blue"></div><divclass="ring black"></div><divclass="ring red"></div><divclass="ring yellow"></div><divclass="ring green"></div></div>

使用了语义化的class命名，清晰标识每个元素的作用
五环的顺序按照蓝、黑、红、黄、绿排列，符合标准奥运五环的布局
每个环都是一个独立的div元素，便于单独控制样式

3. CSS样式要点

3.1 全局样式重置

*{margin:0;padding:0;box-sizing:border-box;}

重置了所有元素的默认边距和内边距
使用box-sizing: border-box确保元素尺寸计算方式一致

3.2 页面布局

body{display:flex;justify-content:center;align-items:center;height:100vh;background-color:#f5f5f5;}

使用Flexbox布局实现页面居中
设置height: 100vh使页面占满整个视口高度
选择了浅灰色背景，使五环更加突出

3.3 五环容器

.olympic-rings{position:relative;width:400px;height:200px;transform-style:preserve-3d;}

使用position: relative作为子元素绝对定位的参考
固定容器尺寸，确保五环布局稳定
添加transform-style: preserve-3d为后续可能的3D动画做准备

3.4 环形基础样式

.ring{width:120px;height:120px;border:10px solid;border-radius:50%;position:absolute;}

核心技术点：使用border-radius: 50%创建圆形
固定环的尺寸为120x120px，边框宽度10px
使用position: absolute实现精确定位

3.5 颜色环样式

.ring.blue{border-color:#0085ca;top:0;left:0;}.ring.yellow{border-color:#fdb813;top:60px;left:70px;transform:rotateX(6deg);transform-origin:center 25%;}/* 其他颜色环类似 */