skong
/
html_css_demo
mirror of https://gitee.com/wyanhui02/html_css_demo.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

新增第249个小实例：纯CSS实现奥运五环

This commit is contained in:
DESKTOP-BM6RJU5\wyanh 2024-06-02 14:22:02 +08:00
parent 4a5c863562
commit 2ffb711355
3 changed files with 78 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -256,6 +256,7 @@
246. HTML5+CSS3小实例：可爱的卷纸开关
247. HTML5+CSS3+JS小实例：图片九宫格
248. HTML5+CSS3小实例：响应式漫画网格布局
249. HTML5+CSS3小实例：纯CSS实现奥运五环
#### 赞赏作者
![image](https://gitee.com/wyanhui02/html_css_demo/raw/master/images/%E8%B5%9E%E8%B5%8F%E4%BD%9C%E8%80%85/%E8%B5%9E%E8%B5%8F%E7%A0%81.jpg)

55
code/249/249.css Normal file
View File

@ -0,0 +1,55 @@
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #f5f5f5;
}
.rings{
position: relative;
z-index: -1;
}
.ring{
width: 200px;
height: 200px;
border-width: 20px;
border-style: solid;
border-radius: 100%;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -150px;
}
.ring-blue{
border-color: #1587c1;
transform: translateX(-110%);
}
.ring-yellow{
border-color: #fab23f;
transform: translate(-55%, 45%);
}
.ring-black{
border-color: #000;
transform: rotate(90deg);
}
.ring-green{
border-color: #1f8b3d;
transform: translate(55%, 45%) rotate(180deg);
z-index: 2;
}
.ring-red{
border-color: #eb3350;
transform: translateX(110%) rotate(90deg);
}
.ring-segment{
/* border-color: blue; */
border-bottom-color: transparent;
z-index: 3;
}

22
code/249/249.html Normal file
View File

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纯CSS实现奥运五环</title>
<link rel="stylesheet" href="249.css">
</head>
<body>
<div class="rings">
<div class="ring ring-blue"></div>
<div class="ring ring-yellow"></div>
<div class="ring ring-black"></div>
<div class="ring ring-green"></div>
<div class="ring ring-red"></div>
<div class="ring ring-blue ring-segment"></div>
<div class="ring ring-black ring-segment"></div>
<div class="ring ring-green ring-segment"></div>
<div class="ring ring-red ring-segment"></div>
</div>
</body>
</html>