Skip to content

Commit 49af609

Browse files
Script-Kiddie-JKBScript-Kiddie-JKB
committed
first commit
0 parents  commit 49af609

File tree

2 files changed

+113
-0
lines changed

2 files changed

+113
-0
lines changed

‎index.html

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<link rel="stylesheet" href="style.css">
7+
<title>CSS Hover Effect</title>
8+
</head>
9+
<body>
10+
<div class="loader">
11+
<span style="--i:1;"></span>
12+
<span style="--i:2;"></span>
13+
<span style="--i:3;"></span>
14+
<span style="--i:4;"></span>
15+
<span style="--i:5;"></span>
16+
<span style="--i:6;"></span>
17+
<span style="--i:7;"></span>
18+
<span style="--i:8;"></span>
19+
<span style="--i:9;"></span>
20+
<span style="--i:10;"></span>
21+
</div>
22+
</body>
23+
</html>

‎style.css

+90
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
*
2+
{
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
}
7+
8+
body
9+
10+
{
11+
display: flex;
12+
justify-content: center;
13+
align-items: center;
14+
min-height: 100vh;
15+
overflow: hidden;
16+
background: rgb(22, 3, 39);
17+
}
18+
19+
.loader
20+
21+
{
22+
position: relative;
23+
width: 500px;
24+
height: 400px;
25+
}
26+
27+
.loader span
28+
{
29+
position: absolute;
30+
top: 0;
31+
left: 0;
32+
width: 100%;
33+
height: 100%;
34+
transform: rotate(calc(36deg * var(--i)));
35+
}
36+
37+
.loader span::before
38+
{
39+
content: '';
40+
position: absolute;
41+
top: 0;
42+
left: 0;
43+
width: 25px;
44+
height: 25px;
45+
border-radius: 50%;
46+
background: transparent;
47+
border: 4px solid #00f7ff;
48+
box-sizing: border-box;
49+
box-shadow: 0 0 20px #03eeff,
50+
-30px -30px 0 #00efff,
51+
-30px -30px 20px #00efff,
52+
30px 30px 0 #00efff,
53+
30px 30px 20px #00efff,
54+
30px -30px 0 #00efff,
55+
30px -30px 20px #00efff,
56+
-30px 30px 0px #00efff,
57+
-30px 30px 20px #00efff;
58+
animation: animate 5s linear infinite;
59+
animation-delay: calc(-0.25s * var(--i));
60+
transform-origin: 20px;
61+
transition: 2s;
62+
}
63+
64+
.loader:hover span::before
65+
{
66+
box-shadow: 0 0 20px #03eeff,
67+
-200px -200px 0 #00efff,
68+
-200px -200px 20px #00efff,
69+
200px 200px 0 #00efff,
70+
200px 200px 20px #00efff,
71+
200px -200px 0 #00efff,
72+
200px -200px 20px #00efff,
73+
-200px 200px 0px #00efff,
74+
-200px 200px 20px #00efff;
75+
transform-origin: 250px;
76+
}
77+
78+
@keyframes animate
79+
{
80+
0%
81+
{
82+
transform: rotate(0deg);
83+
filter: hue-rotate(0deg);
84+
}
85+
100%
86+
{
87+
transform: rotate(360deg);
88+
filter: hue-rotate(360deg);
89+
}
90+
}

0 commit comments

Comments
 (0)