Анимация загрузки при помощи CSS3

Вы этом уроке мы рассмотрим, как создать три варианта CSS3-анимации, которые могут быть использованы во многих областях, например, как прелоадер при загрузке данных или изображений на страницу. К сожалению, пока эту анимацию можно увидеть только в Firefox, Safari и Chrome. Итак, давайте посмотрим, как же её создать. 

Первый пример CSS3-анимации

 

HTML

В первом примере, мы создадим только два DIV-а и, с помощью свойства border-radius, придадим им форму круга.

Code
<div class="ball"></div>
<div class="ball1"></div>


CSS

Стили CSS очень простые, просто поиграем немного с параметрами для графики, а что касается анимации, то мы используем свойство transform:rotate.

Code
.ball {
  background-color: rgba(0,0,0,0);
  border:5px solid rgba(0,183,229,0.9);
  opacity:.9;
  border-top:5px solid rgba(0,0,0,0);
  border-left:5px solid rgba(0,0,0,0);
  border-radius:50px;
  box-shadow: 0 0 35px #2187e7;
  width:50px;
  height:50px;
  margin:0 auto;
  -moz-animation:spin .5s infinite linear;
  -webkit-animation:spin .5s infinite linear;
}
.ball1 {
  background-color: rgba(0,0,0,0);
  border:5px solid rgba(0,183,229,0.9);
  opacity:.9;
  border-top:5px solid rgba(0,0,0,0);
  border-left:5px solid rgba(0,0,0,0);
  border-radius:50px;
  box-shadow: 0 0 15px #2187e7;
  width:30px;
  height:30px;
  margin:0 auto;
  position:relative;
  top:-50px;
  -moz-animation:spinoff .5s infinite linear;
  -webkit-animation:spinoff .5s infinite linear;
}
@-moz-keyframes spin {
  0% { -moz-transform:rotate(0deg); }
  100% { -moz-transform:rotate(360deg); }
}
@-moz-keyframes spinoff {
  0% { -moz-transform:rotate(0deg); }
  100% { -moz-transform:rotate(-360deg); }
}
@-webkit-keyframes spin {
  0% { -webkit-transform:rotate(0deg); }
  100% { -webkit-transform:rotate(360deg); }
}
@-webkit-keyframes spinoff {
  0% { -webkit-transform:rotate(0deg); }
  100% { -webkit-transform:rotate(-360deg); }
}


Второй пример CSS3-анимации

 

HTML

Во втором примере html-разметка будет такой же, как и в первом, главное отличие будет в CSS.

Code
<div class="circle"></div>
<div class="circle1"></div>


CSS

В этом примере мы будем использовать вращение, а также добавим больше анимации, которая позволит нам создать эффект импульса. Этот эффект будет применен только для первого круга.

Code
.circle {
  background-color: rgba(0,0,0,0);
  border:5px solid rgba(0,183,229,0.9);
  opacity:.9;
  border-right:5px solid rgba(0,0,0,0);
  border-left:5px solid rgba(0,0,0,0);
  border-radius:50px;
  box-shadow: 0 0 35px #2187e7;
  width:50px;
  height:50px;
  margin:0 auto;
  -moz-animation:spinPulse 1s infinite ease-in-out;
  -webkit-animation:spinPulse 1s infinite linear;
}
.circle1 {
  background-color: rgba(0,0,0,0);
  border:5px solid rgba(0,183,229,0.9);
  opacity:.9;
  border-left:5px solid rgba(0,0,0,0);
  border-right:5px solid rgba(0,0,0,0);
  border-radius:50px;
  box-shadow: 0 0 15px #2187e7;
  width:30px;
  height:30px;
  margin:0 auto;
  position:relative;
  top:-50px;
  -moz-animation:spinoffPulse 1s infinite linear;
  -webkit-animation:spinoffPulse 1s infinite linear;
}
@-moz-keyframes spinPulse {
  0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7;}
  50% { -moz-transform:rotate(145deg); opacity:1; }
  100% { -moz-transform:rotate(-320deg); opacity:0; }
}
@-moz-keyframes spinoffPulse {
  0% { -moz-transform:rotate(0deg); }
  100% { -moz-transform:rotate(360deg); }
}
@-webkit-keyframes spinPulse {
  0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7; }
  50% { -webkit-transform:rotate(145deg); opacity:1;}
  100% { -webkit-transform:rotate(-320deg); opacity:0; }
}
@-webkit-keyframes spinoffPulse {
  0% { -webkit-transform:rotate(0deg); }
  100% { -webkit-transform:rotate(360deg); }
}


Третий пример CSS3-анимации

 

HTML

В последнем примере мы создадим простой цикл, который будет анимирован благодаря свойству transform:scale. HTML-кода больше, чем в предыдущих примерах, но он может изменяться в зависимости от размеров анимации, которую требуется вставить.

Code
<div id="block_1" class="barlittle"></div>
<div id="block_2" class="barlittle"></div>
<div id="block_3" class="barlittle"></div>
<div id="block_4" class="barlittle"></div>
<div id="block_5" class="barlittle"></div>


CSS

И здесь стили очень простые, мы собираемся применить эффект задержки анимации (animation:delay), для каждого блока.

Code
.barlittle {
  background-color:#2187e7;  
  background-image: -moz-linear-gradient(45deg, #2187e7 25%, #a0eaff);
  background-image: -webkit-linear-gradient(45deg, #2187e7 25%, #a0eaff);
  border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333;
  width:10px;
  height:10px;
  float:left;
  margin-left:5px;
  opacity:0.1;
  -moz-transform:scale(0.7);
  -webkit-transform:scale(0.7);
  -moz-animation:move 1s infinite linear;
  -webkit-animation:move 1s infinite linear;
}
#block_1{
  -moz-animation-delay: .4s;
  -webkit-animation-delay: .4s;
  }
#block_2{
  -moz-animation-delay: .3s;
  -webkit-animation-delay: .3s;
}
#block_3{
  -moz-animation-delay: .2s;
  -webkit-animation-delay: .2s;
}
#block_4{
  -moz-animation-delay: .3s;
  -webkit-animation-delay: .3s;
}
#block_5{
  -moz-animation-delay: .4s;
  -webkit-animation-delay: .4s;
}
@-moz-keyframes move{
  0%{-moz-transform: scale(1.2);opacity:1;}
  100%{-moz-transform: scale(0.7);opacity:0.1;}
}
@-webkit-keyframes move{
  0%{-webkit-transform: scale(1.2);opacity:1;}
  100%{-webkit-transform: scale(0.7);opacity:0.1;}
}

  • FalleN

  • 4363

  • 1

  • 0

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

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

Для добавления вы должны авторизироваться!