Animated Line
Asyraf Wahi Anuar
The animated line tutorial is created using HTML and CSS. developer can use animated lines to enhance their application or web UI to make it look more attractive. It is recommended to use a web-kit web browser such as Chrome or Firefox.
This tutorial may be outdated
It was last reviewed 4 years ago. Some steps may differ in newer versions.
The animated line tutorial is created using HTML and CSS. developer can use animated lines to enhance their application or web UI to make it look more attractive. It is recommended to use a web-kit web browser such as Chrome or Firefox. The HTML code should contain below codes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Animated Line</title>
<link href="/style.css" rel="stylesheet">
</head>
<body>
<br><br>
<div id="garis"></div>
</body>
</html>The style.css contains the CSS for the animated lines. Below is the code for the CSS:
#garis {
height:5px;
background-color:#d13636;
background-color:rgba(221,60,77,.95);
background-image:-webkit-gradient(linear,0 50%,100% 50%,color-stop(0,#e75239),color-stop(12.5%,#e75239),color-stop(12.5%,#ff961c),color-stop(25%,#ff961c),color-stop(25%,#ffcc27),color-stop(37.5%,#ffcc27),color-stop(37.5%,#fce62f),color-stop(50%,#fce62f),color-stop(50%,#cde35b),color-stop(62.5%,#cde35b),color-stop(62.5%,#82cc33),color-stop(75%,#82cc33),color-stop(75%,#41bece),color-stop(87.5%,#41bece),color-stop(87.5%,#049cdb),color-stop(100%,#049cdb));
background-image:-webkit-linear-gradient(left,#e75239 0,#e75239 12.5%,#ff961c 12.5%,#ff961c 25%,#ffcc27 25%,#ffcc27 37.5%,#fce62f 37.5%,#fce62f 50%,#cde35b 50%,#cde35b 62.5%,#82cc33 62.5%,#82cc33 75%,#41bece 75%,#41bece 87.5%,#049cdb 87.5%,#049cdb 100%);
background-image:-moz-linear-gradient(left,#e75239 0,#e75239 12.5%,#ff961c 12.5%,#ff961c 25%,#ffcc27 25%,#ffcc27 37.5%,#fce62f 37.5%,#fce62f 50%,#cde35b 50%,#cde35b 62.5%,#82cc33 62.5%,#82cc33 75%,#41bece 75%,#41bece 87.5%,#049cdb 87.5%,#049cdb 100%);
background-image:-o-linear-gradient(left,#e75239 0,#e75239 12.5%,#ff961c 12.5%,#ff961c 25%,#ffcc27 25%,#ffcc27 37.5%,#fce62f 37.5%,#fce62f 50%,#cde35b 50%,#cde35b 62.5%,#82cc33 62.5%,#82cc33 75%,#41bece 75%,#41bece 87.5%,#049cdb 87.5%,#049cdb 100%);
background-image:-ms-linear-gradient(left,#e75239 0,#e75239 12.5%,#ff961c 12.5%,#ff961c 25%,#ffcc27 25%,#ffcc27 37.5%,#fce62f 37.5%,#fce62f 50%,#cde35b 50%,#cde35b 62.5%,#82cc33 62.5%,#82cc33 75%,#41bece 75%,#41bece 87.5%,#049cdb 87.5%,#049cdb 100%);
background-image:linear-gradient(left,#e75239 0,#e75239 12.5%,#ff961c 12.5%,#ff961c 25%,#ffcc27 25%,#ffcc27 37.5%,#fce62f 37.5%,#fce62f 50%,#cde35b 50%,#cde35b 62.5%,#82cc33 62.5%,#82cc33 75%,#41bece 75%,#41bece 87.5%,#049cdb 87.5%,#049cdb 100%);
background-position:0 0;
background-size:1000px;
width:100%;
top:0;
left:0;
position:relative;
-webkit-animation: garis 10s linear infinite;
-moz-animation: garis 10s linear infinite;
-ms-animation: garis 10s linear infinite;
-o-animation: garis 10s linear infinite;
animation: garis 10s linear infinite;
}
#garis:after {
background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) repeat scroll 0 0 rgba(0, 0, 0, 0);
height: 5px;
left: 0;
position: absolute;
top: 100%;
width: 100%;
}
@-moz-keyframes garis {
0% {
background-position: 0 bottom;
}
100% {
background-position: 1600px bottom;
}
}
@-webkit-keyframes garis {
0% {
background-position: 0 bottom;
}
100% {
background-position: 1600px bottom;
}
}That all. Happy coding :)
Did this tutorial help?
226 readers found this helpful
Comments
No comments yet. Questions about this tutorial are welcome here: the answer helps the next reader too.