Hello, readers In today's blog I have tried to create something different with the help of CSS3 properties.
I have created an animated traffic light using animation, box-shadow, linear and radial-gradient and various others properties of CSS3.
Firstly in the HTML part, I have created a div with the class name traffic light. As at the right and left-hand side of the traffic light there is sidebars opposite to each other. For creating the side bars, I have created Three div with the class name as side-bars and have applied CSS3 properties on them.
As the trafficlight is comprises of red, green and yellow light so for creating these light I have created three div comprising of red, yellow and green class.
So, the html code is given below :-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Animated traffic light Using CSS</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container">
<div class="trafficlight">
<div class="side-bars"></div>
<div class="side-bars"></div>
<div class="side-bars"></div>
<div class="red"></div>
<div class="yellow"></div>
<div class="green"></div>
</div>
</div>
</body>
</html>
In the CSS , Firstly to give the background to the body , I have used linear gradient , set the margin , padding, height and width.
Now for creating the front part of trafficlight , I have set the background-image by using linaer-gradient property of CSS3 for giving appropriate colour to it , set position to relative and adjusting the border, height, width and the background-color.
In my blog , I have also used psuedo-elements i.e before and after for creating the front and the back part of the trafficlight and had set various CSS properties for setting the appropriate images tyo lie before and after the trafficlight.
Now for the side-bars , I have set the border-right, border-left, border-top , making its position to absolute , z-index to -1 and various required CSS properties and had adjusted the position of the 2 and 3 side-bars from the top.
Now the main part, i.e the red, green and yellow lights for creating them I have set the animation to all three lights for 13s for infinite count , for the side glow of the colour I have applied the box-shadow and had made the position absolute of all. For creating a circle I have set the border-radius to 50% and have provided the dotted border to all of them.
Basically for the filling the colour in these lights I have set the radial-gradient as per required. I have also used keyframe for all three lights i.e. for red, green and yellow for applying animation at particular percentage breakdowns.
Below is the CSS code of the example :-
html{
background: linear-gradient(#08f, #fff);
padding: 40px;
width: 170px;
height: 100%;
margin: 0 auto;
}
.trafficlight{
background: #222;
background-image: linear-gradient(transparent 2%, #111 2%, transparent 3%, #111 30%);
width: 170px;
height: 400px;
border-radius: 20px;
position: relative;
border: solid 5px #333;
}
.trafficlight:before{
background: #222;
background-image: radial-gradient(#444, #000);
content: "";
width: 170px;
height: 150px;
margin: 0 auto;
position: absolute;
top: -20px;
margin-left: 0px;
border-radius: 50%;
z-index: -1;
}
.trafficlight:after{
background: #222;
background-image: linear-gradient(-90deg, #222 0%, #444 30%, #000);
content: "";
width: 50px;
height: 500px;
margin-left: 60px;
position: absolute;
top: 150px;
z-index: -1;
}
.side-bars{
background: transparent;
width: 180px;
height: 0;
position: absolute;
top: 20px;
left: -35px;
border-right: solid 30px transparent;
border-left: solid 30px transparent;
border-top: solid 90px #111;
border-radius: 10px;
z-index: -1;
}
.side-bars:nth-child(2){
top: 140px;
}
.side-barss:nth-child(3){
top: 260px;
}
.red{
background: red;
background-image: radial-gradient(brown, transparent);
background-size: 5px 5px;
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
top: 20px;
left: 35px;
animation: 13s red infinite;
border: dotted 2px red;
box-shadow:
0 0 20px #111 inset,
0 0 10px red;
}
.yellow{
background: yellow;
background-image: radial-gradient(orange, transparent);
background-size: 5px 5px;
width: 100px;
height: 100px;
border-radius: 50%;
border: dotted 2px yellow;
position: absolute;
top: 145px;
left: 35px;
animation: 13s yellow infinite;
box-shadow:
0 0 20px #111 inset,
0 0 10px yellow;
}
.green{
background: green;
background-image: radial-gradient(lime, transparent);
background-size: 5px 5px;
width: 100px;
height: 100px;
border-radius: 50%;
border: dotted 2px lime;
position: absolute;
top: 270px;
left: 35px;
box-shadow:
0 0 20px #111 inset,
0 0 10px lime;
animation: 13s green infinite;
}
@keyframes red{
0%{opacity: 1}
20%{opacity: 1}
40%{opacity: 1}
60%{opacity: .1}
80%{opacity: .1}
100%{opacity: .1}
}
@keyframes yellow{
0%{opacity: .1}
20%{opacity: .1}
40%{opacity: 1}
50%{opacity: .1}
60%{opacity: .1}
80%{opacity: .1}
100%{opacity: .1}
}
@keyframes green{
0%{opacity: .1}
20%{opacity: .1}
40%{opacity: .1}
60%{opacity: 1}
80%{opacity: 1}
83%{opacity: .1}
86%{opacity: 1}
89%{opacity: .1}
93%{opacity: 1}
96%{opacity: .1}
100%{opacity: 1}
}
Conclusion :-
Hence, I have created an animated trafficlight using CSS3 properties.
Note :- The above code will run over all modern browsers such as on Firefox 7.0.1, Chrome 15.0, Internet Explorer 9.0 , Safari 5.1.1.
0 Comment(s)