Hello readers, In today's blog I have tried to make An animated WIFI symbol using CSS3 properties.
As using CSS3 animation and transform rotate property , I have created an animated wifi symbol showing the increase and decrease in the signals with the help of animation.
In the HTML code , Firstly I have created a div with a wifi symbol class name. As the wifi symbol has three semi-circles and a small arc like a circle with different width and height that basically shows the signal speeds which can be created using CSS3 properties.
Now for creating a small sector and the remaining semi-circles I need to create different div with the class names as “wifi-circle first” , “wifi-circle second”, “wifi-circle third” and “wifi-circle fourth”.
Below is the HTML code for the wifi symbol :-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Animated WIFI Symbol</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container">
<div class="section">
<h1>Animated Wifi Symbol</h1>
<div class="wifi-symbol">
<div class="wifi-circle first"></div>
<div class="wifi-circle second"></div>
<div class="wifi-circle third"></div>
<div class="wifi-circle fourth"></div>
</div>
</div>
</div>
</body>
</html>
Now , basically the work start for creating the wifi symbol to this class I have adjusted its height and width , sets its position to absolute and have set the transform rotate and translate property to it.
To the wifi circle , I have set the border-radius to make it a semi-circle including the border width and style .By adjusting its height, width and position to absolute and setting opacity to zero (0). As the wifi-circles has animation over it so I have set the animation-duration to infinite running with a time-function of 3 sec. To the first circle, I have set an animation delay of 800ms.
Now moving over to the next semi-circle , again I have adjusted the animation-delay to 400ms and adjusted its height and width.
As moving more forward to the next semi-circle again I need to adjust the height and the width .
Now moving downward to the last semi-circle I have set the opacity to 1, set the background-color , adjusted its height and width and has applied no animation effect to it .
I have also used keyframe to the wifianimation at 0 , 5 ,6 and 100 percentage for various browsers.
Below is the CSS code for the animated wifi symbol :-
body {
text-align: center;
vertical-align: center;
margin: 20px 10px 0;
background-color: #31313B;
}
h1{
font-size: 35px;
font-weight: 600;
color: #FFFFCC;
}
.wifi-symbol {
display: none;
}
.wifi-symbol {
display: block;
position: absolute;
top: 50%;
display: inline-block;
width: 150px;
height: 150px;
margin-top: -187.5px;
-ms-transform: rotate(-45deg) translate(-100px);
-moz-transform: rotate(-45deg) translate(-100px);
-o-transform: rotate(-45deg) translate(-100px);
-webkit-transform: rotate(-45deg) translate(-100px);
transform: rotate(-45deg) translate(-100px);
}
.wifi-symbol .wifi-circle {
box-sizing: border-box;
-moz-box-sizing: border-box;
display: block;
width: 100%;
height: 100%;
font-size: 21.42857px;
position: absolute;
bottom: 0;
left: 0;
border-color: #FFFFCC;
border-style: solid;
border-width: 1em 1em 0 0;
-webkit-border-radius: 0 100% 0 0;
border-radius: 0 100% 0 0;
opacity: 0;
-o-animation: wifianimation 3s infinite;
-moz-animation: wifianimation 3s infinite;
-webkit-animation: wifianimation 3s infinite;
animation: wifianimation 3s infinite;
}
.wifi-symbol .wifi-circle.first {
-o-animation-delay: 800ms;
-moz-animation-delay: 800ms;
-webkit-animation-delay: 800ms;
animation-delay: 800ms;
}
.wifi-symbol .wifi-circle.second {
width: 5em;
height: 5em;
-o-animation-delay: 400ms;
-moz-animation-delay: 400ms;
-webkit-animation-delay: 400ms;
animation-delay: 400ms;
}
.wifi-symbol .wifi-circle.third {
width: 3em;
height: 3em;
}
.wifi-symbol .wifi-circle.fourth {
width: 1em;
height: 1em;
opacity: 1;
background-color: #FFFFCC;
-o-animation: none;
-moz-animation: none;
-webkit-animation: none;
animation: none;
}
@-o-keyframes wifianimation {
0% {
opacity: 0.4;
}
5% {
opactiy: 1;
}
6% {
opactiy: 0.1;
}
100% {
opactiy: 0.1;
}
}
@-moz-keyframes wifianimation {
0% {
opacity: 0.4;
}
5% {
opactiy: 1;
}
6% {
opactiy: 0.1;
}
100% {
opactiy: 0.1;
}
}
@-webkit-keyframes wifianimation {
0% {
opacity: 0.4;
}
5% {
opactiy: 1;
}
6% {
opactiy: 0.1;
}
100% {
opactiy: 0.1;
}
}
Conclusion :-
Hence , I have created An Animated Wifi Symbol using CSS3 various 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)