纯HTML+CSS 画奥运五环标志，我就是闲的
2024-06-13 18:45:21
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><link rel="stylesheet" href="css/css01a.css"><title>我就是玩一玩 纯HTML+CSS实现奥运五环标 By Bouncing</title>
</head>
<body>
<div class="baseStation"><div class="c1-a"><div class="c1-b"><div class="c1-c"></div></div></div><div class="c1-a2"><div class="c1-b2"><div class="c1-c2"></div></div></div><div class="c2-a"><div class="c2-b"><div class="c2-c"></div></div></div><div class="c2-a2"><div class="c2-b2"><div class="c2-c2"></div></div></div><div class="c3-a"><div class="c3-b"><div class="c3-c"></div></div></div><div class="c3-a2"><div class="c3-b2"><div class="c3-c2"></div></div></div><div class="c4-a"><div class="c4-b"><div class="c4-c"></div></div></div><div class="c5-a"><div class="c5-b"><div class="c5-c"></div></div></div><div class="c5-a2"><div class="c5-b2"><div class="c5-c2"></div></div></div></div></body>
</html>*{margin: 0px;padding: 0px;
}body{background-color: #c2c2c2;
}.baseStation{position: absolute;left: 50%;top: 50%;margin-left: -395px;margin-top: -185px;width: 788px;height: 368px;/*border: 1px solid #c5c1b9;*/
}.c1-a, .c1-b, .c1-c, .c1-a2, .c1-b2, .c1-c2, .c2-a, .c2-b, .c2-c, .c2-a2, .c2-b2, .c2-c2, .c3-a, .c3-b, .c3-c, .c3-a2, .c3-b2, .c3-c2, .c4-a, .c4-b, .c4-c, .c5-a, .c5-b, .c5-c, .c5-a2, .c5-b2, .c5-c2
{border-radius: 50%;
}.c1-a{position: absolute;border: 4px solid #FFF;
}
.c1-a2{position: absolute;border: 4px solid transparent;border-right-color: #fff;z-index: 5;
}
.c2-a{position: absolute;border: 4px solid #FFF;left: 270px;
}
.c2-a2{position: absolute;border: 4px solid transparent;border-bottom-color: #FFF;border-right-color: #FFF;left: 270px;z-index: 4;
}
.c3-a{position: absolute;border: 4px solid #FFF;left: 540px;
}
.c3-a2{position: absolute;border: 4px solid transparent;border-bottom-color: #FFF;left: 540px;z-index: 6;
}
.c4-a{position: absolute;border: 4px solid #FFF;left: 136px;top: 120px;
}
.c5-a{position: absolute;border: 4px solid #FFF;left: 406px;top: 120px;
}
.c5-a2{position: absolute;border: 4px solid transparent;border-left-color: #FFF;left: 406px;top: 120px;z-index: 5;
}.c1-b{width: 200px;height: 200px;border: 20px solid #0018c5;
}
.c1-b2{width: 200px;height: 200px;border: 20px solid transparent;border-right-color: #0018c5;
}
.c2-b{width: 200px;height: 200px;border: 20px solid #000000;z-index: 0;
}
.c2-b2{width: 200px;height: 200px;border: 20px solid transparent;border-bottom-color: black;border-right-color: black;
}
.c3-b{width: 200px;height: 200px;border: 20px solid #ff0000;
}
.c3-b2{width: 200px;height: 200px;border: 20px solid transparent;border-bottom-color: #ff0000;
}
.c4-b{width: 200px;height: 200px;border: 20px solid #c6b300;
}
.c5-b{width: 200px;height: 200px;border: 20px solid #008000;
}
.c5-b2{width: 200px;height: 200px;border: 20px solid transparent;border-left-color: #008000;
}.c1-c{width: 192px;height: 192px;border: 4px solid #FFF;
}
.c1-c2{width: 192px;height: 192px;border: 4px solid transparent;border-right-color: #FFF;
}
.c2-c{width: 192px;height: 192px;border: 4px solid #FFF;
}
.c2-c2{width: 192px;height: 192px;border: 4px solid transparent;border-bottom-color: #FFF;border-right-color: #FFF;
}
.c3-c{width: 192px;height: 192px;border: 4px solid #FFF;
}
.c3-c2{width: 192px;height: 192px;border: 4px solid transparent;border-bottom-color: #FFF;
}
.c4-c,
.c5-c{width: 192px;height: 192px;border: 4px solid #FFF;
}
.c5-c2{width: 192px;height: 192px;border: 4px solid transparent;border-left-color: #FFF;
}
纯HTML+CSS 画奥运五环标志，我就是闲的相关推荐
- css3圆角实现奥运五环标志
在 <a target=_blank target="_blank" href="http://www.phpernote.com/web_tools/privat ...
- python画画需要什么模块_python实战练手项目---使用turtle模块画奥运五环
python实战练手项目---使用turtle模块画奥运五环 2020年将举办东京奥运会,本篇实践文章将带你使用turtle模块画一个五环图,先来看效果图 1. 定义一个类继承Turtle class ...
- 04_turtle画奥运五环
4.turtle画奥运五环 # 绘制奥运五环 import turtleturtle.width(10)#画笔宽度turtle.color("blue")# 颜色蓝色 turtle ...
- 使用turtle来画奥运五环使用turtle进行图形化的程序设计来绘制自己想要的图形
使用turtle进行图形化的程序设计. showturtle()显示箭头 write()书写一段字符串在屏幕上 forward(px)向前运动,px是运动像素距离 backward(px)向后运动,p ...
- python秒画奥运五环
龟叔大法 python一秒画奥运五环 import turtle as tldef drawCircle(orgin,destination,color,radius):tl.width(6)tl.s ...
- canvas画奥运五环 2019/10/29
在HbuilderX中用canvas画一个奥运五环. 先用arc画出五个圆环,画布是后画的图形在顶层,再根据圆环相互串压的顺序,新添同心圆笔画,就能画出五环相互勾连的样子了. 基本完成任务,效果简陋, ...
- 用turtle画奥运五环
#奥运五环 import turtle as t t.pensize(25) #设置画笔粗细 t.bgcolor('orange') #设置背景颜色 #t.tracer(False)t.penup() ...
- 如何用Python画奥运五环——circle（）
奥运五环主要运用了circle()来画图,每画一个圆圈,换一种颜色. 代码如下: import turtleturtle.speed(1) turtle.pencolor('blue') turtle ...
- 1.1 Python中turtle的使用(画奥运五环)
turtle(海龟绘图)的使用教程 Turtle库是Python语言中一个很流行的绘制图像的函数库,想象一个小乌龟,在一个横轴为x.纵轴为y的坐标系原点,(0,0)位置开始,它根据一组函数指令的控制, ...
最新文章
- 手写java_手写JAVA虚拟机(二)——实现java命令行
- 傅里叶(FFT)+小波变换+数据压缩
- 光模块价格由带宽还是距离决定_光纤视频收发产品的光模块选型
- python爬虫从入门到放弃（三）之 Urllib库的基本使用
- 【接口测试】【postman】postman通过脚本获取Token并自动加入请求头实现Token的参数化
- hwt字体转换ttf_五分钟教你弄懂了字体反爬是个啥
- 使用Electron将Web项目打包成windows桌面应用
- c#中是否有javascript中的jQuery类库？
- ApacheCN 活动汇总 2019.7.12
- ps 图片 透明度 设置
- halcon修改图像的灰度值02
- Windows与linux开发板文件传输和固件更新工具——tftpd32软件操作说明
- 大众-OBD-接口位置
- 【百度】怎么使用cookie登陆百度账号
- yii2实现后端分页和模糊查询
- 修改 Zotero 参考文献格式
- 利用photoshop cs5新增功能之“智能填充
- Springboot中对jpa动态查询条件的封装
- 重磅！华为宣布起诉美国政府
- 灰色GM（1,1）模型及其在电力负荷预测中的应用附Matlab代码