CSS3画一个阴阳八卦图


Posted in HTML / CSS onMarch 09, 2021

CSS3画一个阴阳八卦图

<!-- HTML -->
<div id="yin_yang"></div>
#yin_yang {
	width: 96px;
	height: 48px;
	background: #eee;
	border-color: red;
	border-style: solid;
	border-width: 2px 2px 50px 2px;
	border-radius: 100%;
	position: relative;
}

#yin_yang:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	background: #eee;
	border: 18px solid red;
	border-radius: 100%;
	width: 12px;
	height: 12px;
}

#yin_yang:after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: red;
	border: 18px solid #eee;
	border-radius: 100%;
	width: 12px;
	height: 12px;
}

 

HTML / CSS 相关文章推荐
详解使用CSS3的@media来编写响应式的页面
Nov 01 HTML / CSS
HTML5和CSS3让网页设计提升到下一个高度
Aug 14 HTML / CSS
CSS3简单实现照片墙
Dec 12 HTML / CSS
CSS3实现自定义Checkbox特效实例代码
Apr 24 HTML / CSS
深入剖析webstorage[html5的本地数据处理]
Jul 11 HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
Sep 21 HTML / CSS
AmazeUI 平滑滚动效果的示例代码
Aug 20 HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
Sep 15 HTML / CSS
CSS3 制作精美的定价表
Apr 06 HTML / CSS
css中z-index: 0和z-index: auto的区别
Aug 23 HTML / CSS
HTML5 语义化标签(移动端必备)
Aug 23 HTML / CSS
基于CSS制作创意端午节专属加载特效
Jun 01 HTML / CSS
CSS中一些@规则的用法小结
Mar 09 #HTML / CSS
a标签的css样式四个状态
Mar 09 #HTML / CSS
详解CSS样式中的 !important * _ 符号
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
CSS心形加载的动画源码的实现
使用CSS3实现字体颜色渐变的实现
css动画效果之animation的常用样式
Mar 09 #HTML / CSS
You might like
php.ini中的php-5.2.0配置指令详解
2008/03/27 PHP
php 三维饼图的实现代码
2008/09/28 PHP
php excel reader读取excel内容存入数据库实现代码
2012/12/06 PHP
学习php设计模式 php实现命令模式(command)
2015/12/08 PHP
PHP在线书签系统分享
2016/01/04 PHP
tp5.1 框架数据库高级查询技巧实例总结
2020/05/25 PHP
仅Firefox中链接A无法实现模拟点击以触发其默认行为
2011/07/31 Javascript
js变换显示图片的实例
2013/04/16 Javascript
21个值得收藏的Javascript技巧
2014/02/04 Javascript
开发中可能会用到的jQuery小技巧
2014/03/07 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
2015/10/20 Javascript
深入浅析javascript立即执行函数
2015/10/23 Javascript
JS使用onerror捕获异常示例
2016/08/03 Javascript
Bootstrap Search Suggest使用例子
2016/12/21 Javascript
用jquery的attr方法实现图片切换效果
2017/02/05 Javascript
Angular实现下拉框模糊查询功能示例
2018/01/03 Javascript
一步步教你利用Docker设置Node.js
2018/11/20 Javascript
vue项目前端错误收集之sentry教程详解
2019/05/27 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
2019/09/07 Javascript
vue实现登录、注册、退出、跳转等功能
2020/12/23 Vue.js
深入理解Python3中的http.client模块
2017/03/29 Python
Python中用post、get方式提交数据的方法示例
2017/09/22 Python
python判断字符串是否是json格式方法分享
2017/11/07 Python
Python子类继承父类构造函数详解
2019/02/19 Python
PyTorch的SoftMax交叉熵损失和梯度用法
2020/01/15 Python
keras绘制acc和loss曲线图实例
2020/06/15 Python
如何基于pandas读取csv后合并两个股票
2020/09/25 Python
python 读取串口数据的示例
2020/11/09 Python
Bodum官网:咖啡和茶壶、玻璃器皿、厨房电器等
2018/08/01 全球购物
Chupi官网:在爱尔兰手工制作的订婚、结婚戒指和精美珠宝
2020/09/28 全球购物
葡萄牙语专业个人求职信
2013/12/10 职场文书
房产协议书范本
2014/10/18 职场文书
2015年财务试用期工作总结
2014/12/24 职场文书
德能勤绩廉个人总结
2015/02/14 职场文书
国王的演讲观后感
2015/06/03 职场文书
浅谈Python中的函数(def)及参数传递操作
2021/05/25 Python