Learn how to create an animated spot light bulb using HTML and CSS in this step-by-step tutorial. Watch as we guide you through the process of coding the animation to bring your design to life. Perfect for beginners looking to enhance their web development skills!
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SpotLight</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input id="checkbox" type="checkbox">
<label class="switch" for="checkbox">
<img class="img" src="image/bulb.svg" alt="bulb">
</label>
</body>
</html>
style.css
body{
background: black;
margin-left: 400px;
margin-top: 300px;
}
#checkbox{
display: none;
}
.img{
border-radius: 50%;
width: 2.2em;
}
.switch{
position: relative;
width: 70px;
height: 70px;
background-color: rgb(99,99,99);
border-radius: 50%;
z-index: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid rgb(126,126,126);
box-shadow: 0px 0px 3px rgb(2,2,2);
}
#checkbox:checked +.swith{
box-shadow: 0px 0px 1px rgb(151,243,255)inset,
0px 0px 8px rgb(151,243,255) inset, 0px 0px 10px rgb(183, 229, 235)inset,
0px 0px 40px rgb(151,243,255),0px 0px 100px rgb(151,243,255),
0px 0px 5px rgb(146,180,184);
}
#checkbox:checked + .switch {
filter: drop-shadow(0px 0px 25px rgb(213, 233, 236));
}
#checkbox:checked + .switch img {
fill: rgb(255,255,255);
}
Comments
Post a Comment