├── style.css
└── index.html
/style.css:
--------------------------------------------------------------------------------
1 | html,
2 | body {
3 | font-size: 0;
4 | overflow: hidden;
5 | width: 100%;
6 | height: 100%;
7 | }
8 |
9 | .center {
10 | position: absolute;
11 | top: 0;
12 | left: 0;
13 | right: 0;
14 | bottom: 0;
15 | margin: auto;
16 | }
17 |
18 | .view {
19 | position: absolute;
20 | top: 0;
21 | left: 0;
22 | right: 0;
23 | bottom: 0;
24 | user-select: none;
25 | }
26 |
27 | .plane {
28 | width: 0;
29 | height: 0;
30 | transform-style: preserve-3d;
31 | }
32 |
33 | .view {
34 | perspective: 800;
35 | background: #111;
36 | }
37 |
38 | .main {
39 | position: absolute;
40 | top: 0;
41 | left: 0;
42 | right: 0;
43 | bottom: 0;
44 | margin: auto;
45 | width: 200px;
46 | height: 200px;
47 | animation: zRotateView 10s infinite linear;
48 | }
49 |
50 | .main .r {
51 | transform-style: preserve-3d;
52 | position: absolute;
53 | width: 100%;
54 | height: 100%;
55 | animation: rotate 60s linear infinite;
56 | }
57 |
58 | .main .r::after {
59 | content: "";
60 | display: block;
61 | position: absolute;
62 | width: 100%;
63 | height: 100%;
64 | box-sizing: border-box;
65 | border-radius: 50%;
66 | box-shadow: -1px 0 rgba(66, 212, 244, 0.6), -4px 0 30px rgba(66, 212, 244, 0.3), inset 4px 0 30px rgba(250, 250, 255, 0.1);
67 | animation: zRotate 1s linear infinite;
68 | }
69 |
70 | @keyframes main-rotation {
71 | 0% {
72 | transform: rotateX(60deg) rotateZ(0deg);
73 | }
74 |
75 | 100% {
76 | transform: rotateX(60deg) rotateZ(360deg);
77 | }
78 | }
79 |
80 | @keyframes rotate {
81 | from {
82 | transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
83 | }
84 |
85 | to {
86 | transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
87 | }
88 | }
89 |
90 | @keyframes zRotateView {
91 | from {
92 | transform: rotateX(0deg) rotateZ(0deg);
93 | }
94 |
95 | to {
96 | transform: rotateX(360deg) rotateZ(360deg);
97 | }
98 | }
99 |
100 | @keyframes zRotate {
101 | from {
102 | transform: rotateZ(0deg);
103 | }
104 |
105 | to {
106 | transform: rotateZ(360deg);
107 | }
108 | }
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Stylish Rounding Pattern
7 |
8 |
9 |
10 | Pabitra Banerjee
11 |
84 |
85 |
86 |
--------------------------------------------------------------------------------