CSS3 实现太极图案

CSS3实现太极图案

分析图片组成（如下图所示）：

先给出html代码：

<div class="box"><div class="content"><div class="left"></div><div class="right"></div><div class="inner-circle up"><div class="sm-circle circle-white"></div></div><div class="inner-circle down"><div class="sm-circle circle-black"></div></div></div></div>

View Code

步骤一：

先把紫色框出来的两个div修改其样式，使其分别成两个半圆，一黑一白。

.left{position: absolute;width: 50%;top: 0;left:0;height: 100%;background-color: #000000;border-radius: 100% 0 0 100% / 50% 0 0 50%;
}
.right{position: absolute;width: 50%;top: 0;right: 0;;height: 100%;background-color: #FFFFFF;border-radius: 0 100% 100% 0 / 0 50% 50% 0;
}

View Code

步骤二：把外面的红色框添加样式，使其变成圆，一黑一白

.inner-circle{position: absolute;width: 50%;height: 50%;left: 25%;border-radius:50% ;
}
.up{ top: 0;background-color: #000000;
}
.down{bottom: 0;background-color: #FFFFFF;
}

View Code

第三步：给最里面的红色框添加样式，使其变成圆，一黑一白

.sm-circle{position: absolute;width: 25%;height: 25%;top: 37.5%;left: 37.5%;border-radius: 50%;
}
.circle-white{background-color: #FFFFFF;
}
.circle-black{background-color: #000;
}

View Code

最后：给太极图案最外层的div添加动画，使其动起来

设置动画

@keyframes Rotate {0%{-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg);}100%{-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-ms-transform: rotate(360deg);transform: rotate(360deg);}
}

View Code

给div绑定动画

.content{margin: 0 auto;position: relative;width: 300px;height: 300px;border-radius: 50%;background-color: #FFFFFF;border: 1px solid #aaa;animation: Rotate 6s linear infinite;
}

View Code

好了，旋转的太极就画好了，是不是很简单呀

运行效果，请点击：http://hjjia.github.io/h5translate3d/taiji/

转载于:https://www.cnblogs.com/i-jia/p/5338798.html

CSS3 实现太极图案相关推荐

CSS3使用一个盒子实现太极图案
使用一个盒子实现太极图案代码如下: <body><div></div> </body> * {margin: 0;padding: 0; } body ...
HTML5 Canvas组件绘制太极图案
一实现思路: 实现原理主要是利用HTML5的Canvas组件提供的path函数功能来绘制圆,首先绘制两个半圆,分别为黑色和白色,组成一个圆,绘制完成以后再分别绘制一个黑色和白色的圆在绘制好的黑白圆 ...
使用Java 2D绘制黑白太极图案
一:基本原理利用Java 2D的Area对象对绘制形状几何操作的支持,完成太极图案的绘制,使用Paint来完成对不同颜色的填充.Java 2D图形API Area对Shape支持四种几何操作: - ...
使用css3绘制太极
我们将完成如下效果绘制前先确定太极是由那些构成的,但还是可能觉得无从下手最主要的难点就是它是如何变成下面图片那样的拆解一下你就会明白它是如何构成的了这一步直接画黑色圆形可能会有点懵,所以换成了 ...
css3漂亮的渐变图案,CSS3 带渐变图案的圆球
CSS 语言: CSSSCSS 确定 body { height: 100vh; widt: 100vw; margin: 0; background: cadetblue; } .wrapper { ...
【04】HTML5+CSS3：01-HTML5新增标签、多媒体标签、input标签、新增表单属性、CSS3属性选择器、伪元素选择器、2D转换
文章目录 HTML5 第一天一.什么是 `HTML5` 二.`HTML5 ` 新增标签三.多媒体音频标签四.多媒体视频标签五.新增 input 标签六.新增表单属性七.`CSS3 ` 属性 ...
响应式Web设计：HTML5和CSS3实战读书笔记
响应式Web设计:HTML5和CSS3实战 Responsive Web Design with HTML5 and CSS3 By : Pandao pandao####vip.qq.com ...
【笔记】玩转CSS3新特性_from_JSPang
文章目录第一章:环境搭建,伪类选择器,伪元素 1.1.嫁汉嫁汉穿衣吃饭 1.2.新特性简介和浏览器支持情况 1.新特性简介 2.浏览器对CSS3的支持情况 3.渐进增强和优雅降级 1.3.伪类选择器 ...
css之图形大全菱形心形五角星太极三角形...
css之图形大全因为需要,所以整理出了一份全css的图形大全,供大家一起学习: 圆形: #circle {width: 100px;height: 100px;background: red;bor ...

CSS3 实现太极图案

CSS3 实现太极图案相关推荐

最新文章

热门文章