here is a beautiful animation of Tubelight by Learn code free online.
Here in this project we are going to see Tubelight on/off animation by using HTML CSS anf JavaScript. click "ON" or "OFF" button to see the animation. so here we are learning to style tubelight, tubelight's flash, wall and on/off buttons. we can use this animation in websites too, to make interesting for visitors. see the below html code:
<body class="body_name">
<div class="container-fluid">
<div class="button-block">
<button class="onoff" onclick="lightstart()">ON</button><button class="onoff" onclick="lightend()">OFF</button>
</div>
<div class="newproject">
<div class="tube">
</div>
<div class="light-remove"></div>
<span class="spooo">Holiday special offer<br>
valid till 31st august 2022<br>
20% OFF on order above $50<br>
5% OFF on order below $50<br><br>
<a href="#" class="btn btn-secondary">click to order</a></span>
</div>
</div>
</body>
</html>
now we will do light on/off, and other related changes like light-flash on wall, brightened texts and it's shadow under light with the help of js. we'll add properties by onclick on "ON" button and remove properties by onclick on "OFF" button. see the below JS code:
<script>
const mainWall = document.querySelector(".newproject");
const lightOn = document.querySelector(".tube");
const removelinear = document.querySelector(".light-remove");
const spn = document.querySelector(".spooo");
const spnancho = document.querySelector(".spooo a");
function lightstart() {
mainWall.style.backgroundColor = "#383838";
lightOn.style.background = "none";
lightOn.style.backgroundColor = "white";
lightOn.style.boxShadow = "0px 2px 10px 1px rgb(255, 255, 255)";
removelinear.classList.remove("light-remove");
removelinear.classList.add("light");
spn.style.color = "white";
spn.style.textShadow = "-2px 6px 0 rgba(0,0,0,0.9)";
spn.style.backgroundClip = "text";
spnancho.style.backgroundColor = "grey";
spnancho.style.cursor = "pointer";
}
function lightend() {
mainWall.style.backgroundColor = "#2d2d2d";
lightOn.style.background = "linear-gradient(180deg, rgba(208,207,207,1) 52%, rgba(68,68,68,1) 100%)";
lightOn.style.backgroundColor = "none";
lightOn.style.boxShadow = "none";
removelinear.classList.remove("light");
removelinear.classList.add("light-remove");
spn.style.color = "rgb(68, 67, 67)";
spn.style.textShadow = "none";
spn.style.backgroundClip = "text";
spnancho.style.backgroundColor = "#222";
spnancho.style.cursor = "pointer";
}
</script>
here we are done with html and JS code now let's see css style. see the below CSS code.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.body_name{
width: 100vw;
height: auto;
background-color: rgb(255, 255, 255);
}
.newproject{
position: absolute;
top: 10%;
left: 50%;
transform: translateX(-50%);
width: 600px;
height: 500px;
z-index: 0;
background: linear-gradient(163deg, transparent 0px, transparent 1px, #222 1px, #222 14px, transparent 14px), linear-gradient(161deg, transparent 0px, #181818 1px, #222 2px, #222 15px, transparent 15px), linear-gradient(343deg, transparent 0px, transparent 1px, #222 1px, #222 14px, transparent 14px), linear-gradient(343deg, transparent 0px, transparent 1px, #222 1px, #222 14px, transparent 14px);
background-color: #2d2d2d;
background-position: 2px 1px, 23px 16px, 48px 15px,21px 30px;
background-size: 3em 1.9em;
}
.tube{
position: relative;
top: 10px;
left: 50%;
transform: translateX(-50%);
width: 25em;
height: 20px;
background: linear-gradient(180deg, rgba(208,207,207,1) 52%, rgba(68,68,68,1) 100%);
border-radius: 50px;
z-index: 2;
}
.light{
position: relative;
top: 0px;
left: 50%;
transform: translateX(-50%);
width: 660px;
height: 450px;
clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
background: linear-gradient(180deg, rgba(255,255,255,.2) 10%, rgba(255,255,255,0) 80%);
z-index: 1;
filter: blur(5px);
display: inline-block;
}
.light-remove{
position: relative;
top: -20px;
width: 600px;
height: 500px;
background-color: rgba(0, 0, 0, .5);
z-index: 0;
}
.spooo{
z-index: 4;
position:absolute;
top: 20%;
left: 50%;
transform: translateX(-50%);
text-align: center;
color: rgb(68, 67, 67);
line-height: 1.5;
font-family: 'Merienda', cursive;
font-size: 1.5em;
}
.spooo a{
z-index: 4;
text-decoration: none;
padding: .8em 1.5em;
background-color: #222;
color: #181818;
text-shadow: none;
cursor: pointer;
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
.spooo a:focus{
box-shadow: none;
}
.button-block{
width: 100vw;
text-align: center;
}
.onoff{
position:relative;
padding: 20px;
border: none;
box-shadow: rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px;
margin-bottom: 10px;
}
.onoff:focus{
outline: none;
background-color: rgb(35, 143, 139);
-webkit-box-shadow: inset 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: inset 10px 10px 5px 0px rgba(0,0,0,0.75);
box-shadow: inset 10px 10px 5px 0px rgba(0,0,0,0.75);
color: white;
}
@media screen and (max-width:600px){
.newproject{
width: 100vw;
}
.tube{
width: 61vw;
}
.light{
width: 100vw;
}
.light-remove{
width: 100vw;
}
}