Read more
Skill bar.
Hello guys in this article I will so you my new amazing skill bar with animation to use this skill bar your portfolio site to grow your skill hare..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.contener{
width:800px;
height:600px;
border:2px solid black;
margin:auto;
margin-top:700px;
background-color:#A8A9AB;
border-radius:20px;
box-shadow:0 0 30px;
}
.contener h1{
color:yellow;
margin-left:350px;
text-shadow:0 0 30px;
}
.box{
width:100%;
height:40px;
border:1px solid white;
border-radius:20px;
margin-top:80px;
background:#3B3C3F;
}
.box:hover{
box-shadow:0 0 20px black;
}
.color{
width:90%;
height:40px;
background:pink;
border-radius:20px;
animation:moveline 6s linear forwards;
overflow:hidden;
}
.color h3{
margin-left:20px;
color:yellow;
font-size:30px;
margin-top:-1px;
}
.colorone{
width:70%;
height:40px;
background:pink;
border-radius:20px;
animation:moveline 6s linear forwards;
overflow:hidden;
}
.colorone h3{
margin-left:20px;
color:yellow;
font-size:30px;
margin-top:-1px;
}
.colortwo{
width:60%;
height:40px;
background:pink;
border-radius:20px;
animation:moveline 6s linear forwards;
overflow:hidden;
}
.colorthree h3{
margin-left:20px;
color:yellow;
font-size:30px;
margin-top:-1px;
}
.colorthree{
width:40%;
height:40px;
background:pink;
border-radius:20px;
animation:moveline 6s linear forwards;
overflow:hidden;
}
.colortwo h3{
margin-left:20px;
color:yellow;
font-size:30px;
margin-top:-1px;
}
@keyframes moveline{
0%{
width:0%;
}
90%{
width:100%;
}
@keyframes moveline{
0%{
width:0%;
}
70%{
width:100%;
}
@keyframes moveline{
0%{
width:0%;
}
60%{
width:100%;
}
@keyframes moveline{
0%{
width:0%;
}
40%{
width:100%;
}
</style>
</head>
<body>
<div class="contener">
<h1>my skill</h1>
<div class="box">
<div class="color">
<h3>html,90%</h3>
</div>
</div>
<div class="box">
<div class="colorone">
<h3>css,70%</h3>
</div>
</div>
<div class="box">
<div class="colortwo">
<h3>js,60%</h3>
</div>
</div>
<div class="box">
<div class="colorthree">
<h3>react,40%</h3>
</div>
</div>
</div>
</body>
</html>
0 Reviews