CSS3实现旋转的太极图(二):只用1个DIV
效果预览:
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的更多相关文章
- 纯css3实现旋转的太极图
效果图: 代码如下: <!DOCTYPE html> <html> <head lang="zh"> <meta charset=&quo ...
- CSS3绘制旋转的太极图案(一)
实现步骤: 基础HTML: <div class="box-taiji"> <div class="circle-01">< ...
- 【微信支付】分享一个失败的案例 跨域405(Method Not Allowed)问题 关于IM的一些思考与实践 基于WebSocketSharp 的IM 简单实现 【css3】旋转倒计时 【Html5】-- 塔台管制 H5情景意识 --飞机 谈谈转行
[微信支付]分享一个失败的案例 2018-06-04 08:24 by stoneniqiu, 2744 阅读, 29 评论, 收藏, 编辑 这个项目是去年做的,开始客户还在推广,几个月后发现服务器已 ...
- CSS3 3D旋转下拉菜单--兼容性不太好
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- css3制作旋转动画
现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...
- Html5 绘制旋转的太极图
采用Html5+JavaScript在Canvas中绘制旋转的太极图,如下图所示: 具体思路和绘制逻辑,在上图中已有说明,代码如下: <script type="text/javasc ...
- 用css3制作旋转加载动画的几种方法
以WebKit为核心的浏览器,例如Safari和Chrome,对html5有着很好的支持,在移动平台中这两个浏览器对应的就是IOS和Android.最近在开发一个移动平台的web app,那么就有机会 ...
- 【Demo】CSS3元素旋转、缩放、移动或倾斜
CSS3元素旋转.缩放.移动或倾斜 代码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- CSS3制作旋转导航
慕课网学习CSS3时,遇到个习题,觉得有必要总结学习下:CSS3制作旋转导航 慕课网习题地址:http://www.imooc.com/code/1883 示例及源码地址:http://codepen ...
随机推荐
- mongoDB研究笔记:复制集数据同步机制
http://www.cnblogs.com/guoyuanwei/p/3279572.html 概述了复制集,整体上对复制集有了个概念,但是复制集最重要的功能之一数据同步是如何实现的?带着这个问题 ...
- django rest_framework--入门教程
题设.如果官网DEMO能够正常跑起来请继续,如果不能请参考上一篇 1.新建MODEL 在数据库里添加相应的数据,可以使用命令 manage.py syncdb 这时候会建立对应的表 2.新建序列化方法 ...
- C语言实现快速排序
我觉得冒泡排序是比较简单的: 所以今天我们实现一个叫做快速排序的: Problem 你想要将(4,3,5,1,2)排序成(1,2,3,4,5) 你决定使用最简单的快速排序: Solution 首先,打 ...
- Atitit.javascript 实现类的方式原理大总结
Atitit.javascript 实现类的方式原理大总结 1. 实现类的式::构造方法方式:原型方式:构造方法+原型的混合方式 1 2. 原型方式(function mode)经典式..实现属性推荐 ...
- Liferay7 BPM门户开发之33: Portlet之间通信的3种方式(session、IPC Render Parameter、IPC Event、Cookies)
文章介绍了5种方式,4种是比较常用的: Portlet session IPC Public Render Parameters IPC Event Cookies 参考地址: https://web ...
- "Cannot find one of more components. Please reinstall the application"--安装VS2013之后不能正常打开的处理办法
今天,安装完VS2013之后,不能正常启动.总提示一个让人摸不到头脑的错误: "Cannot find one of more components. Please reinstall th ...
- Java性能提示(全)
http://www.onjava.com/pub/a/onjava/2001/05/30/optimization.htmlComparing the performance of LinkedLi ...
- 如何通过linux ssh远程linux不用输入密码登入
如何通过一台linux ssh远程其他linux服务器时,不要输入密码,可以自动登入.提高远程效率,不用记忆各台服务器的密码. 工具/原料 ssh,ssh-keygen,scp 方法/步骤 首 ...
- 【地图API】收货地址详解2
上次讲解的方法是: 在地图中心点添加一个标注,每次拖动地图就获取地图中心点,再把标注的位置设置为地图中心点.可参考教程:http://www.cnblogs.com/milkmap/p/6126424 ...
- OpenCV相机标定和姿态更新
原帖地址: http://blog.csdn.net/aptx704610875/article/details/48914043 http://blog.csdn.net/aptx704610875 ...