-
Notifications
You must be signed in to change notification settings - Fork 0
/
yin-yang.css
90 lines (83 loc) · 2.13 KB
/
yin-yang.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
.yin-yang {
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) perspective( 600px) rotateX(45deg);
width: 300px;
height: 300px;
border-radius: 50%;
animation: spin 5s infinite linear;
}
.yin-yang:before {
content: "";
position: absolute;
bottom: 0%;
left: 50%;
transform: translate(-50%, 0%);
width: 30px;
height: 30px;
border-radius: 50%;
box-shadow: 0px 0px 1px #000;
background: #fff;
border: 60px solid #000;
}
.yin-yang:after {
content: "";
position: absolute;
top: 0%;
left: 50%;
transform: translate(-50%, 0%);
width: 30px;
height: 30px;
border-radius: 50%;
box-shadow: 0px 0px 1px #fff;
background: #000;
border: 60px solid #fff;
}
.yin {
float: right;
width: 150px;
height: 300px;
background: #000;
border-radius: 0 360px 360px 0;
}
.yang {
float: left;
width: 150px;
height: 300px;
background: #fff;
border-radius: 360px 0 0 360px;
}
.container {
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) perspective( 600px) rotateX(45deg);
width: 300px;
height: 300px;
background: #666;
box-shadow: 0 24px 0 -0.65vh #1a1a1a;
border: 12px solid #595959;
border-radius: 50%;
}
.glossy {
position: absolute;
z-index: 3;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) perspective( 600px) rotateX(45deg);
width: 324px;
height: 324px;
background: linear-gradient(111deg, rgba(0, 0, 0, 0.1) 50%, rgba(255, 255, 255, 0.5) 100%);
border-radius: 50%;
}
@keyframes spin {
from {
transform: translate(-50%, -50%) perspective( 600px) rotateX(45deg) rotate(0deg);
}
to {
transform: translate(-50%, -50%) perspective( 600px) rotateX(45deg) rotate(360deg);
}
}