CSS — анимация: шестеренки

CSS-анимация шестеренки

CSS-анимация крутящихся шестеренок

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 = "circles" id = "no1"> </div>
<div class = "circles" id = "no2"> </div>
<div class = "circles" id = "no3"> </div>
</div>


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

CSS

CSS

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



}


.circles{

height: 80px;
width: 80px;
background: url("circle.svg");
background-size: cover;
position: absolute;
left: 7px;
top: 27px;
overflow:hidden;

}


#no1{
left:-25px;
top:0px;
animation-name: crcA1;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

#no2{
left:45px;
top:-25px;
animation-name: crcA2;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

#no3{
left:55px;
top:50px;
animation-name: crcA1;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}


@keyframes crcA1 {
0% {transform:rotate(0deg);}
100% {transform:rotate(360deg);}
}

@keyframes crcA2 {
0% {transform:rotate(0deg);}
100% {transform:rotate(-360deg);}
}

 

Изображения

Добавить комментарий

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

По теме:

<