Как мы посмели бы пройти мимо обязательной анимации загрузки! Тут идея заключается в смешении цветов по мере вращения. Это очень просто!
Разметка
<div class="loading"></div>
Для разметки мы применим один-единственный элемент.
CSS
.loading {
background: rgba(0, 50, 250, 0);
position: relative;
margin: 5em auto 0 auto;
width: 3em;
height: 3em;
animation-name:rotate;
}
.loading,
.loading:before,
.loading:after {
border-radius: 100%;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
}
.loading:before,
.loading:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: inherit;
height: inherit;
}
.loading:before {
background: rgba(200, 250, 100, 0);
animation-name: ring;
}
.loading:after {
background: rgba(250, 0, 200, 0);
animation-name: ring2;
}
@keyframes rotate {
0% {
transform: rotateZ(0deg) scaleX(0.1) scaleY(0.1) translateZ(0);
box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5),
inset 0 0.8em 0 rgba(252, 150, 0, 0.5),
inset -0.8em 0 0 rgba(0, 255, 0, 0.5),
inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
}
/* Скрыто */
85%, 100% {
/* 360 градусов х 10 */
transform: rotateZ(3600deg) scaleX(2.01) scaleY(2) translateZ(0);
box-shadow: inset 0 0 0 rgba(255, 0, 0, 0),
inset 0 0 0 rgba(252, 150, 0, 0),
inset 0 0 0 rgba(0, 255, 0, 0),
inset 0 0 0 rgba(0, 150, 255, 0);
}
}
@keyframes ring {
0% {
transform: scaleX(0.1) scaleY(0.5);
box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5),
inset 0 0.8em 0 rgba(252, 150, 0, 0.5),
inset -0.8em 0 0 rgba(0, 255, 0, 0.5),
inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
}
/* Скрыто */
75%, 100% {
transform: scaleX(2) scaleY(2.1);
box-shadow: inset 0 0 0 rgba(255, 0, 0, 0),
inset 0 0 0 rgba(252, 150, 0, 0),
inset 0 0 0 rgba(0, 255, 0, 0),
inset 0 0 0 rgba(0, 150, 255, 0);
}
}
@keyframes ring2 {
0% {
transform: scaleX(0.5) scaleY(0.1);
box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5),
inset 0 0.8em 0 rgba(252, 150, 0, 0.5),
inset -0.8em 0 0 rgba(0, 255, 0, 0.5),
inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
}
/* Скрыто */
65%, 100% {
transform: scaleX(2) scaleY(2.1);
box-shadow: inset 0 0 0 rgba(255, 0, 0, 0),
inset 0 0 0 rgba(252, 150, 0, 0),
inset 0 0 0 rgba(0, 255, 0, 0),
inset 0 0 0 rgba(0, 150, 255, 0);
}
}
Это – отличный пример экспериментирования с временными интервалами и скоростями для получения действительно эффектной анимации.