css3 如何画太极和奥运五环

太极

首先要明白太极的原理，如果手动去画一个太极应该怎么画

如下图是一个不完整的太极但说明了其组成

最终效果图：

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">body {background-color: #e5e5e5;}.container {width: 400px;height: 400px;margin: 0 auto;border-radius: 50%;background-color: gray;overflow: hidden;position: relative;}.item {width: 50%;height: 100%;             }.item1 {float: left;background-color: #000;}.item2 {float: right;background-color: #fff;}.top , .bottom {width: 50%;height: 50%;position: absolute;background-color: red;left: 25%;border-radius: 50%;text-align: center;line-height: 200px;}.top {background-color: #000;}.bottom {top: 50%;background-color: #fff;}.yin , .yang {width: 20%;height: 20%;background: red;border-radius: 50%;display: inline-block;}.yin {background-color: #000;}.yang {background-color: #fff;}</style></head><body><div class="container"><div class="item item1"></div><div class="item item2"></div><div class="top"><div class="yang">                    </div></div><div class="bottom"><div class="yin"></div></div>         </div></body>
</html>

五环

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.big {width: 600px;height: 500px;margin: 0 auto;background-color: darkgray;position: relative;}.item {width: 150px;height: 150px;border: 20px solid red;border-radius: 50%;position: absolute;}.item1 {}.item2 {left: 190px;border-color: blue;}.item3 {left: 380px;border-color: green;}.item4 {border-color: yellow;top:100px;left:90px;}.item5 {border-color: black;top:100px;left: 290px;}.child {width: 150px;height: 150px;border-radius: 50%;position: absolute;}.item1-child {border-right: 20px solid red;z-index: 1;}.item2-child {border-bottom: 20px solid blue;z-index: 3;}.item2-child2 {border-right: 20px solid blue;z-index: 5;}.item3-child {border-bottom: 20px solid green;z-index: 2;}.item5-child {left: -20px;border-left: 20px solid black;z-index: 4;}</style></head><body><div class="big"><div class="item item1"><div class="child item1-child"></div></div><div class="item item2"><div class="child item2-child"></div><div class="child item2-child2"></div></div><div class="item item3"><div class="child item3-child"></div></div><div class="item item4"><div class="child item4-child"></div></div><div class="item item5"><div class="child item5-child"></div></div></div></body>
</html>

效果图如下：

css3 如何画太极和奥运五环相关推荐

Android 自定义View 画圆（奥运五环）
效果图前言你会画画吗?你会写代码吗?你会用代码画画吗? 正文自定义View,实际开发过程中,因为涉及用户体验的时候,UI通常会弄一些骚操作出来,这个时候就有两个选择,你是用GIF呢?还是自己自定 ...
用Python画环环相扣的奥运五环
要实现五环环环相扣,我采取的方法就是先画半圆,根据五环重叠顺序,确定半圆生成顺序! 具体代码如下: c=['blue','black','red','yellow','green'] t.pensiz ...
Python画糖葫芦和奥运五环
糖葫芦 import turtle #调用画笔 t=turtle.Pen() #画笔速度 turtle.speed(2) #画线颜色 turtle.pencolor('blue') #线的宽度 tur ...
css3圆角实现奥运五环标志
在 <a target=_blank target="_blank" href="http://www.phpernote.com/web_tools/privat ...
python画画需要什么模块_python实战练手项目---使用turtle模块画奥运五环
python实战练手项目---使用turtle模块画奥运五环 2020年将举办东京奥运会,本篇实践文章将带你使用turtle模块画一个五环图,先来看效果图 1. 定义一个类继承Turtle class ...
python_海龟绘图_画出奥运五环图---python工作笔记014
然后我们再用海龟绘图去,画个奥运五环去新建一个文件首先引入turtle海龟绘图程序包
如何用python turtle 画出奥运五环图
import turtle as t #用t替代turtle t.hideturtle() #隐藏画笔 t.speed(0) #画笔的速度在0-10整数 t. ...
canvas画奥运五环 2019/10/29
在HbuilderX中用canvas画一个奥运五环. 先用arc画出五个圆环,画布是后画的图形在顶层,再根据圆环相互串压的顺序,新添同心圆笔画,就能画出五环相互勾连的样子了. 基本完成任务,效果简陋, ...
用turtle画奥运五环
#奥运五环 import turtle as t t.pensize(25) #设置画笔粗细 t.bgcolor('orange') #设置背景颜色 #t.tracer(False)t.penup() ...

css3 如何画太极和奥运五环

css3 如何画太极和奥运五环相关推荐

最新文章

热门文章

css3 如何画太极 和 奥运五环

css3 如何画太极 和 奥运五环相关推荐

最新文章

热门文章

css3 如何画太极和奥运五环

css3 如何画太极和奥运五环相关推荐