CSS实现太极图(3个div实现)
使用三个div实现太极图的步骤如下:
HTML部分
<div class="box">
<div class="yin"></div>
<div class="yang"></div>
</div>
第一步,画一个宽高为300px的圆,并为其加上阴影(为了看起来有立体感)
.box{
width:300px;
height:300px;
margin:50px auto;
position:relative;
box-shadow:0 0 50px rgba(0,0,0,.8);
background: #000;
border-radius: 50%;
/*下面为实现旋转时所需代码*/
/*animation:rotation 2.5s linear infinite;
-webkit-animation:rotation 2.5s linear infinite;
-moz-animation:rotation 2.5s linear infinite;*/
}
出来的效果如下:
第二步,利用伪类实现左右两个半圆,一黑一白。宽为150px,高为300px;(这里我先设置为红蓝两色)
.box:before,
.box:after{
content:'';
display: block;
width:150px;
height:300px;
/*position:absolute;*/
/*top:0;*/
}
.box:before{
border-radius:150px 0 0 150px;
background-color: red;
left:;
}
.box:after{
border-radius:0 150px 150px 0;
background-color: blue;
/*right: 0;*/
}
在没有进行定位时,效果如下:
通过定位可以实现底图的阴阳分隔效果。
第三步,依次画两个宽高都为200px的圆,一黑一白。上下定位。
.yin,.yang{
position: absolute;
width:150px;
height:150px;
border-radius: 50%;
left:75px;
z-index:;
}
.yin{
background:#000;
top:;
}
.yang{
background: #fff;
top:150px;
}
其效果如下:
第四步,利用伪类实现最小的两个黑白小圆,并通过定位实现布局效果。
.yin:after,.yang:after{
width:75px;
height:75px;
border-radius: 50%;
position: absolute;
z-index:;
display: block;
content: '';
left:25%;
top:25%;
}
.yin:after{
background:#fff;
}
.yang:after{
background: #000;
}
将底图样色做相应修改,得到最终效果如下:
绘制出太极图后我们可以通过CSS3中的@keyframes、animation动画实现旋转的太极图,具体代码如下:
@keyframes rotation {
0% {transform:rotate(0deg);}
100% {transform:rotate(360deg);}
}
@-webkit-keyframes rotation {
0% {-webkit-transform:rotate(0deg);}
100% {-webkit-transform:rotate(360deg);}
}
@-moz-keyframes rotation {
0% {-moz-transform:rotate(0deg);}
100% {-moz-transform:rotate(360deg);}
}
CSS实现太极图(3个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实现太极图(1个div实现)
使用一个div实现太极图的步骤如下: HTML部分: <body> <div class="box-taiji"> </div> </bo ...
- 【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写出来的东西代码 ...
随机推荐
- J2SE基本安装和java的环境变量
J2SE基本安装和java的环境变量 1. 首先登录http://www.oracle.com,下载JDK(J2SE) JDK有很多版本其中JDK 1.0,1.1,1.2,1.3,1.4 1.5 ...
- SQL Server——存储过程(Stored Procedure)、事物、触发器
存储过程(proc 或 procedure) 存储过程(Stored Procedure),计算机用语,是一组为了完成特定功能的SQL语句集,是利用SQL Server所提供的Transact-SQL ...
- float数据在内存中存储方式
float类型数字在计算机中用4个字节存储.遵循IEEE-754格式标准: 一个浮点数有3部分组成: 符号部分,0 表示正,1表示负. 底数部分 使用二进制数来表示此浮点数的实际值,底数部分实际是占用 ...
- BurpSuite系列----Extender模块(扩展器)
一.简介 Burp在软件中提供了支持第三方拓展插件的功能,方便使用者编写自己的自定义插件或从插件商店中安装拓展插件.Burp扩展程序可以以多种方式支持自定义Burp的行为,例如:修改HTTP请求和响应 ...
- 完美解决Bootstrap4 导航栏 fixed-top 后,锚点定位时遮挡问题
利用锚点改变事件\(onhashchange\),使用jQuery的\(scrollTop\)向前滚回导航栏的高度(比如我的100个像素) HTML: <body onhashchange=&q ...
- 【性能测试】:对WebSphere中间件的监控方式
1 登录WebSphere控制台 2 选择应用.点击启动和停止来启动和停止应用 3 查看当前活动.点击要查看的项目 4 在开始监测前,先选中服务,点击启动监控将集合状态改为活动的 进入页面后,在页面 ...
- Mac 10.12安装粘贴板增加工具ClipMenu
说明:这个工具可以保留复制过的记录,并且可以快速调出之前复制过的内容,最开发时比较常用,支持图片等. 下载: (链接: https://pan.baidu.com/s/1qXJbM2o 密码: wef ...
- linux命令-寻找超过100M的文件,并将其删除
find / -type f -size +100M | xargs rm -rf 其中第一个/表示路径,此时表示的是根目录,也就是搜索全部的文件 -type表示类型 f表示是文件 -size 表示大 ...
- Java的枚举类型
引用并转载于:http://blog.csdn.net/ishallwin/article/details/9440251 1.什么是枚举: 在实际编程中,往往存在着这样的“数据集”,它们的数值在程序 ...
- PHP中return,exit,die的区别
参考:die(),exit(),return的区别 1.die() 是遇到错误才停止,停止程序运行,输出内容(是程序级别的) 2.exit,exit():是一个函数 是停止程序运行,前者不输出内容:后 ...