太极图php代码,如何用CSS纯代码画一个旋转的太极图（附代码）

这是一个中国人都非常熟悉的图案——太极图，它分为阴阳两级，会旋转(用到css3 animation动画属性)，此图通过css3纯代码实现，它由若干个小圆组合而成，适合初学css3的人练练手，娱以致学，增加学习的乐趣。

HTML部分：

CSS部分：

.square {

width: 400px;

height: 400px;

position: relative;

transform: rotate(45deg);

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

animation: rotate infinite linear 5s;

margin: 10% auto;

-webkit-animation: rotate infinite linear 5s;

margin: 10% auto;

-moz-animation: rotate infinite linear 5s;

margin: 10% auto;

}

.rect {

width: 400px;

height: 200px;

position: relative;

border: 1px #d2d2d2 solid;

border-bottom: none;

}

.inner_circle {

width: 200px;

height: 200px;

border-radius: 200px;

position: absolute;

z-index: 1;

}

.dot {

width: 50px;

height: 50px;

position: absolute;

left: 0;

right: 0;

top: 0;

bottom: 0;

margin: auto;

border-radius: 50%;

}

.rect_one {

border-radius: 200px 200px 0 0;

background: white;

}

.rect_one_one {

bottom: -100px;

left: 0;

background: black;

}

.rect_one_two {

background: white;

}

.rect_two {

border-radius: 0 0 200px 200px;

background: black;

}

.rect_two_one {

bottom: 100px;

right: 0;

background: white;

}

.rect_two_two {

background: black;

}

@keyframes rotate {

from {

transform: rotate(0deg);

-webkit-transform: rotate(0deg);

}

to {

transform: rotate(360deg);

-webkit-transform: rotate(360deg);

}

看图看效果：

太极图php代码,如何用CSS纯代码画一个旋转的太极图（附代码）相关推荐

如何用css动画来画一个多啦A梦
Github预览链接 : https://asdasd111112999.github.io/animation-Doraemon/index.html 预览图: 这个小demo 会实时的把CSS实现 ...
java旋转太极图_如何用CSS纯代码画一个旋转的太极图（附代码）
这是一个中国人都非常熟悉的图案--太极图,它分为阴阳两级,会旋转(用到css3 animation动画属性),此图通过css3纯代码实现,它由若干个小圆组合而成,适合初学css3的人练练手,娱以致 ...
如何用 Slack 和 Kubernetes 构建一个聊天机器人？| 附代码
作者 | Alexander Kainz 译者 | 天道酬勤,责编 | Carol 出品 | AI科技大本营(ID:rgznai100) ChatOps可以让你使用基于聊天的接口来管理DevOps任务 ...
css如何调整红心样式_如何用html和CSS3画一个红心（爱心），初级简单代码实现...
html和css是可以画一个红心的,可能许多刚学习web前端的朋友不知道,我们现在演示一下,大家以后遇到类似的东西可以不用图片来做了,可以直接写代码,图片需要从服务器传递请求再回复请求,如果一个网页图 ...
写一个画螺旋旋转的花朵python代码
这是一个画螺旋旋转的花朵的代码示例: import turtle# 设置画布 turtle.setup(800, 600) turtle.screensize(800, 600) turtle.tit ...
利用css样式表做一个旋转写轮眼
利用css样式表做一个旋转写轮眼成品效果图首先分析效果图图中有红色背景圈和里面的三个椭圆和最中心的黑圈组成. 因此,我们应该写一个大的div盒子,来装这三个椭圆div,里面的三个椭圆div和圆的 ...
[css] 使用css3画一个扇形
[css] 使用css3画一个扇形四个半圆叠加,过半调整 z-index .container { width: 200px; height: 200px; position: relative; ...
html中怎样写渐变色代码,如何用CSS写渐变色
原标题:如何用CSS写渐变色网页的应用中,有时会用到渐变色,文汇小编在这里跟大家分享一下使用CSS写渐变色的方法. 如下图,是由红色到青色的渐变: 附样式代码: .color1{background ...
html用css写彩虹,如何使用纯CSS实现彩虹条纹文字的效果（附代码）
本篇文章给大家带来的内容是关于如何使用纯CSS实现彩虹条纹文字的效果(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览源代码下载 https://github.co ...

太极图php代码,如何用CSS纯代码画一个旋转的太极图（附代码）

太极图php代码,如何用CSS纯代码画一个旋转的太极图（附代码）相关推荐

最新文章

热门文章