Skip to content

Commit 0737307

Browse files
rocky4446rocky4446
committed
Updated Captain America Shield HTML and CSS
1 parent 87d2f79 commit 0737307

File tree

2 files changed

+95
-20
lines changed

2 files changed

+95
-20
lines changed

‎Captain America Shield/index.html

+4-5
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,18 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
65
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Circle Animation</title>
77
<link rel="stylesheet" href="style.css">
8-
<title>Captain America Shield</title>
98
</head>
109
<body>
11-
<div class="circle">
10+
<input type="checkbox" id="animationTrigger">
11+
<label for="animationTrigger" class="circle">
1212
<div class="center">
1313
<div class="arrow"></div>
1414
<div class="arrow"></div>
1515
<div class="arrow"></div>
1616
</div>
17-
</div>
18-
17+
</label>
1918
</body>
2019
</html>

‎Captain America Shield/style.css

+91-15
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,41 @@
1-
*{
1+
* {
22
margin: 0;
33
padding: 0;
44
box-sizing: border-box;
55
}
66

7-
html{
8-
font-size: 65%;
9-
}
10-
body{
7+
body {
118
height: 100vh;
129
background-color: black;
1310
display: flex;
1411
justify-content: center;
1512
align-items: center;
1613
}
1714

18-
.circle{
15+
.circle {
1916
width: 40rem;
2017
height: 40rem;
21-
background-color: white;
18+
background-color: #6E6071;
2219
border-radius: 50%;
23-
box-shadow: 0 0 0 5rem red;
20+
box-shadow: 0 0 0 5rem #282B59;
2421
display: flex;
2522
justify-content: center;
2623
align-items: center;
24+
cursor: pointer;
25+
transition: background-color 0.5s ease;
2726
}
2827

29-
.center{
28+
.center {
3029
width: 20rem;
3130
height: 20rem;
3231
background-color: blue;
3332
border-radius: 50%;
34-
box-shadow: 0 0 0 5rem red;
33+
box-shadow: 0 0 0 5rem #282B59;
3534
position: relative;
35+
transition: all 0.5s ease;
3636
}
3737

38-
.arrow{
38+
.arrow {
3939
width: 0rem;
4040
height: 0rem;
4141
position: absolute;
@@ -45,19 +45,95 @@ body{
4545
left: 0;
4646
}
4747

48-
.arrow:first-child{
48+
.arrow:first-child {
4949
top: 5.5rem;
5050
left: 1rem;
5151
}
5252

53-
.arrow:nth-child(2){
53+
.arrow:nth-child(2) {
5454
transform: rotate(68deg);
5555
left: -3.5rem;
5656
top: 3.5rem;
5757
}
5858

59-
.arrow:last-child{
59+
.arrow:last-child {
6060
transform: rotate(-68deg);
6161
left: 5.5rem;
6262
top: 3.5rem;
63-
}
63+
}
64+
65+
@keyframes rotate {
66+
from {
67+
transform: rotate(0deg);
68+
}
69+
to {
70+
transform: rotate(360deg);
71+
}
72+
}
73+
74+
.center:hover {
75+
animation: rotate 0.5s ease-in-out;
76+
}
77+
78+
@keyframes circleAnimation {
79+
0% {
80+
background-color: #6E6071;
81+
box-shadow: 0 0 0 5rem #282B59;
82+
}
83+
100% {
84+
background-color: white;
85+
box-shadow: 0 0 0 5rem red;
86+
}
87+
}
88+
89+
@keyframes centerAnimation {
90+
0% {
91+
box-shadow: 0 0 0 5rem #282B59;
92+
}
93+
100% {
94+
box-shadow: 0 0 0 5rem #ff0000;
95+
}
96+
}
97+
98+
#animationTrigger:checked + .circle {
99+
animation: circleAnimation 1s ease forwards;
100+
}
101+
102+
#animationTrigger:checked + .circle .center {
103+
animation: centerAnimation 1s ease forwards;
104+
}
105+
106+
@keyframes colorChange {
107+
0% {
108+
background-color: #6E6071;
109+
}
110+
50% {
111+
background-color: white;
112+
}
113+
100% {
114+
background-color: #6E6071;
115+
}
116+
}
117+
118+
@keyframes boxShadowChange {
119+
0% {
120+
box-shadow: 0 0 0 5rem #282B59;
121+
}
122+
50% {
123+
box-shadow: 0 0 0 5rem red;
124+
}
125+
100% {
126+
box-shadow: 0 0 0 5rem #282B59;
127+
}
128+
}
129+
130+
131+
input[type="checkbox"]:checked + label.circle {
132+
animation: colorChange 1s ease forwards;
133+
}
134+
135+
136+
input[type="checkbox"]:checked + label.circle {
137+
animation: boxShadowChange 1s ease forwards;
138+
}
139+

0 commit comments

Comments
 (0)