效果预览:

 

PS:

1、昨天用3个DIV实现了太极图(点击查看),,今天试着用1个Div来做。

2、公司刚忙过双10周年庆,最近空闲下来,闲着也是闲着,总得写点东西吧。

3、高手莫喷,小弟仅仅是没事折腾一下,做个的记录。

4、有网友反应旋转的时候会卡。

5、IE浏览器,出门左拐、走好不送 ~~~

实现步骤:

HTML:

<div class="box-taiji"></div>

步骤一:

.box-taiji {width:;height:400px;position:relative;margin:50px auto;border-left:200px solid #;border-right:200px solid #fff;box-shadow:  30px rgba(,,,.);border-radius:400px;}

结合border实现左黑右白的正方形,加上圆角、阴影。 PS:刚开始的时候用background-image:linear-gradient(left, #000 50%, #fff 50%);来实现黑边圆形。IE10下测试不行。所以用了border。

步骤二:

.box-taiji {width:;height:400px;position:relative;margin:50px auto;border-left:200px solid #;border-right:200px solid #fff;box-shadow:  30px rgba(,,,.);border-radius:400px;}
.box-taiji:after {width:200px;height:200px;position:absolute;content:"";display:block;top:;left:-100px;z-index:;background-color:#fff;border-radius:%;}

加上伪类,实现一个一个白色的圆形,定位好位置。

.box-taiji {width:;height:400px;position:relative;margin:50px auto;border-left:200px solid #;border-right:200px solid #fff;box-shadow:  30px rgba(,,,.);border-radius:400px;}
.box-taiji:after {width:200px;height:200px;position:absolute;content:"";display:block;top:;left:-100px;z-index:;background-color:#fff;border-radius:%;box-shadow: 200px #;}

利用box-shadow:0 200px 0 #000;实现同样大小的圆,放好。

步骤三:

.box-taiji {width:;height:400px;position:relative;margin:50px auto;border-left:200px solid #;border-right:200px solid #fff;box-shadow:  30px rgba(,,,.);border-radius:400px;}
.box-taiji:before,
.box-taiji:after {position:absolute;content:"";display:block;}
.box-taiji:before {width:200px;height:200px;top:;left:-100px;z-index:;background-color:#fff;border-radius:%;box-shadow: 200px #;}
.box-taiji:after {width:60px;height:60px;top:70px;left:-30px;z-index:;background-color:#;border-radius:%;box-shadow: 200px #fff;}

同样步骤二一样的原理,再实现黑白两个圆,放到相关的位置。我们的太极图就画好了,下面的任务就是动起来~~

步骤四:

.box-taiji {width:;height:400px;position:relative;margin:50px auto;border-left:200px solid #;border-right:200px solid #fff;box-shadow:  30px rgba(,,,.);border-radius:400px;animation:rotation .5s linear infinite;-webkit-animation:rotation .5s linear infinite;-moz-animation:rotation .5s linear infinite;}
.box-taiji:before,
.box-taiji:after {position:absolute;content:"";display:block;}
.box-taiji:before {width:200px;height:200px;top:;left:-100px;z-index:;background-color:#fff;border-radius:%;box-shadow: 200px #;}
.box-taiji:after {width:60px;height:60px;top:70px;left:-30px;z-index:;background-color:#;border-radius:%;box-shadow: 200px #fff;} @keyframes rotation {
% {transform:rotate(0deg);}
% {transform:rotate(-360deg);}
}
@-webkit-keyframes rotation {
% {-webkit-transform:rotate(0deg);}
% {-webkit-transform:rotate(-360deg);}
}
@-moz-keyframes rotation {
% {-moz-transform:rotate(0deg);}
% {-moz-transform:rotate(-360deg);}
}

加上@keyframes、animation等CSS3动画效果,OK,搞定。。

原理解析:

我们先把背景颜色调一下,原理一下子就清晰了。。其实就是:两个半圆在最下面,四个小圆利用定位叠加上去。

完整代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3实现旋转的太极图(二):只用1个DIV</title>
<style>
/* 利用background-image实现左黑右白的圆,IE下测试不太理想 */
/* .box-taiji {width:400px;height:400px;position:relative;margin:30px auto;border-radius:400px;box-shadow:0 0 30px rgba(0,0,0,.5);background-image:linear-gradient(left, #000 50%, #fff 50%);background-image:-webkit-linear-gradient(left, #000 50%, #fff 50%);background-image:-moz-linear-gradient(left, #000 50%, #fff 50%);}
.box-taiji:before,
.box-taiji:after {position:absolute;content:"";display:block;}
.box-taiji:before {width:200px;height:200px;top:0;left:100px;z-index:1;background-color:#fff;border-radius:50%;box-shadow:0 200px 0 #000;}
.box-taiji:after {width:60px;height:60px;top:70px;left:170px;z-index:2;background-color:#000;border-radius:50%;box-shadow:0 200px 0 #fff;}
*/ .box-taiji {width:;height:400px;position:relative;margin:50px auto;border-left:200px solid #;border-right:200px solid #fff;box-shadow: 30px rgba(,,,.);border-radius:400px;animation:rotation .5s linear infinite;-webkit-animation:rotation .5s linear infinite;-moz-animation:rotation .5s linear infinite;}
.box-taiji:before,
.box-taiji:after {position:absolute;content:"";display:block;}
.box-taiji:before {width:200px;height:200px;top:;left:-100px;z-index:;background-color:#fff;border-radius:%;box-shadow: 200px #;}
.box-taiji:after {width:60px;height:60px;top:70px;left:-30px;z-index:;background-color:#;border-radius:%;box-shadow: 200px #fff;} @keyframes rotation {
% {transform:rotate(0deg);}
% {transform:rotate(-360deg);}
}
@-webkit-keyframes rotation {
% {-webkit-transform:rotate(0deg);}
% {-webkit-transform:rotate(-360deg);}
}
@-moz-keyframes rotation {
% {-moz-transform:rotate(0deg);}
% {-moz-transform:rotate(-360deg);}
}
</style>
</head> <body> <div class="box-taiji"></div> </body>
</html>

CSS3实现旋转的太极图(二):只用1个DIV的更多相关文章

  1. 纯css3实现旋转的太极图

    效果图: 代码如下: <!DOCTYPE html> <html> <head lang="zh"> <meta charset=&quo ...

  2. CSS3绘制旋转的太极图案(一)

        实现步骤: 基础HTML: <div class="box-taiji"> <div class="circle-01">< ...

  3. 【微信支付】分享一个失败的案例 跨域405(Method Not Allowed)问题 关于IM的一些思考与实践 基于WebSocketSharp 的IM 简单实现 【css3】旋转倒计时 【Html5】-- 塔台管制 H5情景意识 --飞机 谈谈转行

    [微信支付]分享一个失败的案例 2018-06-04 08:24 by stoneniqiu, 2744 阅读, 29 评论, 收藏, 编辑 这个项目是去年做的,开始客户还在推广,几个月后发现服务器已 ...

  4. CSS3 3D旋转下拉菜单--兼容性不太好

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  5. css3制作旋转动画

    现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...

  6. Html5 绘制旋转的太极图

    采用Html5+JavaScript在Canvas中绘制旋转的太极图,如下图所示: 具体思路和绘制逻辑,在上图中已有说明,代码如下: <script type="text/javasc ...

  7. 用css3制作旋转加载动画的几种方法

    以WebKit为核心的浏览器,例如Safari和Chrome,对html5有着很好的支持,在移动平台中这两个浏览器对应的就是IOS和Android.最近在开发一个移动平台的web app,那么就有机会 ...

  8. 【Demo】CSS3元素旋转、缩放、移动或倾斜

    CSS3元素旋转.缩放.移动或倾斜 代码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  9. CSS3制作旋转导航

    慕课网学习CSS3时,遇到个习题,觉得有必要总结学习下:CSS3制作旋转导航 慕课网习题地址:http://www.imooc.com/code/1883 示例及源码地址:http://codepen ...

随机推荐

  1. 《Linux内核设计与实现》读书笔记(十八)- 内核调试

    内核调试的难点在于它不能像用户态程序调试那样打断点,随时暂停查看各个变量的状态. 也不能像用户态程序那样崩溃后迅速的重启,恢复初始状态. 用户态程序和内核交互,用户态程序的各种状态,错误等可以由内核来 ...

  2. 【Win10 UWP】QQ SDK(一):SDK基本使用方法

    每当开发一个应用需要社交分享的应用时,总是心里咯噔一下:到底什么时候分享能加上QQ和微信?除了WP8.0版本的微信SDK,官方似乎从未正面发布过适应时代发展的QQ SDK,就连后台,也没有一个可以创建 ...

  3. [转]一个文件上传的jquery插件

    http://www.jb51.net/article/51547.htm 这篇文章主要介绍了使用ajaxfileupload.js实现ajax上传文件php版,需要的朋友可以参考下     无论是P ...

  4. C++11 并发指南六(atomic 类型详解三 std::atomic (续))

    C++11 并发指南六( <atomic> 类型详解二 std::atomic ) 介绍了基本的原子类型 std::atomic 的用法,本节我会给大家介绍C++11 标准库中的 std: ...

  5. HTML Meta标签知多少

    文章已同步至个人Blog:Benjamin - 专注前端开发和用户体验 一.基本属性 标签常常被用来定义HTML文档的元数据或者HTTP协议的指向,这些元数据常用在SEO.HTML Pages or ...

  6. CentOS7 修改系统时间

    yum -y install ntp [root@localhost kevin]# systemctl enable ntpdsystemctl start ntpdntpdate us.pool. ...

  7. JProfiler8 注册码序列号

    JProfiler_SN_8_x.txt 按默认选择"Single or evaluation license" Name 和 Company 随意 --------------- ...

  8. 设想 Docker 下部署 KVM

    设想 Docker 下部署 KVM 一.安装 $ yum -y install kvm # kvm base , must $ yum -y install libvirt -y # libvirtd ...

  9. 统计项目的java代码总行数

    http://www.oschina.net/code/snippet_209431_7358 wc -l $(find . -type f -name '*.java')

  10. Redis & Python/Django 简单用户登陆

    一.Redis key相关操作: 1.del key [key..] 删除一个或多个key,如果不存在则忽略 2.keys pattern keys模式匹配,符合glob风格通配符,glob风格的通配 ...