Exore LTD » CSS3 » Эффект анимации загрузки страницы на чистом css
Лого SiteHere.ru

Октябрь 29, 2019 Запись была обновлена

Время чтения: 2 мин. Прочитать позже

Эффект анимации загрузки страницы на чистом css

Эффект анимации загрузки страницы на чистом css

Всем привет! Сегодня мы рассмотрим еще один классный пример анимации загрузки страницы. У некоторых Web сайтов загрузка страницы длится долго и посетитель не дожидаясь долгожданного контента покидает сайт. Хорошим отвлекающим эффектом является анимация, она же и придает некую красоту для сайта.

Смотреть примерСкачать

Похожие статьи на эту тему:

HTML

Создаем <div class="loading-wrap"> состоящий из 3-х внутренних <div class="triangle"> которые отвечают за отображение эффекта загрузки страницы.

HTML КОД
1
2
3
4
5

<div class="loading-wrap">
    <div class="triangle1"></div>
    <div class="triangle2"></div>
    <div class="triangle3"></div>
</div>

CSS

Данный код встроен в саму Web страницу

CSS КОД
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

body{
    background: #555;
}
 
.loading-wrap {
    width: 60px; 
    height: 60px;
    position: absolute;
    top: 50%; 
    left: 50%;
    margin: -30px 0 0 -30px;
    background: #777;      
    -moz-animation: rotation ease-in-out 2s infinite;
    -webkit-animation: rotation ease-in-out 2s infinite;
    -ms-animation: rotation ease-in-out 2s infinite;
    animation: rotation ease-in-out 2s infinite;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}
 
.triangle1, .triangle2, .triangle3 {
    border-width: 0 20px 30px 20px;
    border-style: solid;
    border-color: transparent;
    border-bottom-color: #67cbf0;
    height: 0; width: 0;
    position: absolute;
    left: 10px; 
    top: -10px;
    -moz-animation: fadecolor 2s 1s infinite;
    -webkit-animation: fadecolor 2s 1s infinite;
    -ms-animation: fadecolor 2s 1s infinite;
    animation: fadecolor 2s 1s infinite;
}
 
.triangle2, .triangle3 {
    content: '';
    top: 20px; 
    left: 30px;
    -moz-animation-delay: 1.1s;
    -webkit-animation-delay: 1.1s;
    -ms-animation-delay: 1.1s;
    animation-delay: 1.1s;
}
 
.triangle3 {
    left: -10px;
    -moz-animation-delay: 1.2s;
    -webkit-animation-delay: 1.2s;
    -ms-animation-delay: 1.2s;
    animation-delay: 1.2s;
}
 
@-moz-keyframes rotation {
    0% {-moz-transform: rotate(0deg);}
    20% {-moz-transform: rotate(360deg);}
    100% {-moz-transform: rotate(360deg);}	
}
 
@-webkit-keyframes rotation {	
    0% {-webkit-transform: rotate(0deg);}
    20% {-webkit-transform: rotate(360deg);}
    100% {-webkit-transform: rotate(360deg);}
}
 
@-ms-keyframes rotation {
    0% {-webkit-transform: rotate(0deg);}
    20% {-webkit-transform: rotate(360deg);}
    100% {-webkit-transform: rotate(360deg);}	
}		
 
@keyframes rotation {
    0% {transform: rotate(0deg);}
    20% {transform: rotate(360deg);}
    100% {transform: rotate(360deg);}
}          
 
@-moz-keyframes fadecolor {	
    0% {border-bottom-color: #eee;}
    100%{border-bottom-color: #67cbf0;}
}
 
@-webkit-keyframes fadecolor {
    0% {border-bottom-color: #eee;}
    100%{border-bottom-color: #67cbf0;}
}
 
@-ms-keyframes fadecolor {
    0% {border-bottom-color: #eee;}
    100% {border-bottom-color: #67cbf0;}
}		
 
@keyframes fadecolor {
   0% {border-bottom-color: #eee;}
   100%{border-bottom-color: #67cbf0;}
}

Как видите не такой уж и сложный эффект, теперь загрузка страницы стала еще интереснее для посетителей.

Успехов!

Источник: Оригинал

С Уважением, Бышкин Константин

Еще материалы по этой теме

Спасибо за ваше обращение!

Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)

1 комментарий к записи
  • Иван

    Я хочу сделать свою анимацию.Для этого я буду использовать либо видео, либо GIF.Так вот, как это сделать?

     

     
    Ответить

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *