CSS实现太极图（1个div实现）
使用一个div实现太极图的步骤如下：
HTML部分：
<body>
<div class="box-taiji">
</div>
</body>
第一步，结合border实现左黑右白的正方形，加上圆角、阴影。代码如下;
.box-taiji{
width:;
height:300px;
position:relative;
margin: 50px auto;
border-left:150px solid #000;
border-right:150px solid #fff;
box-shadow: 0 0 30px rgba(0,0,0,0.5);
border-radius: 300px;
}
效果如下：
第二步，通过伪类，实现一个一个白色的圆形，定位好位置。同时，利用box-shadow:0 200px 0 #000;实现同样大小的圆，放好。
.box-taiji:after{
width:150px;
height:150px;
position:absolute;
content: '';
display: block;
top:;
left:-75px;
z-index:;
background-color: #fff;
border-radius:50%;
box-shadow:0 150px 0 #000;
}
先后实现的效果如下：
第三步，同样第二步一样的原理，再实现黑白两个圆，放到相关的位置。
.box-taiji:before {
content:'';
position:absolute;
display: block;
width:75px;
height:75px;
top:38px;
left:-38px;
z-index:;
background-color:#000;
border-radius:50%;
box-shadow:0 150px 0 #fff;
}
最终效果如下：
和用上一篇3个div实现太极图一样，我们也可以通过CSS3动画实现旋转太极图。
CSS实现太极图（1个div实现）的更多相关文章
- 利用css如何让嵌套的div层不继承父div层的透明度？
http://zhidao.baidu.com/link?url=cvQhh0Q7_ah0qg9tc-2zP0cjB_PoIiIq6t6RFpp4aZPPNoVJUqyy7TT41TU5pWzRtRY ...
- div+css 怎么让一个小div在另一个大div里面 垂直居中
div+css 怎么让一个小div在另一个大div里面 垂直居中 方法1: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 .parent { width:800 ...
- CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法
CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法 平时我们布局时候,有的文字内容多了会超过溢出我们限制的高度,有的图片会撑破DIV,让网页错位变乱. 这样我们就需要解决如何使用CSS来超出设 ...
- CSS+HTML实现移动端div左右滑动展示
由于手机屏幕的宽度有限,内容太多移动设备一行装不下的,所以很多移动端网站的导航栏都有左右滑动效果,下面我就用CSS+HTML实现移动端div左右滑动展示. CSS:box设置文本不换行,子元素box1 ...
- Div+Css画太极图源代码
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>D ...
- CSS实现太极图（3个div实现）
使用三个div实现太极图的步骤如下: HTML部分 <div class="box"> <div class="yin"></di ...
- 【DIV+CSS】代码作业练习DIV+CSS太极阴阳图
1. DIV + CSS 练习:太极阴阳图. 基本思路:由三个div块元素组成: #taiji太极阴阳图底面 #yin太极阴阳图阴面小圆 #yang太极阴阳图阳面小圆 (太极阴阳图:上为阳下 ...
- CSS选择器、标签，div的位置。
今天是休假,布置了一个作业,是利用CSS制作斯坦福大学官网.虽然是一个并不复杂的制作,却让我第一次体会到了想摔鼠标的感觉. 遇到了很多问题,却找不出自己到底是哪里出了问题,简简单单的一个logo.足足 ...
- [css]display: table-cell，用div做分列布局
table-cell我们却能用得到,而且是用它来干一件很重要的事情——多列布局. 多列布局在css中有多重要就不用我说了吧,传统模式下大家都使用float来解决这一问题,但是float写出来的东西代码 ...
随机推荐
- 阿里云服务器之hexo环境搭建
上一步主要主要讲解云服务器购买和连接云服务器,以及文件的操作.本文主要讲解利用hexo搭建自己的静态博客,在服务器中建立自己的hexo博客环境,最后达到可以远程访问,以及远程git推送到github. ...
- Oracle to_char的用法
The following are number examples for the to_char function. to_char(1210.73, '9999.9') would return ...
- Java最常见的200+面试题及自己梳理的答案--面试必备（一）
昨天在今日头条上看到一份所谓经常面别人的TL梳理的面试题,看着比较完善,但是,没有对应的答案,自己看着研究学习了下,顺带梳理下答案.主要包括以下模块:Java基础.容器.多线程.反射.对象拷贝.Jav ...
- leetcode-49-字母异位词分组（神奇的哈希）
题目描述: 给定一个字符串数组,将字母异位词组合在一起.字母异位词指字母相同,但排列不同的字符串. 示例: 输入: ["eat", "tea", "t ...
- ADC新库
1.单次采集模式 1.在STM32CUBMX中设置为单次采集模式 2.在C文件中用HAL_ADC_START()函数启动ADC 3.用HAL_ADC_PollForConversion()延时等待采集 ...
- Java NIO学习与记录（一）：初识NIO
初识 工作中有些地方用到了netty,netty是一个NIO框架,对于NIO却不是那么熟悉,这个系列的文章是我在学习NIO时的一个记录,也期待自己可以更好的掌握NIO. 一.NIO是什么? 非阻塞式I ...
- [JZOJ6088] [BZOJ5376] [loj #2463]【2018集训队互测Day 1】完美的旅行【线性递推】【多项式】【FWT】
Description Solution 我们考虑将问题一步步拆解 第一步求出\(F_{S,i}\)表示一次旅行按位与的值为S,走了i步的方案数. 第二步答案是\(F_{S,i}\)的二维重复卷积,记 ...
- python爬虫常用之Scrapy 简述
一.安装 pip install scrapy. 如果提示需要什么包就装什么包 有的包pip安装不起,需要自己下载whl文件进行安装. 二.基本的爬虫流程 通用爬虫有如下几步: 构造url --> ...
- centos 7 网站前端中文乱码分析、解决办法
2019-03-28 1.网站前端中文文字乱码主要原因有两点: (1)mysql数据库内部存储的数据本身处于乱码状态 (2)前端与数据库传输数据的字符集与数据库内部字符集不一致导致 2.查找造成中文乱 ...
- JS框架设计之对象类型判断一种子模块
Javascript有两套数据类型,一套是基础数据类型,一套是对象数据类型.基础数据类型包括5种基本数据类型,分别是null,bool,undefined,number,string,也叫简单数据类型 ...