java旋转太极图_如何用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);

}

看图看效果：

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

css如何调整红心样式_如何用html和CSS3画一个红心（爱心），初级简单代码实现...
html和css是可以画一个红心的,可能许多刚学习web前端的朋友不知道,我们现在演示一下,大家以后遇到类似的东西可以不用图片来做了,可以直接写代码,图片需要从服务器传递请求再回复请求,如果一个网页图 ...
太极图php代码,如何用CSS纯代码画一个旋转的太极图（附代码）
这是一个中国人都非常熟悉的图案--太极图,它分为阴阳两级,会旋转(用到css3 animation动画属性),此图通过css3纯代码实现,它由若干个小圆组合而成,适合初学css3的人练练手,娱以致 ...
如何用css动画来画一个多啦A梦
Github预览链接 : https://asdasd111112999.github.io/animation-Doraemon/index.html 预览图: 这个小demo 会实时的把CSS实现 ...
如何用 Slack 和 Kubernetes 构建一个聊天机器人？| 附代码
作者 | Alexander Kainz 译者 | 天道酬勤,责编 | Carol 出品 | AI科技大本营(ID:rgznai100) ChatOps可以让你使用基于聊天的接口来管理DevOps任务 ...
利用css样式表做一个旋转写轮眼
利用css样式表做一个旋转写轮眼成品效果图首先分析效果图图中有红色背景圈和里面的三个椭圆和最中心的黑圈组成. 因此,我们应该写一个大的div盒子,来装这三个椭圆div,里面的三个椭圆div和圆的 ...
python月亮_如何用python代码画一个月亮
如何用python代码画一个月亮发布时间:2020-06-17 15:52:21 来源:亿速云阅读:181 作者:元一 Python简介 Python是一种跨平台的计算机程序设计语言. 是一个高层 ...
[css] 使用css3画一个扇形
[css] 使用css3画一个扇形四个半圆叠加,过半调整 z-index .container { width: 200px; height: 200px; position: relative; ...
计算机图形学（六）——画一个旋转的立方体
画一个旋转的立方体 //画立方体#include <iostream> #define GLEW_STATIC #include"Shader.h" #include& ...
如何用CSS动画特效让图片旋转起来
杜老师逆战班学员 2020.02.22 我们通常浏览网页,基本上看过去都是呈现着各种文字加图片的2D效果信息,作为一名前端开发工程师非常重要的工作就是要让用户看到网页时有眼前一亮.耳目一新的感觉,用户 ...

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

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

最新文章

热门文章