纯css打造线条组合显示时间的动态效果
代码语言：html
所属分类：布局界面
代码描述：纯css打造线条组合显示时间的动态效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:300,400'>
<style>
/* CONFIGURATION */
/* DEFINE CHARACTERS (0-9 and colon) */
/* HELPER FUNCTIONS */
/* STYLING */
body {
background: #212121;
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
text-align: center;
color: white;
}
h1 {
color: #e91e63;
font-weight: 300;
font-size: 3rem;
margin-bottom: 0;
}
p {
color: #b6b6b6;
}
a {
color: inherit;
}
label {
display: inline-block;
padding: .5rem 1rem;
text-transform: uppercase;
letter-spacing: 1px;
background: #e91e63;
border-radius: 2px;
cursor: pointer;
position: relative;
}
label:before {
content: attr(data-trigger-off);
}
label:hover {
background: #c2185b;
box-shadow: 0 3px 5px 0 black;
}
label:active {
top: 1px;
}
*, *:before, *:after {
box-sizing: border-box;
transition: all 200ms linear;
}
.clock {
display: flex;
width: 750px;
margin: 3rem auto 0;
}
.no {
display: flex;
flex-wrap: wrap;
width: 150px;
}
.no > * {
width: 20%;
height: 30px;
background: black;
border: 1px solid rgba(182, 182, 182, 0.4);
position: relative;
border-radius: 50%;
}
.no > *:before, .no > *:after {
content: '';
display: block;
position: absolute;
width: 2px;
height: 47.5%;
background: white;
transform-origin: bottom center;
left: 50%;
top: 10%;
}
/* MIXINS */
/* INCREMENT NUMBERS */
/* SET INITIAL NUMBERS */
.no > *:nth-child(1):before {
transform: rotateZ(90deg);
}
.no > *:nth-child(1):after {
transform: rotateZ(180deg);
}
.no > *:nth-child(2):before {
transform: rotateZ(270deg);
}
.no > *:nth-child(2):after {
transform: rotateZ(90deg);
}
.no > *:nth-child(3):before {
transform: rotateZ(270deg);
}
.no > *:nth-child(3):after {
transform: rotateZ(90deg);
}
.no > *:nth-child(4):before {
transform: rotateZ(270deg);
}
.no > *:nth-child(4):after {
transform: rotateZ(90deg);
}
.no > *:nth-child(5):before {
transform: rotateZ(270deg);
}
.no > *:nth-child(5):after {
transform: rotateZ(180deg);
}
.no > *:nth-child(6):before {
transform: rotateZ(0deg);
}
.no > *:nth-child(6):after {
transform: rotateZ(180deg);
}
.no > *:nth-child(7):before {
transform: rotateZ(90deg);
}
.no > *:nth-child(7):after {
transform: rotateZ(180deg);
}
.no > *:nth-child(8):before {
transform: rotateZ(270deg);
}
.no > *:nth-child(8):after {
transform: rotateZ(90deg);
}
.no > *:nth-child(9):before {
transform: rotateZ(270deg);
}
.no > *:nth-child(9):after {
transform: rotateZ(180deg);
}
.no > *:nth-child(10):before {
transform: rotateZ(0deg);
}
.no > *:nth-child(10):after {
transform: rotateZ(180deg);
}
.no > *:nth-child(11):before {
transform: rotateZ(0deg);
}
.no > *:nth-child(11):after {
transform: rotateZ(180deg);
}
.no > *:nth-child(12):before {
transform: rotateZ(0deg);
}
.no > *:nth-child(12):after {
transform: rotateZ(180deg);
}
.no > *:nth-child(13):before {
transform: rotateZ(45deg);
}
.no > *:nth-child(13):after {
transform: rotateZ(45deg);
}
.no > *:nth-child(14):before {
transform: rotateZ(0deg);
}
.no > *:nth-child(14):after {
transform: rotateZ(180deg);
}
.no > *:nth-child(15):before {
transform: rotateZ(0deg);
}
.no > *:nth-child(15):after {
transform: rotateZ(180deg);
}
.no > *:nth-child(16):before {
transform: rotateZ(0deg);
}
.no > *:nth-child(16):after {
transform: rotateZ(180deg);
}
.no > *:nth-child(17):before {
transform: rotateZ(0deg);
}
.no > *:nth-child(17):after {
transform: rotateZ(180deg);
}
.no > *:nth-child(18):before {
transform: rotateZ(45deg);
}
.no > *:nth-child(18):after {
transform: rotateZ(45deg);
}
.no > *:nth-child(19):before {
transform: rotateZ(0deg);
}
.no > *:nth-child(19):after {
transform: rotateZ(180deg);
}
.no > *:nth-child(20):before {
transform: rotateZ(0deg);
}
.no > *:nth-child(20):after {
transform: rotateZ(180deg);
}
.no > *:nth-child(21):before {
transform: rotateZ(0deg);
}
.no > *:nth-child(21):after {
transform: rotateZ(180deg);
}
.no > *:nth-child(22):before {
transform: rotateZ(0deg);
}
.no > *:nth-child(22):after {
transform: rotateZ(90deg);
}
.no > *:nth-child(23):before {
transform: rotateZ(270deg);
}
.no > *:nth-child(23):after {
transform: rotateZ(90deg);
}
.no > *:nth-child(24):before {
transform: rotateZ(270deg);
}
.no > *:nth-child(24):after {
transform: rotateZ(0deg);
}
.no > *:nth-child(25):before {
transform: rotateZ(0deg);
}
.no > *:nth-child(25):after {
transform: rotateZ(180deg);
}
.no > *:nth-child(26):before {
transform: rotateZ(0deg);
}
.no > *:nth-child(26):after {
transform: rotateZ(90deg);
}
.no > *:nth-child(27):before {
transform: rotateZ(270deg);
}
.no > *:nth-child(27):after {
transform: rotateZ(90deg);
}
.no > *:nth-child(28):before {
transform: rotateZ(270deg);
}
.no > *:nth-child(28):after {
transform: rotateZ(90deg);
}
.no > *:nth-child(29):before {
transform: rotateZ(270deg);
}
.no > *:nth-child(29):after {
transform: rotateZ(90deg);
}
.no > *:nth-child(30):before {
transform: rotateZ(270deg);
}
.no > *:nth-child(30):after {
transform: rotateZ(0deg);
}
.no--colon > *:nth-child(1):before {
transform: rotateZ(45deg);
}
.no--colon > *:nth-child(1):after {
transform: rotateZ(45deg);
}
.no--colon > *:nth-child(2):before {
transform: rotateZ(45deg);
}
.no--colon > *:nth-child(2):after {
transform: rotateZ(45deg);
}
.no--colon > *:nth-child(3):before {
transform: rotateZ(45deg);
}
.no--colon > *:nth-child(3):after {
transform: rotateZ(45deg);
}
.no--colon > *:nth-child(4):before {
transform: rotateZ(45deg);
}
.no--colon > *:nth-child(4):after {
transform: rotateZ(45deg);
}
.no--colon > *:nth-child(5):before {
transform: rotateZ(45deg);
}
.no--colon > *:nth-child(5):after {
transform: rotateZ(45deg);
}
.no--colon > *:nth-child(6):before {
transform: rotateZ(45deg);
}
.no--colon > *:nth-child(6):after {
transform: rotateZ(45deg);
}
.no--colon > *:nth-child(7):before {
transform: rotateZ(90deg);
}
.no--colon > *:nth-child(7):after {
transform: rotateZ(180deg);
}
.no--colon > *:nth-child(8):before {
transform: rotateZ(270deg);
}
.no--colon > *:nth-child(8):after {
transform: rotateZ(90deg);
}
.no--colon > *:nth-child(9):before {
transform: rotateZ(270deg);
}
.no--colon > *:nth-child(9):after {
transform: rotateZ(180deg);
}
.no--colon > *:nth-child(10):before {
transform: rotateZ(45deg);
}
.no--colon > *:nth-child(10):after {
transform: rotateZ(45deg);
}
.no--colon > *:nth-child(11):before {
transform: rotateZ(45deg);
}
.no--colon > *:nth-child(11):after {
transform: rotateZ(45deg);
}
.no--colon > *:nth-child(12):before {
transform: rotateZ(0deg);
}
.no--colon > *:nth-child(12):after {
transform: rotateZ(90deg);
}
.no--colon > *:nth-child(13):before {
transform: rotateZ(270deg);
}
.no--colon > *:nth-child(13):after {
transform: rotateZ(90deg);
}
.no--colon > *:nth-child(14):before {
transform: rotateZ(0deg);
}
.no--colon > *:nth-child(14):after {
transform: rotateZ(270deg);
}
.no--colon > *:nth-child(15):before {
transform: rotateZ(45deg);
}
.no--colon > *:nth-child(15):after {
transform: rotateZ(45deg);
}
.no--colon > *:nth-child(16):before {
transform: rotateZ(45deg);
}
.no--colon > *:nth-child(16):after {
transform: rotateZ(45deg);
}
.no--colon > *:nth-child(17):before {
transform: rotateZ(90deg);
}
.no--colon > *:nth-child(17):after {
transform: rotateZ(180deg);
}
.no--colon > *:nth-child(18):before {
transform: rotateZ(270deg);
}
.no--colon > *:nth-child(18):after {
transform: rotateZ(90deg);
}
.no--colon > *:nth-child(19):before {
transform: rotateZ(270deg);
}
.no--colon > *:nth-child(19):after {
transform: rotateZ(180deg);
}
.no--colon > *:nth-child(20):before {
transform: rotateZ(45deg);
}
.no--colon > *:nth-child(20):after {
transform: rotateZ(45deg);
}
.no--colon > *:nth-child(21):before {
transform: rotateZ(45deg);
}
.no--colon > *:nth-child(21):after {
transform: rotateZ(45deg);
}
.no--colon > *:nth-child(22):before {
transform: rotateZ(0deg);
}
.no--colon > *:nth-child(22):after {
transform: rotateZ(90deg);
}
.no--colon > *:nth-child(23):before {
transform: rotateZ(270deg);
}
.no--colon > *:nth-child(23):after {
transform: rotateZ(90deg);
}
.no--colon > *:nth-child(24):before {
transform: rotateZ(0deg);
}
.no--colon > *:nth-child(24):after {
transform: rotateZ(270deg);
}
.no--colon > *:nth-child(25):before {
transform: rotateZ(45deg);
}
.no--colon > *:nth-child(25):after {
transform: rotateZ(45deg);
}
.no--colon > *:nth-child(26):before {
transform: rotateZ(45deg);
}
.no--colon > *:nth-child(26):after {
transform: rotateZ(45deg);
}
.no--colon > *:nth-child(27):before {
transform: rotateZ(45deg);
}
.no--colon > *:nth-child(27):after {
transform: rotateZ(45deg);
}
.no--colon > *:nth-child(28):before {
transform: rotateZ(45deg);
}
.no--colon > *:nth-child(28):after {
transform: rotateZ(45deg);
}
.no--colon > *:nth-child(29):before {
transform: rotateZ(45deg);
}
.no--colon > *:nth-child(29):after {
transform: rotateZ(45deg);
}
.no--colon > *:nth-child(30):before {
transform: rotateZ(45deg);
}
.no--colon > *:nth-child(30):after {
transform: rotateZ(45deg);
}
.no--min-units > *:nth-child(1):before {
animation: min-units-before-1 600s infinite;
}
.no--min-units > *:nth-child(1):after {
animation: min-units-after-1 600s infinite;
}
@keyframes min-units-before-1 {
8% {
transform: rotateZ(90deg);
}
10% {
transform: rotateZ(45deg);
}
18% {
transform: rotateZ(45deg);
}
20% {
transform: rotateZ(90deg);
}
28% {
transform: rotateZ(90deg);
}
30% {
transform: rotateZ(90deg);
}
38% {
transform: rotateZ(90deg);
}
40% {
transform: rotateZ(90deg);
}
48% {
transform: rotateZ(90deg);
}
50% {
transform: rotateZ(90deg);
}
58% {
transform: rotateZ(90deg);
}
60% {
transform: rotateZ(90deg);
}
68% {
transform: rotateZ(90deg);
}
70% {
transform: rotateZ(90deg);
}
78% {
transform: rotateZ(90deg);
}
80% {
transform: rotateZ(90deg);
}
88% {
transform: rotateZ(90deg);
}
90% {
transform: rotateZ(90deg);
}
98% {
transform: rotateZ(90deg);
}
}
@keyframes min-units-after-1 {
8% {
transform: rotateZ(180deg);
}
10% {
transform: rotateZ(45deg);
}
18% {
transform: rotateZ(45deg);
}
20% {
transform: rotateZ(180deg);
}
28% {
transform: rotateZ(180deg);
}
30% {
transform: rotateZ(180deg);
}
38% {
transform: rotateZ(180deg);
}
40% {
transform: rotateZ(180deg);
}
48% {
transform: rotateZ(180deg);
}
50% {
transform: rotateZ(180deg);
}
58% {
transform: rotateZ(180deg);
}
60% {
transform: rotateZ(180deg);
}
68% {
transform: rotateZ(180deg);
}
70% {
transform: rotateZ(180deg);
}
78% {
transform: rotateZ(180deg);
}
80% {
transform: rotateZ(180deg);
}
88% {
transform: rotateZ(180deg);
}
90% {
transform: rotateZ(180deg);
}
98% {
transform: rotateZ(180deg);
}
}
.no--min-units > *:nth-child(2):before {
animation: min-units-before-2 600s infinite;
}
.no--min-units > *:nth-child(2):after {
animation: min-units-after-2 600s infinite;
}
@keyframes min-units-before-2 {
8% {
transform: rotateZ(270deg);
}
10% {
transform: rotateZ(90deg);
}
18% {
transform: rotateZ(90deg);
}
20% {
transform: rotateZ(270deg);
}
28% {
transform: rotateZ(270deg);
}
30% {
transform: rotateZ(270deg);
}
38% {
transform: rotateZ(270deg);
}
40% {
transform: rotateZ(270deg);
}
48% {
transform: rotateZ(270deg);
}
50% {
transform: rotateZ(270deg);
}
58% {
transform: rotateZ(270deg);
}
60% {
transform: rotateZ(270deg);
}
68% {
transform: rotateZ(270deg);
}
70% {
transform: rotateZ(270deg);
}
78% {
transform: rotateZ(270deg);
}
80% {
transform: rotateZ(270deg);
}
88% {
transform: rotateZ(270deg);
}
90% {
transform: rotateZ(270deg);
}
98% {
transform: rotateZ(270deg);
}
}
@keyframes min-units-after-2 {
8% {
transform: rotateZ(90deg);
}
10% {
transform: rotateZ(180deg);
}
18% {
transform: rotateZ(180deg);
}
20% {
transform: rotateZ(90deg);
}
28% {
transform: rotateZ(90deg);
}
30% {
transform: rotateZ(90deg);
}
38% {
transform: rotateZ(90deg);
}
40% {
transform: rotateZ(180deg);
}
48% {
transform: rotateZ(180deg);
}
50% {
transform: rotateZ(90deg);
}
58% {
transform: rotateZ(90deg);
}
60% {
transform: rotateZ(90deg);
}
68% {
transform: rotateZ(90deg);
}
70% {
transform: rotateZ(90deg);
}
78% {
transform: rotateZ(90deg);
}
80% {
transform: rotateZ(90deg);
}
88% {
transform: rotateZ(90deg);
}
90% {
transform: rotateZ(90deg);
}
98% {
transform: rotateZ(90deg);
}
}
.no--min-units > *:nth-child(3):before {
animation: min-units-before-3 600s infinite;
}
.no--min-units > *:nth-child(3):after {
animation: min-units-after-3 600s infinite;
}
@keyframes min-units-before-3 {
8% {
transform: rotateZ(270deg);
}
10% {
transform: rotateZ(270deg);
}
18% {
transform: rotateZ(270deg);
}
20% {
transform: rotateZ(270deg);
}
28% {
transform: rotateZ(270deg);
}
30% {
transform: rotateZ(270deg);
}
38% {
transform: rotateZ(270deg);
}
40% {
transform: rotateZ(45deg);
}
48% {
transform: rotateZ(45deg);
}
50% {
transform: rotateZ(270deg);
}
58% {
transform: rotateZ(270deg);
}
60% {
transform: rotateZ(270deg);
}
68% {
transform: rotateZ(270deg);
}
70% {
transform: rotateZ(270deg);
}
78% {
transform: rotateZ(270deg);
}
80% {
transform: rotateZ(270deg);
}
88% {
transform: rotateZ(270deg);
}
90% {
transform: rotateZ(270deg);
}
98% {
transform: rotateZ(270deg);
}
}
@keyframes min-units-after-3 {
8% {
transform: rotateZ(90deg);
}
10% {
transform: rotateZ(90deg);
}
18% {
transform: rotateZ(90deg);
}
20% {
transform: rotateZ(90deg);
}
28% {
transform: rotateZ(90deg);
}
30% {
transform: rotateZ(90deg);
}
38% {
transform: rotateZ(90deg);
}
40% {
transform: rotateZ(45deg);
}
48% {
transform: rotateZ(45deg);
}
50% {
transform: rotateZ(90deg);
}
58% {
transform: rotateZ(90deg);
}
60% {
transform: rotateZ(90deg);
}
68% {
transform: rotateZ(90deg);
}
70% {
transform: rotateZ(90deg);
}
78% {
transform: rotateZ(90deg);
}
80% {
transform: rotateZ(90deg);
}
88% {
transform: rotateZ(90deg);
}
90% {
transform: rotateZ(90deg);
}
98% {
transform: rotateZ(90deg);
}
}
.no--min-units > *:nth-child(4):before {
animation: min-units-before-4 600s infinite;
}
.no--min-units > *:nth-child(4):after {
animation: min-units-after-4 600s infinite;
}
@keyframes min-units-before-4 {
8% {
transform: rotateZ(270deg);
}
10% {
transform: rotateZ(270deg);
}
18% {
transform: rotateZ(270deg);
}
20% {
transform: rotateZ(270deg);
}
28% {
transform: rotateZ(270deg);
}
30% {
transform: rotateZ(270deg);
}
38% {
transform: rotateZ(270deg);
}
40% {
transform: rotateZ(45deg);
}
48% {
transform: rotateZ(45deg);
}
50% {
transform: rotateZ(270deg);
}
58% {
transform: rotateZ(270deg);
}
60% {
transform: rotateZ(270deg);
}
68% {
transform: rotateZ(270deg);
}
70% {
transform: rotateZ(270deg);
}
78% {
transform: rotateZ(270deg);
}
80% {
transform: rotateZ(270deg);
}
88% {
transform: rotateZ(270deg);
}
90% {
transform: rotateZ(270deg);
}
98% {
transform: rotateZ(270deg);
}
}
@keyframes min-units-after-4 {
8% {
transform: rotateZ(90deg);
}
10% {
transform: rotateZ(180deg);
}
18% {
transform: rotateZ(180deg);
}
20% {
transform: rotateZ(90deg);
}
28% {
transform: rotateZ(90deg);
}
30% {
transform: rotateZ(90deg);
}
38% {
transform: rotateZ(90deg);
}
40% {
transform: rotateZ(45deg);
}
48% {
transform: rotateZ(45deg);
}
50% {
transform: rotateZ(90deg);
}
58% {
transform: rotateZ(90deg);
}
60% {
transform: rotateZ(90deg);
}
68% {
transform: rotateZ(90deg);
}
70% {
transform: rotateZ(90deg);
}
78% {
transform: rotateZ(90deg);
}
80% {
transform: rotateZ(90deg);
}
88% {
transform: rotateZ(90deg);
}
90% {
transform: rotateZ(90deg);
}
98% {
transform: rotateZ(90deg);
}
}
.no--min-units > *:nth-child(5):before {
animation: min-units-before-5 600s infinite;
}
.no--min-units > *:nth-child(5):after {
animation: min-units-after-5 600s infinite;
}
@keyframes min-units-before-5 {
8% {
transform: rotateZ(270deg);
}
10% {
transform: rotateZ(45deg);
}
18% {
transform: rotateZ(45deg);
}
20% {
transform: rotateZ(270deg);
}
28% {
transform: rotateZ(270deg);
}
30% {
transform: rotateZ(270deg);
}
38% {
transform: rotateZ(270deg);
}
40% {
transform: rotateZ(45deg);
}
48% {
transform: rotateZ(45deg);
}
50% {
transform: rotateZ(270deg);
}
58% {
transform: rotateZ(270deg);
}
60% {
transform: rotateZ(270deg);
}
68% {
transform: rotateZ(270deg);
}
70% {
transform: rotateZ(270deg);
}
78% {
transform: rotateZ(270deg);
}
80% {
transform: rotateZ(270deg);
}
88% {
transform: rotateZ(270deg);
}
90% {
transform: rotateZ(270deg);
}
98% {
transform: rotateZ(270deg);
}
}
@keyframes min-units-after-5 {
8% {
transform: rotateZ(180deg);
}
10% {
transform: rotateZ(45deg);
}
18% {
transform: rotateZ(45deg);
}
20% {
transform: rotateZ(180deg);
}
28% {
transform: rotateZ(180deg);
}
30% {
transform: rotateZ(180deg);
}
38% {
transform: rotateZ(180deg);
}
40% {
transform: rotateZ(45deg);
}
48% {
transform: rotateZ(45deg);
}
50% {
transform: rotateZ(180deg);
}
58% {
transform: rotateZ(180deg);
}
60% {
transform: rotateZ(180deg);
}
68% {
transform: rotateZ(180deg);
}
70% {
transform: rotateZ(180deg);
}
78% {
transform: rotateZ(180deg);
}
80% {
transform: rotateZ(180deg);
}
88% {
transform: rotateZ(180deg);
}
90% {
transform: rotateZ(180deg);
}
98% {
transform: rotateZ(180deg);
}
}
.no--min-units > *:nth-child(6):before {
animation: min-units-before-6 600s infinite;
}
.no--min-units > *:nth-child(6):after {
animation: min-units-after-6 600s infinite;
}
@keyframes min-units-before-6 {
8% {
transform: rotateZ(0deg);
}
10% {
transform: rotateZ(45deg);
}
18% {
transform: rotateZ(45deg);
}
20% {
transform: rotateZ(0deg);
}
28% {
transform: rotateZ(0deg);
}
30% {
transform: rotateZ(0deg);
}
38% {
transform: rotateZ(0deg);
}
40% {
transform: rotateZ(0deg);
}
48% {
transform: rotateZ(0deg);
}
50% {
transform: rotateZ(0deg);
}
58% {
transform: rotateZ(0deg);
}
60% {
transform: rotateZ(0deg);
}
68% {
transform: rotateZ(0deg);
}
70% {
transform: rotateZ(0deg);
}
78% {
transform: rotateZ(0deg);
}
80% {
transform: rotateZ(0deg);
}
88% {
transform: rotateZ(0deg);
}
90% {
transform: rotateZ(0deg);
}
98% {
transform: rotateZ(0deg);
}
}
@keyframes min-units-after-6 {
8% {
transform: rotateZ(180deg);
}
10% {
transform: rotateZ(45deg);
}
18% {
transform: rotateZ(45deg);
}
20% {
transform: rotateZ(90deg);
}
28% {
transform: rotateZ(90deg);
}
30% {
transform: rotateZ(90deg);
}
38% {
transform: rotateZ(90deg);
}
40% {
transform: rotateZ(180deg);
}
48% {
transform: rotateZ(180deg);
}
50% {
transform: rotateZ(180deg);
}
58% {
transform: rotateZ(180deg);
}
60% {
transform: rotateZ(180deg);
}
68% {
transform: rotateZ(180deg);
}
70% {
transform: rotateZ(90deg);
}
78% {
transform: rotateZ(90deg);
}
80% {
transform: rotateZ(180deg);
}
88% {
transform: rotateZ(180deg);
}
90% {
transform: rotateZ(180deg);
}
98% {
transform: rotateZ(180deg);
}
}
.no--min-units > *:nth-child(7):before {
animation: min-units-before-7 600s infinite;
}
.no--min-units > *:nth-child(7):after {
animation: min-units-after-7 600s infinite;
}
@keyframes min-units-before-7 {
8% {
transform: rotateZ(90deg);
}
10% {
transform: rotateZ(0deg);
}
18% {
transform: rotateZ(0deg);
}
20% {
transform: rotateZ(270deg);
}
28% {
transform: rotateZ(270deg);
}
30% {
transform: rotateZ(270deg);
}
38% {
transform: rotateZ(270deg);
}
40% {
transform: rotateZ(0deg);
}
48% {
transform: rotateZ(0deg);
}
50% {
transform: rotateZ(90deg);
}
58% {
transform: rotateZ(90deg);
}
60% {
transform: rotateZ(90deg);
}
68% {
transform: rotateZ(90deg);
}
70% {
transform: rotateZ(270deg);
}
78% {
transform: rotateZ(270deg);
}
80% {
transform: rotateZ(90deg);
}
88% {
transform: rotateZ(90deg);
}
90% {
transform: rotateZ(90deg);
}
98% {
transform: rotateZ(90deg);
}
}
@keyframes min-units-after-7 {
8% {
transform: rotateZ(180deg);
}
10% {
transform: rotateZ(90deg);
}
18% {
transform: rotateZ(90deg);
}
20% {
transform: rotateZ(90deg);
}
28% {
transform: rotateZ(90deg);
}
30% {
transform: rotateZ(90deg);
}
38% {
transform: rotateZ(90deg);
}
40% {
transform: rotateZ(180deg);
}
48% {
transform: rotateZ(180deg);
}
50% {
transform: rotateZ(180deg);
}
58% {
transform: rotateZ(180deg);
}
60% {
transform: rotateZ(180deg);
}
68% {
transform: rotateZ(180deg);
}
70% {
transform: rotateZ(90deg);
}
78% {
transform: rotateZ(90deg);
}
80% {
transform: rotateZ(180deg);
}
88% {
transform: rotateZ(180deg);
}
90% {
transform: rotateZ(180deg);
}
98% {
transform: rotateZ(180deg);
}
}
.no--min-units > *:nth-child(8):before {
animation: min-units-before-8 600s infinite;
}
.no--min-units > *:nth-child(8):after {
animation: min-units-after-8 600s infinite;
}
@keyframes min-units-before-8 {
8% {
transform: rotateZ(270deg);
}
10% {
transform: rotateZ(270deg);
}
18% {
transform: rotateZ(270deg);
}
20% {
transform: rotateZ(270deg);
}
28% {
transform: rotateZ(270deg);
}
30% {
transform: rotateZ(270deg);
}
38% {
transform: rotateZ(270deg);
}
40% {
transform: rotateZ(45deg);
}
48% {
transform: rotateZ(45deg);
}
50% {
transform: rotateZ(270deg);
}
58% {
transform: rotateZ(270deg);
}
60% {
transform: rotateZ(270deg);
}
68% {
transform: rotateZ(270deg);
}
70% {
transform: rotateZ(270deg);
}
78% {
transform: rotateZ(270deg);
}
80% {
transform: rotateZ(270deg);
}
88% {
transform: rotateZ(270deg);
}
90% {
transform: rotateZ(270deg);
}
98% {
transform: rotateZ(270deg);
}
}
@keyframes min-units-after-8 {
8% {
transform: rotateZ(90deg);
}
10% {
transform: rotateZ(180deg);
}
18% {
transform: rotateZ(180deg);
}
20% {
transform: rotateZ(90deg);
}
28% {
transform: rotateZ(90deg);
}
30% {
transform: rotateZ(90deg);
}
38% {
transform: rotateZ(90deg);
}
40% {
transform: rotateZ(45deg);
}
48% {
transform: rotateZ(45deg);
}
50% {
transform: rotateZ(90deg);
}
58% {
transform: rotateZ(90deg);
}
60% {
transform: rotateZ(90deg);
}
68% {
transform: rotateZ(90deg);
}
70% {
transform: rotateZ(90deg);
}
78% {
transform: rotateZ(90deg);
}
80% {
transform: rotateZ(90deg);
}
88% {
transform: rotateZ(90deg);
}
90% {
transform: rotateZ(90deg);
}
98% {
transform: rotateZ(90deg);
}
}
.no--min-units > *:nth-child(9):before {
animation: min-units-before-9 600s infinite;
}
.no--min-units > *:nth-child(9):after {
animation: min-units-after-9 600s infinite;
}
@keyframes min-units-before-9 {
8% {
transform: rotateZ(270deg);
}
10% {
transform: rotateZ(0deg);
}
18% {
transform: rotateZ(0deg);
}
20% {
transform: rotateZ(270deg);
}
28% {
transform: rotateZ(270deg);
}
30% {
transform: rotateZ(270deg);
}
38% {
transform: rotateZ(270deg);
}
40% {
transform: rotateZ(45deg);
}
48% {
transform: rotateZ(45deg);
}
50% {
transform: rotateZ(270deg);
}
58% {
transform: rotateZ(270deg);
}
60% {
transform: rotateZ(270deg);
}
68% {
transform: rotateZ(270deg);
}
70% {
transform: rotateZ(270deg);
}
78% {
transform: rotateZ(270deg);
}
80% {
transform: rotateZ(270deg);
}
88% {
transform: rotateZ(270deg);
}
90% {
transform: rotateZ(270deg);
}
98% {
transform: rotateZ(270deg);
}
}
@keyframes min-units-after-9 {
8% {
transform: rotateZ(180deg);
}
10% {
transform: rotateZ(180deg);
}
18% {
transform: rotateZ(180deg);
}
20% {
transform: rotateZ(180deg);
}
28% {
transform: rotateZ(180deg);
}
30% {
transform: rotateZ(180deg);
}
38% {
transform: rotateZ(180deg);
}
40% {
transform: rotateZ(45deg);
}
48% {
transform: rotateZ(45deg);
}
50% {
transform: rotateZ(90deg);
}
58% {
transform: rotateZ(90deg);
}
60% {
transform: rotateZ(90deg);
}
68% {
transform: rotateZ(90deg);
}
70% {
transform: rotateZ(180deg);
}
78% {
transform: rotateZ(180deg);
}
80% {
transform: rotateZ(180deg);
}
88% {
transform: rotateZ(180deg);
}
90% {
transform: rotateZ(180deg);
}
98% {
transform: rotateZ(180deg);
}
}
.no--min-units > *:nth-child(10):before {
animation: min-units-before-10 600s infinite;
}
.no--min-units > *:nth-child(10):after {
animation: min-units-after-10 600s infinite;
}
@keyframes min-units-before-10 {
8% {
transform: rotateZ(0deg);
}
10% {
transform: rotateZ(45deg);
}
18% {
transform: rotateZ(45deg);
}
20% {
transform: rotateZ(0deg);
}
28% {
transform: rotateZ(0deg);
}
30% {
transform: rotateZ(0deg);
}
38% {
transform: rotateZ(0deg);
}
40% {
transform: rotateZ(45deg);
}
48% {
transform: rotateZ(45deg);
}
50% {
transform: rotateZ(0deg);
}
58% {
transform: rotateZ(0deg);
}
60% {
transform: rotateZ(0deg);
}
68% {
transform: rotateZ(0deg);
}
70% {
transform: rotateZ(0deg);
}
78% {
transform: rotateZ(0deg);
}
80% {
transform: rotateZ(0deg);
}
88% {
transform: rotateZ(0deg);
}
90% {
transform: rotateZ(0deg);
}
98% {
transform: rotateZ(0deg);
}
}
@keyframes min-units-after-10 {
8% {
transform: rotateZ(180deg);
}
10% {
transform: rotateZ(45deg);
}
18% {
transform: rotateZ(45deg);
}
20% {
transform: rotateZ(180deg);
}
28% {
transform: rotateZ(180deg);
}
30% {
transform: rotateZ(180deg);
}
38% {
transform: rotateZ(180deg);
}
40% {
transform: rotateZ(45deg);
}
48% {
transform: rotateZ(45deg);
}
50% {
transform: rotateZ(270deg);
}
58% {
transform: rotateZ(270deg);
}
60% {
transform: rotateZ(270deg);
}
68% {
transform: rotateZ(270deg);
}
70% {
transform: rotateZ(180deg);
}
78% {
transform: rotateZ(180deg);
}
80% {
transform: rotateZ(180deg);
}
88% {
transform: rotateZ(180deg);
}
90% {
transform: rotateZ(180deg);
}
98% {
transform: rotateZ(180deg);
}
}
.no--min-units > *:nth-child(11):before {
animation: min-units-before-11 600s infinite;
}
.no--min-units > *:nth-child(11):after {
animation: min-units-after-11 600s infinite;
}
@keyframes min-units-before-11 {
8% {
transform: rotateZ(0deg);
}
10% {
transform: rotateZ(45deg);
}
18% {
transform: rotateZ(45deg);
}
20% {
transform: rotateZ(90deg);
}
28% {
transform: rotateZ(90deg);
}
30% {
transform: rotateZ(45deg);
}
38% {
transform: rotateZ(45deg);
}
40% {
transform: rotateZ(0deg);
}
48% {
transform: rotateZ(0deg);
}
50% {
transform: rotateZ(0deg);
}
58% {
transform: rotateZ(0deg);
}
60% {
transform: rotateZ(0deg);
}
68% {
transform: rotateZ(0deg);
}
70% {
transform: rotateZ(45deg);
}
78% {
transform: rotateZ(45deg);
}
80% {
transform: rotateZ(0deg);
}
88% {
transform: rotateZ(0deg);
}
90% {
transform: rotateZ(0deg);
}
98% {
transform: rotateZ(0deg);
}
}
@keyframes min-units-after-11 {
8% {
transform: rotateZ(180deg);
}
10% {
transform: rotateZ(45deg);
}
18% {
transform: rotateZ(45deg);
}
20% {
transform: rotateZ(180deg);
}
28% {
transform: rotateZ(180deg);
}
30% {
transform: rotateZ(45deg);
}
38% {
transform: rotateZ(45deg);
}
40% {
transform: rotateZ(180deg);
}
48% {
transform: rotateZ(180deg);
}
50% {
transform: rotateZ(180deg);
}
58% {
transform: rotateZ(180deg);
}
60% {
transform: rotateZ(180deg);
}
68% {
transform: rotateZ(180deg);
}
70% {
transform: rotateZ(45deg);
}
78% {
transform: rotateZ(45deg);
}
80% {
transform: rotateZ(180deg);
}
88% {
transform: rotateZ(180deg);
}
90% {
transform: rotateZ(180deg);
}
98% {
transform: rotateZ(180deg);
}
}
.no--min-units > *:nth-child(12):before {
animation: min-units-before-12 600s infinite;
}
.no--min-units > *:nth-child(12):after {
animation: min-units-after-12 600s infinite;
}
@keyframes min-units-before-12 {
8% {
transform: rotateZ(0deg);
}
10% {
transform: rotateZ(45deg);
}
18% {
transform: rotateZ(45deg);
}
20% {
transform: rotateZ(270deg);
}
28% {
transform: rotateZ(270deg);
}
30% {
transform: rotateZ(90deg);
}
38% {
transform: rotateZ(90deg);
}
40% {
transform: rotateZ(0deg);
}
48% {
transform: rotateZ(0deg);
}
50% {
transform: rotateZ(0deg);
}
58% {
transform: rotateZ(0deg);
}
60% {
transform: rotateZ(0deg);
}
68% {
transform: rotateZ(0deg);
}
70% {
transform: rotateZ(45deg);
}
78% {
transform: rotateZ(45deg);
}
80% {
transform: rotateZ(0deg);
}
88% {
transform: rotateZ(0deg);
}
90% {
transform: rotateZ(0deg);
}
98% {
transform: rotateZ(0deg);
}
}
@keyframes min-units-after-12 {
8% {
transform: rotateZ(180deg);
}
10% {
transform: rotateZ(45deg);
}
18% {
transform: rotateZ(45deg);
}
20% {
transform: rotateZ(90deg);
}
28% {
transform: rotateZ(90deg);
}
30% {
transform: rotateZ(180deg);
}
38% {
transform: rotateZ(180deg);
}
40% {
transform: rotateZ(180deg);
}
48% {
transform: rotateZ(180deg);
}
50% {
transform: rotateZ(90deg);
}
58% {
transform: rotateZ(90deg);
}
60% {
transform: rotateZ(90deg);
}
68% {
transform: rotateZ(90deg);
}
70% {
transform: rotateZ(45deg);
}
78% {
transform: rotateZ(45deg);
}
80% {
transform: rotateZ(90deg);
}
88% {
transform: rotateZ(90deg);
}
90% {
transform: rotateZ(90deg);
}
98% {
transform: rotateZ(90deg);
}
}
.no--min-units > *:nth-child(13):before {
animation: min-units-before-13 600s infinite;
}
.no--min-units > *:nth-child(13):after {
animation: min-units-after-13 600s infinite;
}
@keyframes min-units-before-13 {
8% {
transform: rotateZ(45deg);
}
10% {
transform: rotateZ(0deg);
}
18% {
transform: rotateZ(0deg);
}
20% {
transform: rotateZ(270deg);
}
28% {
transform: rotateZ(270deg);
}
30% {
transform: rotateZ(270deg);
}
38% {
transform: rotateZ(270deg);
}
40% {
transform: rotateZ(90deg);
}
48% {
transform: rotateZ(90deg);
}
50% {
transform: rotateZ(270deg);
}
58% {
transform: rotateZ(270deg);
}
60% {
transform: rotateZ(270deg);
}
68% {
transform: rotateZ(270deg);
}
70% {
transform: rotateZ(45deg);
}
78% {
transform: rotateZ(45deg);
}
80% {
transform: rotateZ(270deg);
}
88% {
transform: rotateZ(270deg);
}
90% {
transform: rotateZ(270deg);
}
98% {
transform: rotateZ(270deg);
}
}
@keyframes min-units-after-13 {
8% {
transform: rotateZ(45deg);
}
10% {
transform: rotateZ(180deg);
}
18% {
transform: rotateZ(180deg);
}
20% {
transform: rotateZ(90deg);
}
28% {
transform: rotateZ(90deg);
}
30% {
transform: rotateZ(90deg);
}
38% {
transform: rotateZ(90deg);
}
40% {
transform: rotateZ(180deg);
}
48% {
transform: rotateZ(180deg);
}
50% {
transform: rotateZ(90deg);
}
58% {
transform: rotateZ(90deg);
}
60% {
transform: rotateZ(90deg);
}
68% {
transform: rotateZ(90deg);
}
70% {
transform: rotateZ(45deg);
}
78% {
transform: rotateZ(45deg);
}
80% {
transform: rotateZ(90deg);
}
88% {
transform: rotateZ(90deg);
}
90% {
transform: rotateZ(90deg);
}
98% {
transform: rotateZ(90deg);
}
}
.no--min-units > *:nth-child(14):before {
animation: min-units-before-14 600s infinite;
}
.no--min-units > *:nth-child(14):after {
animation: min-units-after-14 600s infinite;
}
@keyframes min-units-before-14 {
8% {
transform: rotateZ(0deg);
}
10% {
transform: rotateZ(0deg);
}
18% {
transform: rotateZ(0deg);
}
20% {
transform: rotateZ(0deg);
}
28% {
transform: rotateZ(0deg);
}
30% {
transform: rotateZ(0deg);
}
38% {
transform: rotateZ(0deg);
}
40% {
transform: rotateZ(270deg);
}
48% {
transform: rotateZ(270deg);
}
50% {
transform: rotateZ(270deg);
}
58% {
transform: rotateZ(270deg);
}
60% {
transform: rotateZ(270deg);
}
68% {
transform: rotateZ(270deg);
}
70% {
transform: rotateZ(0deg);
}
78% {
transform: rotateZ(0deg);
}
80% {
transform: rotateZ(0deg);
}
88% {
transform: rotateZ(0deg);
}
90% {
transform: rotateZ(0deg);
}
98% {
transform: rotateZ(0deg);
}
}
@keyframes min-units-after-14 {
8% {
transform: rotateZ(180deg);
}
10% {
transform: rotateZ(180deg);
}
18% {
transform: rotateZ(180deg);
}
20% {
transform: rotateZ(270deg);
}
28% {
transform: rotateZ(270deg);
}
30% {
transform: rotateZ(270deg);
}
38% {
transform: rotateZ(270deg);
}
40% {
transform: rotateZ(180deg);
}
48% {
transform: rotateZ(180deg);
}
50% {
transform: rotateZ(90deg);
}
58% {
transform: rotateZ(90deg);
}
60% {
transform: rotateZ(90deg);
}
68% {
transform: rotateZ(90deg);
}
70% {
transform: rotateZ(180deg);
}
78% {
transform: rotateZ(180deg);
}
80% {
transform: rotateZ(270deg);
}
88% {
transform: rotateZ(270deg);
}
90% {
transform: rotateZ(270deg);
}
98% {
transform: rotateZ(270deg);
}
}
.no--min-units > *:nth-child(15):before {
animation: min-units-before-15 600s infinite;
}
.no--min-units > *:nth-child(15):after {
animation: min-units-after-15 600s infinite;
}
@keyframes min-units-before-15 {
8% {
transform: rotateZ(0deg);
}
10% {
transform: rotateZ(45deg);
}
18% {
transform: rotateZ(45deg);
}
20% {
transform: rotateZ(0deg);
}
28% {
transform: rotateZ(0deg);
}
30% {
transform: rotateZ(0deg);
}
38% {
transform: rotateZ(0deg);
}
40% {
transform: rotateZ(45deg);
}
48% {
transform: rotateZ(45deg);
}
50% {
transform: rotateZ(270deg);
}
58% {
transform: rotateZ(270deg);
}
60% {
transform: rotateZ(270deg);
}
68% {
transform: rotateZ(270deg);
}
70% {
transform: rotateZ(0deg);
}
78% {
transform: rotateZ(0deg);
}
80% {
transform: rotateZ(0deg);
}
88% {
transform: rotateZ(0deg);
}
90% {
transform: rotateZ(0deg);
}
98% {
transform: rotateZ(0deg);
}
}
@keyframes min-units-after-15 {
8% {
transform: rotateZ(180deg);
}
10% {
transform: rotateZ(45deg);
}
18% {
transform: rotateZ(45deg);
}
20% {
transform: rotateZ(180deg);
}
28% {
transform: rotateZ(180deg);
}
30% {
transform: rotateZ(180deg);
}
38% {
transform: rotateZ(180deg);
}
40% {
transform: rotateZ(45deg);
}
48% {
transform: rotateZ(45deg);
}
50% {
transform: rotateZ(180deg);
}
58% {
transform: rotateZ(180deg);
}
60% {
transform: rotateZ(180deg);
}
68% {
transform: rotateZ(180deg);
}
70% {
transform: rotateZ(180deg);
}
78% {
transform: rotateZ(180deg);
}
80% {
transform: rotateZ(180deg);
}
88% {
transform: rotateZ(180deg);
}
90% {
transform: rotateZ(180deg);
}
98% {
transform: rotateZ(180deg);
}
}
.no--min-units > *:nth-child(16):before {
animation: min-units-before-16 600s infinite;
}
.no--min-units > *:nth-child(16):after {
animation: min-units-after-16 600s infinite;
}
@keyframes min-units-before-16 {
8% {
transform: rotateZ(0deg);
}
10% {
transform: rotateZ(45deg);
}
18% {
transform: rotateZ(45deg);
}
20% {
transform: rotateZ(0deg);
}
28% {
transform: rotateZ(0deg);
}
30% {
transform: rotateZ(45deg);
}
38% {
transform: rotateZ(45deg);
}
40% {
transform: rotateZ(0deg);
}
48% {
transform: rotateZ(0deg);
}
50% {
transform: rotateZ(0deg);
}
58% {
transform: rotateZ(0deg);
}
60% {
transform: rotateZ(0deg);
}
68% {
transform: rotateZ(0deg);
}
70% {
transform: rotateZ(45deg);
}
78% {
transform: rotateZ(45deg);
}
80% {
transform: rotateZ(0deg);
}
88% {
transform: rotateZ(0deg);
}
90% {
transform: rotateZ(0deg);
}
98% {
transform: rotateZ(0deg);
}
}
@keyframes min-units-after-16 {
8% {
transform: rotateZ(180deg);
}
10% {
transform: rotateZ(45deg);
}
18% {
transform: rotateZ(45deg);
}
20% {
transform: rotateZ(180deg);
}
28% {
transform: rotateZ(180deg);
}
30% {
transform: rotateZ(45deg);
}
38% {
transform: rotateZ(45deg);
}
40% {
transform: rotateZ(180deg);
}
48% {
transform: rotateZ(180deg);
}
50% {
transform: rotateZ(90deg);
}
58% {
transform: rotateZ(90deg);
}
60% {
transform: rotateZ(180deg);
}
68% {
transform: rotateZ(180deg);
}
70% {
transform: rotateZ(45deg);
}
78% {
transform: rotateZ(45deg);
}
80% {
transform: rotateZ(180deg);
}
88% {
transform: rotateZ(180deg);
}
90% {
transform: rotateZ(90deg);
}
98% {
transform: rotateZ(90deg);
}
}
.no--min-units > *:nth-child(17):before {
animation: min-units-before-17 600s infinite;
}
.no--min-units > *:nth-child(17):after {
animation: min-units-after-17 600s infinite;
}
@keyframes min-units-before-17 {
8% {
transform: rotateZ(0deg);
}
10% {
transform: rotateZ(45deg);
}
18% {
transform: rotateZ(45deg);
}
20% {
transform: rotateZ(90deg);
}
28% {
transform: rotateZ(90deg);
}
30% {
transform: rotateZ(0deg);
}
38% {
transform: rotateZ(0deg);
}
40% {
transform: rotateZ(0deg);
}
48% {
transform: rotateZ(0deg);
}
50% {
transform: rotateZ(270deg);
}
58% {
transform: rotateZ(270deg);
}
60% {
transform: rotateZ(90deg);
}
68% {
transform: rotateZ(90deg);
}
70% {
transform: rotateZ(45deg);
}
78% {
transform: rotateZ(45deg);
}
80% {
transform: rotateZ(90deg);
}
88% {
transform: rotateZ(90deg);
}
90% {
transform: rotateZ(270deg);
}
98% {
transform: rotateZ(270deg);
}
}
@keyframes min-units-after-17 {
8% {
transform: rotateZ(180deg);
}
10% {
transform: rotateZ(45deg);
}
18% {
transform: rotateZ(45deg);
}
20% {
transform: rotateZ(180deg);
}
28% {
transform: rotateZ(180deg);
}
30% {
transform: rotateZ(90deg);
}
38% {
transform: rotateZ(90deg);
}
40% {
transform: rotateZ(90deg);
}
48% {
transform: rotateZ(90deg);
}
50% {
transform: rotateZ(90deg);
}
58% {
transform: rotateZ(90deg);
}
60% {
transform: rotateZ(180deg);
}
68% {
transform: rotateZ(180deg);
}
70% {
transform: rotateZ(45deg);
}
78% {
transform: rotateZ(45deg);
}
80% {
transform: rotateZ(180deg);
}
88% {
transform: rotateZ(180deg);
}
90% {
transform: rotateZ(90deg);
}
98% {
transform: rotateZ(90deg);
}
}
.no--min-units > *:nth-child(18):before {
animation: min-units-before-18 600s infinite;
}
.no--min-units > *:nth-child(18):after {
animation: min-units-after-18 600s infinite;
}
@keyframes min-units-before-18 {
8% {
transform: rotateZ(45deg);
}
10% {
transform: rotateZ(0deg);
}
18% {
transform: rotateZ(0deg);
}
20% {
transform: rotateZ(270deg);
}
28% {
transform: rotateZ(270deg);
}
30% {
transform: rotateZ(270deg);
}
38% {
transform: rotateZ(270deg);
}
40% {
transform: rotateZ(0deg);
}
48% {
transform: rotateZ(0deg);
}
50% {
transform: rotateZ(270deg);
}
58% {
transform: rotateZ(270deg);
}
60% {
transform: rotateZ(270deg);
}
68% {
transform: rotateZ(270deg);
}
70% {
transform: rotateZ(45deg);
}
78% {
transform: rotateZ(45deg);
}
80% {
transform: rotateZ(270deg);
}
88% {
transform: rotateZ(270deg);
}
90% {
transform: rotateZ(270deg);
}
98% {
transform: rotateZ(270deg);
}
}
@keyframes min-units-after-18 {
8% {
transform: rotateZ(45deg);
}
10% {
transform: rotateZ(180deg);
}
18% {
transform: rotateZ(180deg);
}
20% {
transform: rotateZ(90deg);
}
28% {
transform: rotateZ(90deg);
}
30% {
transform: rotateZ(90deg);
}
38% {
transform: rotateZ(90deg);
}
40% {
transform: rotateZ(270deg);
}
48% {
transform: rotateZ(270deg);
}
50% {
transform: rotateZ(90deg);
}
58% {
transform: rotateZ(90deg);
}
60% {
transform: rotateZ(90deg);
}
68% {
transform: rotateZ(90deg);
}
70% {
transform: rotateZ(45deg);
}
78% {
transform: rotateZ(45deg);
}
80% {
transform: rotateZ(90deg);
}
88% {
transform: rotateZ(90deg);
}
90% {
transform: rotateZ(90deg);
}
98% {
transform: rotateZ(90deg);
}
}
.no--min-units > *:nth-child(19):before {
animation: min-units-before-19 600s infinite;
}
.no--min-units > *:nth-child(19):after {
animation: min-units-after-19 600s infinite;
}
@keyframes min-units-before-19 {
8% {
transform: rotateZ(0deg);
}
10% {
transform: rotateZ(0deg);
}
18% {
transform: rotateZ(0deg);
}
20% {
transform: rotateZ(270deg);
}
28% {
transform: rotateZ(270deg);
}
30% {
transform: rotateZ(270deg);
}
38% {
transform: rotateZ(270deg);
}
40% {
transform: rotateZ(0deg);
}
48% {
transform: rotateZ(0deg);
}
50% {
transform: rotateZ(270deg);
}
58% {
transform: rotateZ(270deg);
}
60% {
transform: rotateZ(270deg);
}
68% {
transform: rotateZ(270deg);
}
70% {
transform: rotateZ(0deg);
}
78% {
transform: rotateZ(0deg);
}
80% {
transform: rotateZ(270deg);
}
88% {
transform: rotateZ(270deg);
}
90% {
transform: rotateZ(270deg);
}
98% {
transform: rotateZ(270deg);
}
}
@keyframes min-units-after-19 {
8% {
transform: rotateZ(180deg);
}
10% {
transform: rotateZ(180deg);
}
18% {
transform: rotateZ(180deg);
}
20% {
transform: rotateZ(90deg);
}
28% {
transform: rotateZ(90deg);
}
30% {
transform: rotateZ(180deg);
}
38% {
transform: rotateZ(180deg);
}
40% {
transform: rotateZ(90deg);
}
48% {
transform: rotateZ(90deg);
}
50% {
transform: rotateZ(180deg);
}
58% {
transform: rotateZ(180deg);
}
60% {
transform: rotateZ(180deg);
}
68% {
transform: rotateZ(180deg);
}
70% {
transform: rotateZ(180deg);
}
78% {
transform: rotateZ(180deg);
}
80% {
transform: rotateZ(180deg);
}
88% {
transform: rotateZ(180deg);
}
90% {
transform: rotateZ(180deg);
}
98% {
transform: rotateZ(180deg);
}
}
.no--min-units > *:nth-child(20):before {
animation: min-units-before-20 600s infinite;
}
.no--min-units > *:nth-child(20):after {
animation: min-units-after-20 600s infinite;
}
@keyframes min-units-before-20 {
8% {
transform: rotateZ(0deg);
}
10% {
transform: rotateZ(45deg);
}
18% {
transform: rotateZ(45deg);
}
20% {
transform: rotateZ(0deg);
}
28% {
transform: rotateZ(0deg);
}
30% {
transform: rotateZ(0deg);
}
38% {
transform: rotateZ(0deg);
}
40% {
transform: rotateZ(180deg);
}
48% {
transform: rotateZ(180deg);
}
50% {
transform: rotateZ(0deg);
}
58% {
transform: rotateZ(0deg);
}
60% {
transform: rotateZ(0deg);
}
68% {
transform: rotateZ(0deg);
}
70% {
transform: rotateZ(0deg);
}
78% {
transform: rotateZ(0deg);
}
80% {
transform: rotateZ(0deg);
}
88% {
transform: rotateZ(0deg);
}
90% {
transform: rotateZ(0deg);
}
98% {
transform: rotateZ(0deg);
}
}
@keyframes min-units-after-20 {
8% {
transform: rotateZ(180deg);
}
10% {
transform: rotateZ(45deg);
}
18% {
transform: rotateZ(45deg);
}
20% {
transform: rotateZ(270deg);
}
28% {
transform: rotateZ(270deg);
}
30% {
transform: rotateZ(180deg);
}
38% {
transform: rotateZ(180deg);
}
40% {
transform: rotateZ(270deg);
}
48% {
transform: rotateZ(270deg);
}
50% {
transform: rotateZ(180deg);
}
58% {
transform: rotateZ(180deg);
}
60% {
transform: rotateZ(180deg);
}
68% {
transform: rotateZ(180deg);
}
70% {
transform: rotateZ(180deg);
}
78% {
transform: rotateZ(180deg);
}
80% {
transform: rotateZ(180deg);
}
88% {
transform: rotateZ(180deg);
}
90% {
transform: rotateZ(180deg);
}
98% {
transform: rotateZ(180deg);
}
}
.no--min-units > *:nth-child(21):before {
animation: min-units-before-21 600s infinite.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0