太极图(HTML+CSS)，无动态效果

今天作作业时遇到了一题，刚开始进入了误区，后来最后通过看大佬们的心血总结我搞出来了

刚开始我的思路是

1.先设置圆，分别为黑色的圆和白色的圆

2.在用两个长方形通过background：color；进行遮挡

3.同理然后通过设计两个稍小点的半圆和最小的半圆来达到目的

4.然后我发现两个半圆不能同时出现，然后第2部我就卡死了

然后我看大佬的心血总结，发现我忘了一个知识点，正方形是可以分别通过四角进行羽化的，仅仅只需要一个border-top-left-radius分别进行羽化，然后我的思路如下：

1.把这个圆看成两个长方体进行羽化而来，然后我们给它分别调成黑白两色

2.然后再写两个稍微小点的圆，通过绝对定位，把这两个圆进行调整，白色放在下边，黑色放在上边,只留一半的部分

3.再写两个最小的圆，分别上图中就行了

代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>太极</title><style>*{margin: 0;padding: 0;}.bj{width: 1000px;height: 500px;background-color: rgb(212, 209, 209);margin: 50px;position: relative;left: 0px;top: 0px;}.tj{width: 200px;height: 200px;/* border: 1px solid black; */position:absolute;top: 50px;border-radius: 50%;left: 400px;}.lf{width: 100px;height: 200px;position: absolute;background-color: white;border-top-left-radius: 100px;border-bottom-left-radius: 100px;}.rf{width: 100px;height: 200px;position: absolute;left: 100px;background-color: black;border-top-right-radius: 100px;border-bottom-right-radius: 100px;}.a1{width: 100px;height: 100px;background-color: white;position: absolute;border-radius: 50%;top: 0px;left: 50px;}.b1{width: 25px;height: 25px;background-color: black;position:absolute;border-radius: 50%;top: 37.5px;left: 50px;}.a2{width: 100px;height: 100px;background-color: rgb(0, 0, 0);position: absolute;border-radius: 50%;top: 100px;left: 50px;}.b2{width: 25px;height: 25px;background-color: white;position:absolute;border-radius: 50%;top:37.5px;left: 50px;}</style>
</head>
<body><div class="bj"><div class="tj"><div class="lf"></div><div class="rf"></div><div class="a1"><div class="b1"></div></div><div class="a2"><div class="b2"></div></div></div></div>
</body>
</html>

太极图(HTML+CSS)，无动态效果相关推荐

绘制太极图（CSS）
绘制太极图(CSS) 预览图思路 html布局代码部分 CSS样式部分 Hello!大家好,这里是万物之恋.今天给大家带来的是CSS3动画制作一个旋转的太极图案. 预览图貌似有些卡顿是录制软件的 ...
网站性能优化之CSS无图片技术
一.无图片技术定义在不使用CSS Image(通过CSS的引入的背景图片,不包括img标签内的图片)情况下生成类似图片效果的技术:换句话的意思就是在使用纯CSS生成类似图片效果的技术. 二.为什么要 ...
纯CSS无表达式实现图片等比缩放（支持IE7及以上）
在制作网页的时候,常常会遇到一种情况,我们需要把一些未知尺寸的图片放在一个固定宽高的容器中,这时候我们需要考虑这样的问题: 只给图片设置宽度或高度的其中一项可以实现图片等比缩放,但图片可能超出容器大小 ...
用html和css画太极图,利用css画一个太极图(阴阳八卦)实例
这篇文章介绍利用css画一个太极图(阴阳八卦)实例 #yin-yang { width: 96px; height: 48px; background: #eee; border-color: red ...
网页/前端大作业 html+css 无js 前端三剑客大一网页大作业 9个页面
index界面登录/迎接界面 html部分 <html><head><meta charset="utf-8"><title>我只 ...
纯CSS无hacks的跨游览器多列布局(转)
转自:http://www.cnblogs.com/rubylouvre/archive/2009/07/15/1523683.html 翻译自Matthew James Taylor的Equal H ...
纯CSS无hacks的跨游览器多列布局
利用纯CSS创建一个等高多列的布局并不件易事,本教程将着重分析出现在多列布局的多个问题,然后为大家等来一个简单全游览器通吃的解决方法,不使用图片,脚本,CSS hacks并在最严格的XHTML 规范中 ...
太极图HTML+CSS（可旋转）
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>太极旋 ...
css图片加载没有效果,CSS 无图片显示加载(失败)效果
lazyload 时利用 iconfont 显示加载图片和加载失败效果 0. 效果 1. 显示加载中或者品牌图可以是文字或者 iconfont, 并将图标显示到正中间 HTML 结构如下: .img ...

太极图(HTML+CSS)，无动态效果

太极图(HTML+CSS)，无动态效果相关推荐

最新文章

热门文章