Skip to content

Commit 051e836

Browse files
author
Murage
authored
Update property.html
1 parent c6fc0c9 commit 051e836

File tree

1 file changed

+62
-51
lines changed

1 file changed

+62
-51
lines changed

Diff for: ‎property.html

+62-51
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,65 @@
11
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<style>
5-
@property --rotation-angle {
6-
syntax: "
7-
<angle>
8-
";
9-
inherits: false;
10-
initial-value: 0deg;
11-
}
12-
body{
13-
background-color: rgb(29, 29, 31);
14-
}
15-
.box {
16-
position: relative;
17-
width: 150px;
18-
height: 150px;
19-
border-radius: 10px;
20-
background-color: rgb(29, 29, 31);
21-
margin: 0 auto;
22-
}
23-
.box::before,.box::after{
24-
content: "";
25-
position: absolute;
26-
background-color: red;
27-
width: 100%;
28-
height: 100%;
29-
z-index: -1;
30-
padding: 1px;
31-
left: 50%;
32-
top: 50%;
33-
transform: translate(-50%, -50%);
34-
border-radius: inherit;
35-
background-image: conic-gradient(from var(--rotation-angle), #ea2dd8, /* Vibrant pink */
36-
#007aff, /* Soft blue */
37-
#1abc9c /* Calm teal */);
38-
animation: rotatex 2s linear infinite;
39-
}
40-
.box::after {
41-
filter:blur(60px);
42-
}
43-
@keyframes rotatex {
44-
to {
45-
--rotation-angle: 360deg
46-
}
47-
}
48-
</style>
49-
</head>
50-
<body>
51-
<div class="box">
52-
</div>
53-
</body>
3+
4+
<head>
5+
<style>
6+
@property --rotation-angle {
7+
syntax: "<angle>";
8+
inherits: false;
9+
initial-value: 0deg;
10+
}
11+
12+
body {
13+
background-color: rgb(29, 29, 31);
14+
}
15+
16+
.box {
17+
position: relative;
18+
width: 150px;
19+
height: 150px;
20+
border-radius: 10px;
21+
background-color: rgb(29, 29, 31);
22+
margin: 0 auto;
23+
}
24+
25+
.box::before,
26+
.box::after {
27+
content: "";
28+
position: absolute;
29+
background-color: red;
30+
width: 100%;
31+
height: 100%;
32+
z-index: -1;
33+
padding: 1px;
34+
left: 50%;
35+
top: 50%;
36+
transform: translate(-50%, -50%);
37+
border-radius: inherit;
38+
background-image: conic-gradient(from var(--rotation-angle), #ea2dd8,
39+
/* Vibrant pink */
40+
#007aff,
41+
/* Soft blue */
42+
#1abc9c
43+
/* Calm teal */
44+
);
45+
animation: rotatex 2s linear infinite;
46+
}
47+
48+
.box::after {
49+
filter: blur(60px);
50+
}
51+
52+
@keyframes rotatex {
53+
to {
54+
--rotation-angle: 360deg
55+
}
56+
}
57+
</style>
58+
</head>
59+
60+
<body>
61+
<div class="box">
62+
</div>
63+
</body>
64+
5465
</html>

0 commit comments

Comments
 (0)