Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit b0edad9

Browse files
Light bulb Project | HTML | CSS | JS
1 parent 78563d8 commit b0edad9

File tree

3 files changed

+186
-0
lines changed

3 files changed

+186
-0
lines changed

‎73. Light/app.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
let btn = document.querySelector(".btn");
2+
let body = document.body;
3+
let audio = document.querySelector("#audio");
4+
5+
btn.addEventListener("click", () => {
6+
body.classList.toggle("on");
7+
audio.play();
8+
});

‎73. Light/index.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Light On and Off</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<div class="light">
11+
<div class="wire"></div>
12+
<div class="bulb">
13+
<span></span>
14+
<span></span>
15+
</div>
16+
<div class="switch">
17+
<div class="btn"></div>
18+
</div>
19+
</div>
20+
21+
<audio
22+
src="https://www.fesliyanstudios.com/play-mp3/387"
23+
id="audio"
24+
autostart="false"
25+
></audio>
26+
27+
<script src="app.js"></script>
28+
</body>
29+
</html>

‎73. Light/style.css‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
display: flex;
9+
justify-content: center;
10+
align-items: center;
11+
min-height: 100vh;
12+
background: #222;
13+
}
14+
15+
body.on {
16+
background: radial-gradient(#555, #111);
17+
}
18+
19+
.wire {
20+
position: absolute;
21+
left: calc(50% - 2px);
22+
bottom: 50%;
23+
width: 4px;
24+
height: 60vh;
25+
background: #000;
26+
z-index: 1;
27+
}
28+
29+
.bulb {
30+
position: relative;
31+
width: 80px;
32+
height: 80px;
33+
background: #444;
34+
border-radius: 50%;
35+
z-index: 2;
36+
}
37+
38+
.bulb:before {
39+
content: "";
40+
position: absolute;
41+
left: 22.5px;
42+
top: -50px;
43+
width: 35px;
44+
height: 80px;
45+
background: #444;
46+
border-top: 30px solid #000;
47+
border-radius: 10px;
48+
}
49+
50+
body.on .bulb::after {
51+
content: "";
52+
position: absolute;
53+
top: 50%;
54+
left: 50%;
55+
transform: translate(-50%, -50%);
56+
width: 120px;
57+
height: 120px;
58+
background: #fff;
59+
border-radius: 50%;
60+
filter: blur(40px);
61+
}
62+
63+
body.on .bulb {
64+
background-color: #fff;
65+
box-shadow: 0 0 50px #fff, 0 0 100px #fff, 0 0 150px #fff, 0 0 200px #fff,
66+
0 0 250px #fff, 0 0 300px #fff, 0 0 350px #fff;
67+
}
68+
69+
body.on .bulb::before {
70+
background: #fff;
71+
}
72+
73+
body.on .bulb span:nth-child(1) {
74+
box-shadow: 20px 20px 0 10px #fff;
75+
}
76+
77+
body.on .bulb span:nth-child(2) {
78+
box-shadow: -20px 20px 0 10px #fff;
79+
}
80+
81+
.bulb span:nth-child(1) {
82+
position: absolute;
83+
top: -16px;
84+
left: -4px;
85+
display: block;
86+
width: 30px;
87+
height: 30px;
88+
background: transparent;
89+
transform: rotate(342deg);
90+
border-bottom-right-radius: 40px;
91+
box-shadow: 20px 20px 0 10px #444;
92+
}
93+
94+
.bulb span:nth-child(2) {
95+
position: absolute;
96+
top: -16px;
97+
right: -4px;
98+
display: block;
99+
width: 30px;
100+
height: 30px;
101+
background: transparent;
102+
transform: rotate(17deg);
103+
border-bottom-left-radius: 40px;
104+
box-shadow: -20px 20px 0 10px #444;
105+
}
106+
107+
.switch {
108+
position: absolute;
109+
bottom: 50px;
110+
right: 50px;
111+
width: 80px;
112+
height: 80px;
113+
background: linear-gradient(#eee, #ccc, #eee);
114+
border: 3px solid #000;
115+
border-radius: 10px;
116+
display: flex;
117+
justify-content: center;
118+
align-items: center;
119+
box-shadow: gray 0px 20px 30px -10px;
120+
}
121+
122+
.switch .btn {
123+
position: relative;
124+
width: 25px;
125+
height: 40px;
126+
background: linear-gradient(#777, #fff, #777);
127+
border-radius: 6px;
128+
border: 2px solid #000;
129+
cursor: pointer;
130+
}
131+
132+
.switch .btn::before {
133+
content: "";
134+
position: absolute;
135+
top: 0;
136+
left: 0;
137+
width: 100%;
138+
height: 85%;
139+
background: linear-gradient(#fff, #fff);
140+
border-radius: 4px;
141+
}
142+
143+
.on .switch .btn::before {
144+
top: 15%;
145+
}
146+
147+
#audio {
148+
display: none;
149+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /