css3八卦,CSS3 八卦图推演漩涡
CSS
语言：
CSSSCSS
确定
div {
position: absolute;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
body {
background-color: #36383b;
overflow: hidden;
}
.tier {
top: 50%;
left: 50%;
-webkit-animation-name: outer-rot;
animation-name: outer-rot;
}
.circle {
height: 20px;
border-radius: 60px;
-webkit-transform: translate(-50%);
-ms-transform: translate(-50%);
transform: translate(-50%);
}
@-webkit-keyframes outer-rot {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes outer-rot {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.t1 {
-webkit-animation-duration: 0.75s;
animation-duration: 0.75s;
}
.c1 {
top: 5px;
background-color: #cc2e1d;
width: 20px;
}
.circle-outer1:nth-of-type(1) {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
.circle-outer1:nth-of-type(2) {
-webkit-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg);
}
.circle-outer1:nth-of-type(3) {
-webkit-transform: rotate(240deg);
-ms-transform: rotate(240deg);
transform: rotate(240deg);
}
.t2 {
-webkit-animation-duration: 1.05s;
animation-duration: 1.05s;
}
.c2 {
top: 35px;
background-color: #cd3c21;
width: 24.44444px;
}
.circle-outer2:nth-of-type(1) {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
.circle-outer2:nth-of-type(2) {
-webkit-transform: rotate(60deg);
-ms-transform: rotate(60deg);
transform: rotate(60deg);
}
.circle-outer2:nth-of-type(3) {
-webkit-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg);
}
.circle-outer2:nth-of-type(4) {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.circle-outer2:nth-of-type(5) {
-webkit-transform: rotate(240deg);
-ms-transform: rotate(240deg);
transform: rotate(240deg);
}
.circle-outer2:nth-of-type(6) {
-webkit-transform: rotate(300deg);
-ms-transform: rotate(300deg);
transform: rotate(300deg);
}
.t3 {
-webkit-animation-duration: 1.47s;
animation-duration: 1.47s;
}
.c3 {
top: 65px;
background-color: #cd4b26;
width: 28.88889px;
}
.circle-outer3:nth-of-type(1) {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
.circle-outer3:nth-of-type(2) {
-webkit-transform: rotate(40deg);
-ms-transform: rotate(40deg);
transform: rotate(40deg);
}
.circle-outer3:nth-of-type(3) {
-webkit-transform: rotate(80deg);
-ms-transform: rotate(80deg);
transform: rotate(80deg);
}
.circle-outer3:nth-of-type(4) {
-webkit-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg);
}
.circle-outer3:nth-of-type(5) {
-webkit-transform: rotate(160deg);
-ms-transform: rotate(160deg);
transform: rotate(160deg);
}
.circle-outer3:nth-of-type(6) {
-webkit-transform: rotate(200deg);
-ms-transform: rotate(200deg);
transform: rotate(200deg);
}
.circle-outer3:nth-of-type(7) {
-webkit-transform: rotate(240deg);
-ms-transform: rotate(240deg);
transform: rotate(240deg);
}
.circle-outer3:nth-of-type(8) {
-webkit-transform: rotate(280deg);
-ms-transform: rotate(280deg);
transform: rotate(280deg);
}
.circle-outer3:nth-of-type(9) {
-webkit-transform: rotate(320deg);
-ms-transform: rotate(320deg);
transform: rotate(320deg);
}
.t4 {
-webkit-animation-duration: 2.058s;
animation-duration: 2.058s;
}
.c4 {
top: 95px;
background-color: #ce592a;
width: 33.33333px;
}
.circle-outer4:nth-of-type(1) {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
.circle-outer4:nth-of-type(2) {
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
.circle-outer4:nth-of-type(3) {
-webkit-transform: rotate(60deg);
-ms-transform: rotate(60deg);
transform: rotate(60deg);
}
.circle-outer4:nth-of-type(4) {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.circle-outer4:nth-of-type(5) {
-webkit-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg);
}
.circle-outer4:nth-of-type(6) {
-webkit-transform: rotate(150deg);
-ms-transform: rotate(150deg);
transform: rotate(150deg);
}
.circle-outer4:nth-of-type(7) {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.circle-outer4:nth-of-type(8) {
-webkit-transform: rotate(210deg);
-ms-transform: rotate(210deg);
transform: rotate(210deg);
}
.circle-outer4:nth-of-type(9) {
-webkit-transform: rotate(240deg);
-ms-transform: rotate(240deg);
transform: rotate(240deg);
}
.circle-outer4:nth-of-type(10) {
-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
.circle-outer4:nth-of-type(11) {
-webkit-transform: rotate(300deg);
-ms-transform: rotate(300deg);
transform: rotate(300deg);
}
.circle-outer4:nth-of-type(12) {
-webkit-transform: rotate(330deg);
-ms-transform: rotate(330deg);
transform: rotate(330deg);
}
.t5 {
-webkit-animation-duration: 2.8812s;
animation-duration: 2.8812s;
}
.c5 {
top: 125px;
background-color: #ce672f;
width: 37.77778px;
}
.circle-outer5:nth-of-type(1) {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
.circle-outer5:nth-of-type(2) {
-webkit-transform: rotate(24deg);
-ms-transform: rotate(24deg);
transform: rotate(24deg);
}
.circle-outer5:nth-of-type(3) {
-webkit-transform: rotate(48deg);
-ms-transform: rotate(48deg);
transform: rotate(48deg);
}
.circle-outer5:nth-of-type(4) {
-webkit-transform: rotate(72deg);
-ms-transform: rotate(72deg);
transform: rotate(72deg);
}
.circle-outer5:nth-of-type(5) {
-webkit-transform: rotate(96deg);
-ms-transform: rotate(96deg);
transform: rotate(96deg);
}
.circle-outer5:nth-of-type(6) {
-webkit-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg);
}
.circle-outer5:nth-of-type(7) {
-webkit-transform: rotate(144deg);
-ms-transform: rotate(144deg);
transform: rotate(144deg);
}
.circle-outer5:nth-of-type(8) {
-webkit-transform: rotate(168deg);
-ms-transform: rotate(168deg);
transform: rotate(168deg);
}
.circle-outer5:nth-of-type(9) {
-webkit-transform: rotate(192deg);
-ms-transform: rotate(192deg);
transform: rotate(192deg);
}
.circle-outer5:nth-of-type(10) {
-webkit-transform: rotate(216deg);
-ms-transform: rotate(216deg);
transform: rotate(216deg);
}
.circle-outer5:nth-of-type(11) {
-webkit-transform: rotate(240deg);
-ms-transform: rotate(240deg);
transform: rotate(240deg);
}
.circle-outer5:nth-of-type(12) {
-webkit-transform: rotate(264deg);
-ms-transform: rotate(264deg);
transform: rotate(264deg);
}
.circle-outer5:nth-of-type(13) {
-webkit-transform: rotate(288deg);
-ms-transform: rotate(288deg);
transform: rotate(288deg);
}
.circle-outer5:nth-of-type(14) {
-webkit-transform: rotate(312deg);
-ms-transform: rotate(312deg);
transform: rotate(312deg);
}
.circle-outer5:nth-of-type(15) {
-webkit-transform: rotate(336deg);
-ms-transform: rotate(336deg);
transform: rotate(336deg);
}
.t6 {
-webkit-animation-duration: 4.03368s;
animation-duration: 4.03368s;
}
.c6 {
top: 155px;
background-color: #cf7633;
width: 42.22222px;
}
.circle-outer6:nth-of-type(1) {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
.circle-outer6:nth-of-type(2) {
-webkit-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
}
.circle-outer6:nth-of-type(3) {
-webkit-transform: rotate(40deg);
-ms-transform: rotate(40deg);
transform: rotate(40deg);
}
.circle-outer6:nth-of-type(4) {
-webkit-transform: rotate(60deg);
-ms-transform: rotate(60deg);
transform: rotate(60deg);
}
.circle-outer6:nth-of-type(5) {
-webkit-transform: rotate(80deg);
-ms-transform: rotate(80deg);
transform: rotate(80deg);
}
.circle-outer6:nth-of-type(6) {
-webkit-transform: rotate(100deg);
-ms-transform: rotate(100deg);
transform: rotate(100deg);
}
.circle-outer6:nth-of-type(7) {
-webkit-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg);
}
.circle-outer6:nth-of-type(8) {
-webkit-transform: rotate(140deg);
-ms-transform: rotate(140deg);
transform: rotate(140deg);
}
.circle-outer6:nth-of-type(9) {
-webkit-transform: rotate(160deg);
-ms-transform: rotate(160deg);
transform: rotate(160deg);
}
.circle-outer6:nth-of-type(10) {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.circle-outer6:nth-of-type(11) {
-webkit-transform: rotate(200deg);
-ms-transform: rotate(200deg);
transform: rotate(200deg);
}
.circle-outer6:nth-of-type(12) {
-webkit-transform: rotate(220deg);
-ms-transform: rotate(220deg);
transform: rotate(220deg);
}
.circle-outer6:nth-of-type(13) {
-webkit-transform: rotate(240deg);
-ms-transform: rotate(240deg);
transform: rotate(240deg);
}
.circle-outer6:nth-of-type(14) {
-webkit-transform: rotate(260deg);
-ms-transform: rotate(260deg);
transform: rotate(260deg);
}
.circle-outer6:nth-of-type(15) {
-webkit-transform: rotate(280deg);
-ms-transform: rotate(280deg);
transform: rotate(280deg);
}
.circle-outer6:nth-of-type(16) {
-webkit-transform: rotate(300deg);
-ms-transform: rotate(300deg);
transform: rotate(300deg);
}
.circle-outer6:nth-of-type(17) {
-webkit-transform: rotate(320deg);
-ms-transform: rotate(320deg);
transform: rotate(320deg);
}
.circle-outer6:nth-of-type(18) {
-webkit-transform: rotate(340deg);
-ms-transform: rotate(340deg);
transform: rotate(340deg);
}
.t7 {
-webkit-animation-duration: 5.64715s;
animation-duration: 5.64715s;
}
.c7 {
top: 185px;
background-color: #cf8438;
width: 46.66667px;
}
.circle-outer7:nth-of-type(1) {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
.circle-outer7:nth-of-type(2) {
-webkit-transform: rotate(17.14286deg);
-ms-transform: rotate(17.14286deg);
transform: rotate(17.14286deg);
}
.circle-outer7:nth-of-type(3) {
-webkit-transform: rotate(34.28571deg);
-ms-transform: rotate(34.28571deg);
transform: rotate(34.28571deg);
}
.circle-outer7:nth-of-type(4) {
-webkit-transform: rotate(51.42857deg);
-ms-transform: rotate(51.42857deg);
transform: rotate(51.42857deg);
}
.circle-outer7:nth-of-type(5) {
-webkit-transform: rotate(68.57143deg);
-ms-transform: rotate(68.57143deg);
transform: rotate(68.57143deg);
}
.circle-outer7:nth-of-type(6) {
-webkit-transform: rotate(85.71429deg);
-ms-transform: rotate(85.71429deg);
transform: rotate(85.71429deg);
}
.circle-outer7:nth-of-type(7) {
-webkit-transform: rotate(102.85714deg);
-ms-transform: rotate(102.85714deg);
transform: rotate(102.85714deg);
}
.circle-outer7:nth-of-type(8) {
-webkit-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg);
}
.circle-outer7:nth-of-type(9) {
-webkit-transform: rotate(137.14286deg);
-ms-transform: rotate(137.14286deg);
transform: rotate(137.14286deg);
}
.circle-outer7:nth-of-type(10) {
-webkit-transform: rotate(154.28571deg);
-ms-transform: rotate(154.28571deg);
transform: rotate(154.28571deg);
}
.circle-outer7:nth-of-type(11) {
-webkit-transform: rotate(171.42857deg);
-ms-transform: rotate(171.42857deg);
transform: rotate(171.42857deg);
}
.circle-outer7:nth-of-type(12) {
-webkit-transform: rotate(188.57143deg);
-ms-transform: rotate(188.57143deg);
transform: rotate(188.57143deg);
}
.circle-outer7:nth-of-type(13) {
-webkit-transform: rotate(205.71429deg);
-ms-transform: rotate(205.71429deg);
transform: rotate(205.71429deg);
}
.circle-outer7:nth-of-type(14) {
-webkit-transform: rotate(222.85714deg);
-ms-transform: rotate(222.85714deg);
transform: rotate(222.85714deg);
}
.circle-outer7:nth-of-type(15) {
-webkit-transform: rotate(240deg);
-ms-transform: rotate(240deg);
transform: rotate(240deg);
}
.circle-outer7:nth-of-type(16) {
-webkit-transform: rotate(257.14286deg);
-ms-transform: rotate(257.14286deg);
transform: rotate(257.14286deg);
}
.circle-outer7:nth-of-type(17) {
-webkit-transform: rotate(274.28571deg);
-ms-transform: rotate(274.28571deg);
transform: rotate(274.28571deg);
}
.circle-outer7:nth-of-type(18) {
-webkit-transform: rotate(291.42857deg);
-ms-transform: rotate(291.42857deg);
transform: rotate(291.42857deg);
}
.circle-outer7:nth-of-type(19) {
-webkit-transform: rotate(308.57143deg);
-ms-transform: rotate(308.57143deg);
transform: rotate(308.57143deg);
}
.circle-outer7:nth-of-type(20) {
-webkit-transform: rotate(325.71429deg);
-ms-transform: rotate(325.71429deg);
transform: rotate(325.71429deg);
}
.circle-outer7:nth-of-type(21) {
-webkit-transform: rotate(342.85714deg);
-ms-transform: rotate(342.85714deg);
transform: rotate(342.85714deg);
}
.t8 {
-webkit-animation-duration: 7.90601s;
animation-duration: 7.90601s;
}
.c8 {
top: 215px;
background-color: #d0923c;
width: 51.11111px;
}
.circle-outer8:nth-of-type(1) {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
.circle-outer8:nth-of-type(2) {
-webkit-transform: rotate(15deg);
-ms-transform: rotate(15deg);
transform: rotate(15deg);
}
.circle-outer8:nth-of-type(3) {
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
.circle-outer8:nth-of-type(4) {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.circle-outer8:nth-of-type(5) {
-webkit-transform: rotate(60deg);
-ms-transform: rotate(60deg);
transform: rotate(60deg);
}
.circle-outer8:nth-of-type(6) {
-webkit-transform: rotate(75deg);
-ms-transform: rotate(75deg);
transform: rotate(75deg);
}
.circle-outer8:nth-of-type(7) {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.circle-outer8:nth-of-type(8) {
-webkit-transform: rotate(105deg);
-ms-transform: rotate(105deg);
transform: rotate(105deg);
}
.circle-outer8:nth-of-type(9) {
-webkit-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg);
}
.circle-outer8:nth-of-type(10) {
-webkit-transform: rotate(135deg);
-ms-transform: rotate(135deg);
transform: rotate(135deg);
}
.circle-outer8:nth-of-type(11) {
-webkit-transform: rotate(150deg);
-ms-transform: rotate(150deg);
transform: rotate(150deg);
}
.circle-outer8:nth-of-type(12) {
-webkit-transform: rotate(165deg);
-ms-transform: rotate(165deg);
transform: rotate(165deg);
}
.circle-outer8:nth-of-type(13) {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.circle-outer8:nth-of-type(14) {
-webkit-transform: rotate(195deg);
-ms-transform: rotate(195deg);
transform: rotate(195deg);
}
.circle-outer8:nth-of-type(15) {
-webkit-transform: rotate(210deg);
-ms-transform: rotate(210deg);
transform: rotate(210deg);
}
.circle-outer8:nth-of-type(16) {
-webkit-transform: rotate(225deg);
-ms-transform: rotate(225deg);
transform: rotate(225deg);
}
.circle-outer8:nth-of-type(17) {
-webkit-transform: rotate(240deg);
-ms-transform: rotate(240deg);
transform: rotate(240deg);
}
.circle-outer8:nth-of-type(18) {
-webkit-transform: rotate(255deg);
-ms-transform: rotate(255deg);
transform: rotate(255deg);
}
.circle-outer8:nth-of-type(19) {
-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
.circle-outer8:nth-of-type(20) {
-webkit-transform: rotate(285deg);
-ms-transform: rotate(285deg);
transform: rotate(285deg);
}
.circle-outer8:nth-of-type(21) {
-webkit-transform: rotate(300deg);
-ms-transform: rotate(300deg);
transform: rotate(300deg);
}
.circle-outer8:nth-of-type(22) {
-webkit-transform: rotate(315deg);
-ms-transform: rotate(315deg);
transform: rotate(315deg);
}
.circle-outer8:nth-of-type(23) {
-webkit-transform: rotate(330deg);
-ms-transform: rotate(330deg);
transform: rotate(330deg);
}
.circle-outer8:nth-of-type(24) {
-webkit-transform: rotate(345deg);
-ms-transform: rotate(345deg);
transform: rotate(345deg);
}
.t9 {
-webkit-animation-duration: 11.06842s;
animation-duration: 11.06842s;
}
.c9 {
top: 245px;
background-color: #d0a141;
width: 55.55556px;
}
.circle-outer9:nth-of-type(1) {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
.circle-outer9:nth-of-type(2) {
-webkit-transform: rotate(13.33333deg);
-ms-transform: rotate(13.33333deg);
transform: rotate(13.33333deg);
}
.circle-outer9:nth-of-type(3) {
-webkit-transform: rotate(26.66667deg);
-ms-transform: rotate(26.66667deg);
transform: rotate(26.66667deg);
}
.circle-outer9:nth-of-type(4) {
-webkit-transform: rotate(40deg);
-ms-transform: rotate(40deg);
transform: rotate(40deg);
}
.circle-outer9:nth-of-type(5) {
-webkit-transform: rotate(53.33333deg);
-ms-transform: rotate(53.33333deg);
transform: rotate(53.33333deg);
}
.circle-outer9:nth-of-type(6) {
-webkit-transform: rotate(66.66667deg);
-ms-transform: rotate(66.66667deg);
transform: rotate(66.66667deg);
}
.circle-outer9:nth-of-type(7) {
-webkit-transform: rotate(80deg);
-ms-transform: rotate(80deg);
transform: rotate(80deg);
}
.circle-outer9:nth-of-type(8) {
-webkit-transform: rotate(93.33333deg);
-ms-transform: rotate(93.33333deg);
transform: rotate(93.33333deg);
}
.circle-outer9:nth-of-type(9) {
-webkit-transform: rotate(106.66667deg);
-ms-transform: rotate(106.66667deg);
transform: rotate(106.66667deg);
}
.circle-outer9:nth-of-type(10) {
-webkit-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg);
}
.circle-outer9:nth-of-type(11) {
-webkit-transform: rotate(133.33333deg);
-ms-transform: rotate(133.33333deg);
transform: rotate(133.33333deg);
}
.circle-outer9:nth-of-type(12) {
-webkit-transform: rotate(146.66667deg);
-ms-transform: rotate(146.66667deg);
transform: rotate(146.66667deg);
}
.circle-outer9:nth-of-type(13) {
-webkit-transform: rotate(160deg);
-ms-transform: rotate(160deg);
transform: rotate(160deg);
}
.circle-outer9:nth-of-type(14) {
-webkit-transform: rotate(173.33333deg);
-ms-transform: rotate(173.33333deg);
transform: rotate(173.33333deg);
}
.circle-outer9:nth-of-type(15) {
-webkit-transform: rotate(186.66667deg);
-ms-transform: rotate(186.66667deg);
transform: rotate(186.66667deg);
}
.circle-outer9:nth-of-type(16) {
-webkit-transform: rotate(200deg);
-ms-transform: rotate(200deg);
transform: rotate(200deg);
}
.circle-outer9:nth-of-type(17) {
-webkit-transform: rotate(213.33333deg);
-ms-transform: rotate(213.33333deg);
transform: rotate(213.33333deg);
}
.circle-outer9:nth-of-type(18) {
-webkit-transform: rotate(226.66667deg);
-ms-transform: rotate(226.66667deg);
transform: rotate(226.66667deg);
}
.circle-outer9:nth-of-type(19) {
-webkit-transform: rotate(240deg);
-ms-transform: rotate(240deg);
transform: rotate(240deg);
}
.circle-outer9:nth-of-type(20) {
-webkit-transform: rotate(253.33333deg);
-ms-transform: rotate(253.33333deg);
transform: rotate(253.33333deg);
}
.circle-outer9:nth-of-type(21) {
-webkit-transform: rotate(266.66667deg);
-ms-transform: rotate(266.66667deg);
transform: rotate(266.66667deg);
}
.circle-outer9:nth-of-type(22) {
-webkit-transform: rotate(280deg);
-ms-transform: rotate(280deg);
transform: rotate(280deg);
}
.circle-outer9:nth-of-type(23) {
-webkit-transform: rotate(293.33333deg);
-ms-transform: rotate(293.33333deg);
transform: rotate(293.33333deg);
}
.circle-outer9:nth-of-type(24) {
-webkit-transform: rotate(306.66667deg);
-ms-transform: rotate(306.66667deg);
transform: rotate(306.66667deg);
}
.circle-outer9:nth-of-type(25) {
-webkit-transform: rotate(320deg);
-ms-transform: rotate(320deg);
transform: rotate(320deg);
}
.circle-outer9:nth-of-type(26) {
-webkit-transform: rotate(333.33333deg);
-ms-transform: rotate(333.33333deg);
transform: rotate(333.33333deg);
}
.circle-outer9:nth-of-type(27) {
-webkit-transform: rotate(346.66667deg);
-ms-transform: rotate(346.66667deg);
transform: rotate(346.66667deg);
}
.circle-outer9:nth-of-type(28) {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
css3八卦,CSS3 八卦图推演漩涡相关推荐
- vbs画动态爱心代码_前端必看之如何用CSS3画一个八卦和爱心
昨天雷雨交加,燥热有所缓解.今晨空气清新,再加上马上三天小长假,心情很不错,祝各位小长假玩的开心.那么,今天就用CSS3做些"不正紧"的事:画八卦和爱心. CSS3我们一般都是用来 ...
- css3轮播不用jpuery_js和CSS3 3D轮播图
这是一款js和CSS3 3D轮播图.这组3D轮播图中,共演示了6种轮播图效果.这些3D轮播图都是通过简单的JS代码配合CSS3来完成的. 使用方法 HTML结构 以8张图片的3D轮播图为例,它的基本H ...
- html图片轮播怎么做的,CSS3制作轮播图的一种方法
轮播图,网页上经常能看得见,画面比较精美,下面是纯CSS3的轮播图的一种 下面是style部分: 这几行都能明白吧 *{margin:0;padding:0;} a{text-decoration:n ...
- （39）css3实现轮播图效果
css3的轮播图和js的轮播图的区别? css3:没有一些js的逻辑,优点,过渡动画比较漂亮,缺点:兼容问题.无法实现自动轮播和点击轮播一起同时出现的效果. js轮播图:js逻辑很多,可以做的很复杂, ...
- CSS3篮球场热力区域图
CSS3篮球场热力区域图 纯手工生成 文章目录 CSS3篮球场热力区域图 纯手工生成 如何制作 ps做草稿 css 敲代码 在哪里可用 太不容易了,脑子都要炸 了,如图所示,各个区域独立可点击,自己加 ...
- CSS3健身男孩平板卧推js特效
下载地址 CSS3健身男孩平板卧推特效是一款纯CSS3绘制的卡通健身男孩平板卧推健身图形动画特效. dd:
- CSS3中perspective、perspective-origin、transform-style: preserve-3d和transform中的rotate详细解释、纯CSS3动画正方体贴图
目录 transform-style: preserve-3d perspective perspective-origin rotate translate 纯CSS3动画正方体贴图小项目链接和GI ...
- html轮播台袋效果,css3百叶窗轮播图效果
标题 #Con{width:900px; /*宽度*/ height:500px;/*高度*/ background:#9933FF;/*背景颜色*/ position:relative;} #con ...
- CSS3动画实现背景图轮播
CSS3动画实现背景图轮播 利用css3动画切换背景图的路径:使这个动画无限循环下去,以实现背景图切换的效果. 代码: <!DOCTYPE html> <html lang=&quo ...
最新文章
- 企业信息化所面临的问题
- Web前端开发人员和设计师必读文章推荐【系列七】
- NCL 小图对其问题
- [BZOJ 1070][SCOI2007]修车（费用流）
- python opencv 4.1.0 cv2.convertScaleAbs()函数 （通过线性变换将数据转换成8位[uint8]）（用于Intel Realsense D435显示depth图像）
- 【算法知识】详解希尔排序算法
- Network Emulation（网格模拟）
- jQuery插件FontSizer实现自定义动态调整网页文字大小
- BamlViewer修改
- java编程50题和解释_最新JAVA编程题全集(50题及答案)29515
- 代码审查工具 FindBugs
- 如何成为一名数据分析师
- 原 《老路用得上的商学课》86-90学习笔记
- 基于MATLAB波的叠加仿真模拟
- TFT-液晶显示屏的结构和原理
- Rhino6.25软件安装教程|兼容WIN10
- openpyxl 获取worksheet颜色
- 接口中的变量public static final
- 计算 某一天据今天有多少天
- 【C#】关闭 Window 之后，无法设置 Visibility，也无法调用 Show、ShowDialogor 或 WindowInteropHelper.EnsureHandle