How to Create a Stunning Lighting Animation with HTML and CSS
If you're looking to add some eye-catching visual effects to your website, one option is to create a lighting animation using HTML and CSS. In this tutorial, we'll walk you through the steps of building a dynamic lighting effect from scratch.
Before we begin, you'll need to have a basic understanding of HTML and CSS. If you're new to web development, we recommend checking out some introductory tutorials before diving into this project.
Step 1: Setting up the HTML structure
First, we'll start by creating the HTML structure for our animation. We'll use a basic div container and add some nested divs to create the effect. Here's the code for our HTML:
HTML CODE :
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="glow"></div>
<div class="frame">
<div class="top"></div>
<div class="body-lamp">
<div class="gooey">
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
</div>
</div>
<div class="base-lamp"></div>
<div class="base"></div>
</div>
</body>
</html>
------------
This code creates a container with a bulb div nested inside it, which will house our lighting effect. We'll add the CSS to style these elements in the next step.
Step 2: Styling the elements with CSS
Next, we'll style our HTML elements using CSS. Here's the code:
-----
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: #000011;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.frame{
padding-top: 60px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.body-lamp{
position: relative;
width: 300px;
height: 450px;
background: radial-gradient(#001122, #00ffff35);
clip-path: polygon(25% 0%, 75% 0%, 100% 75%, 75% 100%, 25% 100%, 0 75%);
overflow: hidden;
}
.base-lamp{
position: relative;
width: 245px;
height: 100px;
bottom: 70px;
background: #111133;
clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
box-shadow: inset 0 0 30px #000;
}
.base{
position: relative;
width: 225px;
height: 24px;
bottom: 75px;
background: #111133;
clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
}
.top{
position: relative;
width: 150px;
height: 24px;
top: 0;
background-color: #111133;
clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
z-index: 2;
}
.gooey{
position: absolute;
width: 100%;
height: 100%;
background: #00000070;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
filter: blur(15px) contrast(30);
}
.bubble{
position: relative;
width: 100px;
height: 100px;
background: #00ffff;
animation: move 7s ease-in-out infinite alternate;
}
.bubble:nth-child(1){
top: 50px;
left: 10px;
}
.bubble:nth-child(2){
width: 50px;
height: 30px;
left: 50px;
animation-delay: -2s;
}
.bubble:nth-child(3){
width: 70px;
height: 70px;
left: -70px;
animation-delay: -3.5s;
}
.bubble:nth-child(4){
left: 0px;
width: 80%;
bottom: -90px;
animation: none;
}
.bubble:nth-child(5){
position: absolute;
top: -70px;
left: 60px;
width: 60%;
animation: none;
}
.glow{
position: absolute;
width: 400px;
height: 400px;
background: #5555ff70;
filter: blur(100px);
border-radius: 50%;
}
.glow::after{
content: "";
position: absolute;
bottom: -80px;
width: 350px;
height: 90px;
background: #5555ff;
filter: blur(5px);
border-radius: 50%;
}
@keyframes move{
0%{
border-radius:
75% 25% 20% 80% / 34% 47% 53% 66%;
transform: translateY(-200px);
}
100%{
border-radius: 50%;
transform: translateY(220px);
}
--------------------
Comments
Post a Comment