CSS-анимация «Чек-лист»




CSS-анимация "Чек-лист"

CSS-анимация «чек-лист», в которой отмечаются 3 пункта. В анимации используется одно изображение SVG.
HTML

HTML

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Анимация SVGPNG.RU</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class = "cont">
<div class = "list" >
<div class = "checkboxborder" id = "ch1" > 
<div class = "checked" id = "ck1" ></div>
</div>
<div class = "checkboxborder" id = "ch2" >
<div class = "checked" id = "ck2" ></div> </div>
<div class = "checkboxborder" id = "ch3" > 
<div class = "checked" id = "ck3" ></div> </div>
</div>

</div>


</div>
</body>
</html>

CSS

CSS

.cont{
height: 100px;
width: 100px;
position: relative;

overflow:hidden;


}


.list{

height: 80px;
width: 60px;
border:solid;
background-size: cover;
position: absolute;
left: 20px;
top: 10px;
overflow:hidden;
border-radius:3px;
color: #0267FF;
transform: skew(-5deg, -5deg);
animation-name: listA;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: ease;
}

.checkboxborder{
height: 10px;
width: 10px;
border:solid;
background-size: cover;
position: absolute;
left: 40px;
top: 5px;
overflow:hidden;
border-radius:1px;
border-width:2px;
color: #0267FF;


}


.checked{

background: url("check.svg");
background-size: cover;
width: 10px;
height: 10px;

}


#ch1{
animation-name: ch1A;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;

}

#ch2{
left:40px;
top:25px;
animation-name: ch1A;
animation-duration: 5s;
animation-delay: .3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

#ch3{
left:40px;
top:45px;
animation-name: ch1A;
animation-duration: 5s;
animation-delay: .6s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

#ck1{
animation-name: chk1A;
animation-duration: 5s;
animation-delay: .0s;
animation-iteration-count: infinite;
animation-timing-function: linear;

}

#ck2{
animation-name: chk1A;
animation-duration: 5s;
animation-delay: .3s;
animation-iteration-count: infinite;
animation-timing-function: linear;

}

#ck3{
animation-name: chk1A;
animation-duration: 5s;
animation-delay: .6s;
animation-iteration-count: infinite;
animation-timing-function: linear;

}

@keyframes listA {
0% {transform: skew(0deg, 0deg);}
50% {transform: skew(-2deg, 2deg);}
100% {transform: skew(0deg, 0deg);}

}

@keyframes ch1A {

0%{transform:scale(1); color:#0267FF}
30%{transform:scale(1); color:#0267FF}
40%{transform:scale(1.2); color:#00E075}
43%{transform:scale(1.2); color:#0267FF}
45%{transform:scale(1); color:#0267FF}

}


@keyframes chk1A {

0%{transform:scale(0.5); color:#0267FF}
30%{transform:scale(0.5); color:#0267FF}
40%{transform:scale(1.3); color:#00E075}
43%{transform:scale(1.3); color:#0267FF}
45%{transform:scale(0.3); color:#0267FF}
100%{transform:scale(0.5); color:#0267FF}

}

Изображение
Скачайте изображение в SVG или PNG здесь

Помогла ли вам эта статья?

Вы уже голосовали
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: