HTML+CSS例子＞太极

<!DOCTYPE html>
<html><head lang="en"><meta charset="UTF-8"><title>太极</title><style>html,body {height: 100%;background-color: rgb(190, 184, 184);}* {margin: 0;padding: 0;}.box,.box1,.box2,.box11,.box12 {/* 圆形设置 */border-radius: 50%;}.box {width: 400px;height: 400px;margin: 50px auto;/* 半黑半白 */border-top: 200px solid #ffffff;border-bottom: 200px solid #000000;/* border-box 边框盒子，可以把边框和内边距计算到元素大小之内 */box-sizing: border-box;/* 阴影设置 */box-shadow: 0px 0px 15px rgb(255, 255, 255);}.box1,.box2 {width: 200px;height: 200px;/* 溢出隐藏 */overflow: hidden;/* margin-top: -100px; *//* display: inline-block; */}.box1,.box12 {background-color: #fff;}.box2,.box11 {background-color: rgb(0, 0, 0);}.box1 {/* 上移 */margin-top: -100px;}.box2 {/* margin-left: -5px; *//* 上移 */margin-top: -200px;/* 右移 */margin-left: 200px;}.box11,.box12 {/* 绝对定位 *//* position: absolute; */width: 50px;height: 50px;/* 右移 */margin-left: 75px;/* 下移 */margin-top: 75px;}</style>
</head><body><!-- 半黑半白的圆 --><div class="box"><!-- 上白 --><div class="box1"><div class="box11"></div></div><!-- 下黑 --><div class="box2"><div class="box12"></div></div></div>
</body></html>

运行效果：

HTML+CSS例子＞太极相关推荐

html5制作八卦图,使用HTML+CSS画太极八卦图
使用HTML+CSS画太极八卦图基本语法 CSS基本语法格式: 选择符{属性1:属性值1;属性2:属性值2;属性3:属性值3;......} 选择符: 1.元素选择器:找到同名一系列 2.类选择器: ...
python画太极八卦图_「太极八卦图」使用HTML+CSS画太极八卦图 - seo实验室
太极八卦图使用HTML+CSS画太极八卦图基本语法 CSS基本语法格式:选择符{属性1:属性值1;属性2:属性值2;属性3:属性值3;......} 选择符:1.元素选择器:找到同名一系列 2.类 ...
css实例——太极八卦图
css实例--太极八卦图分析: 可以看成是三个类型的圆组成,分别是大的圆,中等大小的圆,小的圆.这是一个整体的思路,具体的话就是去调整各个圆的位置 HTML代码部分 <!DOCTYPE htm ...
css3 太极动画,纯css实现太极阴阳鱼动画
原标题:纯css实现太极阴阳鱼动画今天看到一个有意思的效果,闲来无事做一个: 把2d静态的太极图改成了3d,阴极和阳极分到了两个平面里实现旋转效果,这个好实现,重点是实现它的透明效果,平面太极图显示 ...
使用HTML+CSS画太极八卦图
使用HTML+CSS画太极八卦图基本语法 CSS基本语法格式: 选择符{属性1:属性值1;属性2:属性值2;属性3:属性值3;......} 选择符: 1.元素选择器:找到同名一系列 2.类选择器: ...
使用css画太极,CSS画太极阴阳图
引言 CSS可以画很多图形,今天我们来画一个特殊的图形--中国古代哲学的"太极图". 如果没有用CSS画过简单图形,建议先学习如何用border属性画三角形. 构思步骤 1.在 ...
CSS制作太极八卦图及衍生物
CSS是网页设计师和前端人员需要了解和学习的一门语言,特别是现在很多网页使用扁平化设计,这类设计风格大部分布局.交互动画甚至是图标都会使用高级点的CSS3技能,所以我们应该熟练掌握CSS这门样式语言. ...
纯css实现太极阴阳鱼动画
昨天看到一个有意思的效果,闲来无事做一个: 把2d静态的太极图改成了3d,阴极和阳极分到了两个平面里实现旋转效果,这个好实现,重点是实现它的透明效果,平面太极图显示出两极是用另加的块元素挡住底面的颜色 ...
html css绘制太极,css画太极阴阳图
前言:道生一,一生二,二生三,三生万物今天,我们来聊聊如何用 CSS 实现太极图? 在网上可以找到很多资料,不过我强推荐一个css酷炫效果的网站,我们要实现一个阴阳图,谷歌搜索关键词:css t ...

HTML+CSS例子＞太极

HTML+CSS例子＞太极相关推荐

最新文章

热门文章