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动画(开启gpu加速)
Dec 23 HTML / CSS
一款恶搞头像特效的制作过程 利用css3和jquery
Nov 21 HTML / CSS
html+css3实现的登录界面
Dec 09 HTML / CSS
html5利用canvas绘画二级树形结构图的示例
Sep 27 HTML / CSS
Html5移动端弹幕动画实现示例代码
Aug 27 HTML / CSS
如何使用localstorage代替cookie实现跨域共享数据问题
Apr 18 HTML / CSS
使用phonegap获取设备的一些信息方法
Mar 31 HTML / CSS
HTML5实现可缩放时钟代码
Aug 28 HTML / CSS
canvas离屏技术与放大镜实现代码示例
Aug 31 HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
Apr 23 HTML / CSS
关于canvas.toDataURL 在iOS运行失败的问题解决
Sep 16 HTML / CSS
纯 CSS 自定义多行省略的问题(从原理到实现)
Nov 11 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开发大型项目的一点经验
2006/10/09 PHP
深入PHP获取随机数字和字母的方法详解
2013/06/06 PHP
详解PHP5.6.30与Apache2.4.x配置
2017/06/02 PHP
Yii框架的路由配置方法分析
2019/09/09 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
xmlHTTP实例
2006/10/24 Javascript
javascript 对象定义方法 简单易学
2009/03/22 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
2013/04/25 Javascript
jquery实现人性化的有选择性禁用鼠标右键
2014/06/30 Javascript
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
2015/04/25 Javascript
小白谈谈对JS原型链的理解
2016/05/03 Javascript
使用Require.js封装原生js轮播图的实现代码
2017/06/15 Javascript
vue基于Element构建自定义树的示例代码
2017/09/19 Javascript
vue的安装及element组件的安装方法
2018/03/09 Javascript
Angularjs Promise实例详解
2018/03/15 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
2018/08/30 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
2018/12/03 Javascript
微信小程序实现两个页面传值的方法分析
2018/12/11 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
2019/03/13 Javascript
VUE前后端学习tab写法实例
2019/08/06 Javascript
JavaScript和TypeScript中的void的具体使用
2019/09/12 Javascript
Python常用小技巧总结
2015/06/01 Python
python3制作捧腹网段子页爬虫
2017/02/12 Python
python读取.mat文件的数据及实例代码
2019/07/12 Python
Python中使用threading.Event协调线程的运行详解
2020/05/02 Python
巴西图书和电子产品购物网站:Saraiva
2017/06/07 全球购物
乌克兰排名第一的在线旅游超市:Farvater.Travel
2020/01/02 全球购物
JD Sports澳洲官网:英国领先的运动鞋和运动时尚零售商
2020/02/15 全球购物
环境保护与污染治理求职信
2014/07/16 职场文书
六查六看心得体会
2014/10/14 职场文书
小学教育见习报告
2014/10/31 职场文书
家属答谢词
2015/01/05 职场文书
超市食品安全承诺书
2015/04/29 职场文书
医院病假条范文
2015/08/17 职场文书
Python并发编程实例教程之线程的玩法
2021/06/20 Python
MySQL 那些常见的错误设计规范,你都知道吗
2021/07/16 MySQL