В этом материале вы узнаете, как сделать потрясающую анимацию с использованием нескольких фоновых изображений и линейных градиентов в CSS. Где создадим анимацию загрузки Facebook, используя только один элемент HTML.
Для простоты вы не увидите никаких префиксов поставщиков в CSS.
HTML
Код
<div class="seduka-nexazop">
<div class="kidesam">
<div class="kidesam-Img"></div>
<div class="kidesam-manedum"></div>
<div class="kidesam-lposezav"></div>
</div>
<div class="kidesam-kilasd"></div>
<div class="kidesam-aserza"></div>
<div class="kidesam-dsazed"></div>
</div>
CSS
Код
.seduka-nexazop{
background-color: rgb(255, 255, 255);
border-radius: 3px;
border-bottom: rgb(208, 209, 213) solid 1px;
border-left: rgb(223, 224, 228) solid 1px;
border-right-color: rgb(223, 224, 228) solid 1px;
border-top-color: rgb(229, 230, 233) solid 1px;
display: block;
height: 324px;
width: 494px;
padding: 12px;
}
.kidesam{
width:100%;
height:30px;
}
.kidesam-Img{
position:relative;
left:0;
background-color: #CCC;
height: 40px;
width: 40px;
animation-name: shine;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.kidesam-manedum, .kidesam-lposezav, .kidesam-kilasd, .kidesam-aserza, .kidesam-dsazed{
position:relative;
background-color: #CCC;
height: 6px;
animation-name: shine;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes shine {
from {transition:none;}
to {background-color:#f6f7f8;transition: all 0.3s ease-out;}
}
.kidesam-manedum{
left:50px;
top:-33px;
width: 25%;
}
.kidesam-lposezav{
left:50px;
top:-20px;
width: 15%;
}
.kidesam-kilasd{
left:0px;
top:30px;
width: 80%;
}
.kidesam-aserza{
left:0px;
top:45px;
width: 90%;
}
.kidesam-dsazed{
left:0px;
top:60px;
width: 50%;
}
На этом все, точнее создали на чистом CSS3 - Facebook как анимированное окно загрузки контента.
Демонстрация
