Добрый день дорогие подписчики. Сегодня для вас очередная полезная статья, а точнее очень полное руководство – как сделать CSS анимацию картинки, блоков, кнопок и текста на сайте. В этом мануале будет много примеров, которые вы сможете сразу посмотреть и применить на своих сайтах. Плюсом я сделаю исходники, т. е вы еще можете их скачать по прямой ссылке, что безусловно является удобством. Для вас же стараюсь, дорогие мои 🙂 Итак, приступим.
Содержание:
Содержание
Я думаю, что все согласятся с утверждением, что чем сайт интерактивнее и динамичнее, тем на нем дольше остаются пользователя. Это безусловный факт и спорить здесь просто нет смысла. Сейчас мы разберем примеры CSS анимации при наведении мыши. И разбор мы начнем со свойства CSS – transition.
Если говорить в общих чертах, то transition – это переходное свойство, которое может принимать до 4 разных связанных свойств:
|
1
2
3
|
.example {
transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
}
|
Все эти свойства позволяют элементам менять свои значения в пределах определенного времени duration. Т.е мы навели элемент у него начинают появляться свойства, которые мы задали в селекторе (в нашем случае это .element ). Чуть ниже пример кода перехода фона у контейнера div с псевдоклассом :hover из красного цвета в зеленый:
|
1
2
3
4
5
6
7
|
div {
transition: background-color 0.5s ease;
background-color: red;
}
div:hover {
background-color: green;
}
|
При наведении мыши CSS анимация появляется не сразу, а с небольшой задержкой в доли секунды. Это вы можете увидеть уже на этом примере:
Вы также можете задавать как определенное свойство, как мы сделали с вами выше, т.е задали правило «меняй фон у элемента div в течение 0.4 сек с красного на зеленый» или же использовать значение all, чтобы обратиться ко всему свойству целиком.
|
1
2
3
4
5
6
7
8
9
|
div {
transition: all 0.5s ease;
background: red;
padding: 10px;
}
div:hover {
background: green;
padding: 20px;
}
|
В примере выше, у свойств background и padding произойдет эффект перехода transition. Вы можете также через запятую указывать определенный набор значений, например как в этом сниппете кода:
|
1
2
3
|
div {
transition: background 0.2s ease, padding 0.8s linear;
}
|
Как видите, наша запись уже сократилась и мы все сделали в одну строчку.
По большему счету не важно, в каком порядке указаны значения, только если мы имеем дело со свойством delay. Тут уже нам нужно указывать продолжительность по времени как долго будет происходить та самая задержка.
Также некоторые свойства не могут быть переходными, т.е быть с эффектом transition, потому как не являются анимированными.
Указав в стилях transition элемента мы можем им управлять как в одну сторону, так и в другую, т.е мы навели на элемент и произошло изменение значения цвета, отвели курсор мыши и все возвращается обратно к исходному. Простой пример ниже все поясняет:
У вас может возникнуть вопрос, почему css анимация при наведении происходит, а в обратном случае нет?
Это зависит от того, что у элемента с классом .box в нашем примере эффект происходит только в одну сторону у псевдоэлемента .box:hover .
Для совместимости со всеми типами современных браузеров у классов элементов добавляют следующие свойства:
|
1
2
3
4
5
6
|
.example {
-webkit-transition: background-color 500ms ease-out 1s;
-moz-transition: background-color 500ms ease-out 1s;
-o-transition: background-color 500ms ease-out 1s;
transition: background-color 500ms ease-out 1s;
}
|
Вместо background-color вставляете нужное значение цвета и смотрите результат в браузере.
Еще один пример использования css анимации при наведении представлен ниже. Структура следующая. Имеем конструкцию html кода:
|
1
2
3
4
5
6
|
<link href='http://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'>
<div class="wrap">
<div class="sticker"></div>
<div class="msg">new!</div>
</div>
|
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
|
body {padding:4em; background:#fcfcfc;}
.wrap {width:200px; margin:auto; z-index:1;}
.msg {
color: whitesmoke;
text-align:center;
font-family: 'Bree Serif', Courier, monospaced;
font-size:3.5em;
width:200px;
position:absolute;
margin:55px 0 0 2px;
pointer-events: none;
}
.sticker {
width:200px;
height:200px;
position:absolute;
background: url(https://dl.dropbox.com/u/1143870/i/sticker.png) top center no-repeat;
animation: spin 10s linear infinite;
/*Set our animation play state to paused initially */
animation-play-state: paused;
}
.sticker:hover {
/* Toggle our animation play state to running when we are hovering over our sticker */
animation-play-state: running;
}
@keyframes spin {
100% {transform: rotate(1turn); }
}
|
И получаем вот такой симпатичный эффект CSS анимации.
Давайте рассмотрим другие варианты.
Теперь давайте перейдем к практической части, а именно создадим css эффект анимации у текста и текстовые тени. Вполне возможно вы видели заставки трейлеры к фильмам, может даже немного жутковатые, где текст словно выцветал на темном фоне. Сейчас на примере мы воссоздадим что-то похожее.
Идея состоит в том, чтобы размыть текст и сделать буквы вращающимися с пространством между ними. Это может быть достигнуто различными способами, используя новые CSS фильтры, а также анимацию отступов margin и padding. Мы же будем использовать текстовые тени и межбуквенный интервал, чтобы достичь желаемого результата. Так как нам нужно будет контролировать каждую букву при анимации текста, то мы будем использовать скрипт Lettering.js Дэйва Руперта, чтобы обернуть слова и буквы в несколько тегов span.
Каждые фразы мы обернем в тег h2.
|
1
2
3
4
5
6
7
8
9
10
|
<div class="os-phrases">
<h2>Sometimes it's better</h2>
<h2>to hide</h2>
<h2>in order to</h2>
<h2>survive evil</h2>
<h2>Thanatos</h2>
<h2>This fall</h2>
<h2>Prepare</h2>
<h2>Refresh to replay</h2>
</div>
|
Помните, что это лишь эксперементальный эффект и не стоит заморачиваться и быть строгими с разметкой.
Теперь с помощью конструкции кода ниже обернем все слова в тегах h2 в теги span. Вот так:
|
1
|
$("#os-phrases > h2").lettering('words').children("span").lettering().children("span").lettering();
|
Это создаст следующую безумную структуру:
|
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
|
<div class="os-phrases" id="os-phrases">
<h2>
<span class="word1">
<span class="char1">
<span class="char1">
S
</span>
</span>
<span class="char2">
<span class="char1">
o
</span>
</span>
<span class="char3">
<span class="char1">
m
</span>
</span>
<!-- ... -->
</span> <!-- /word1 -->
<!-- ... -->
</h2>
<h2>
<!-- ... -->
</h2>
<!-- ... -->
</div>
|
Теперь каждая из наших букв обернута с помощью скрипта тегами span. Как видите их получилось много, но это только часть. Целиком всю CSS структуру вы увидите в файле, который я приложу. Здесь только показывается принцип его действия.
Теперь приступим к стилизации наших элементов.
Все наши заголовки будут располагаться во всю ширину экрана, т.е занимать практически все свободное место.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
.os-phrases h2 {
font-family: 'Dosis', 'Lato', sans-serif;
font-size: 70px;
font-weight: 200;
height: 100%;
width: 100%;
overflow: hidden;
text-transform: uppercase;
padding: 0;
margin: 0;
position: absolute;
top: 0;
left: 0;
letter-spacing: 14px;
text-align: center;
}
|
Мы же хотим, чтобы наши буквы и весь текст целиком располагались по центру, правильно? Тогда нам потребуется flexbox для нашего контейнера. Вот код:
|
1
2
3
4
5
6
7
8
9
|
.os-phrases h2,
.os-phrases h2 > span {
height: 100%;
/* Centering with flexbox */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
|
Т.е все буквы, которые обернуты в тег span от родительского класса .os-phrases будут закреплены по центру.
Теперь добавим немного свободного места между словами (межбуквенный интервал):
|
1
2
3
|
.os-phrases h2 > span {
margin: 0 15px;
}
|
Первая «обертка» (Wrapper) будет иметь свойство perspective (т.е выходить на первый план):
|
1
2
3
4
5
|
.os-phrases h2 > span > span {
display: inline-block;
perspective: 1000px;
transform-origin: 50% 50%;
}
|
Сами буквы будут прозрачными и мы запустим css анимацию текста для них в 5,2 секунды:
|
1
2
3
4
5
6
7
|
.os-phrases h2 > span > span > span {
display: inline-block;
color: hsla(0,0%,0%,0);
transform-style: preserve-3d;
transform: translate3d(0,0,0);
animation: OpeningSequence 5.2s linear forwards;
}
|
Прежде чем приступить к анимации, давайте определим как предложения (фразы) и с какой задержкой будут появляться, какая из них будет быстрее, чем предыдущая.
|
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
|
.os-phrases h2:nth-child(2) > span > span > span {
animation-delay: 5s;
}
.os-phrases h2:nth-child(3) > span > span > span {
animation-delay: 10s;
}
.os-phrases h2:nth-child(4) > span > span > span {
animation-delay: 15s;
}
.os-phrases h2:nth-child(5) > span > span > span {
font-size: 150px;
animation-delay: 21s;
animation-duration: 8s;
}
.os-phrases h2:nth-child(6) > span > span > span {
animation-delay: 30s;
}
.os-phrases h2:nth-child(7) > span > span > span {
animation-delay: 34s;
}
|
Ну и напоследок. Мы зададим один специальный эффект анимации, но сперва давайте взглянем на самый главный.
В этой анимации мы сначала придадим эффект text-shadow, чтобы буквы выглядели немного размыто. Межбуквенное расстояние будет большим и буквы будут повернуты по оси Y, и мы будем видеть только незначительную их часть. Ставим непрозрачность opacity:0.2
На половине анимации мы заострим буквы и уменьшим расстояние (интервал) до 14px, увеличим непрозрачность и повернем их на 0.
На последнем шаге, мы добавим исчезающие буквы и промасштабируем их, что сделает их слегка размытыми снова:
|
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
|
@keyframes OpeningSequence {
0% {
text-shadow: 0 0 50px #fff;
letter-spacing: 80px;
opacity: 0.2;
transform: rotateY(-90deg);
}
50% {
text-shadow: 0 0 1px #fff;
letter-spacing: 14px;
opacity: 0.8;
transform: rotateY(0deg);
}
85% {
text-shadow: 0 0 1px #fff;
opacity: 0.8;
transform: rotateY(0deg) translateZ(100px);
}
100% {
text-shadow: 0 0 10px #fff;
opacity: 0;
transform: translateZ(130px);
pointer-events: none;
}
}
|
Наша последняя фраза будет иметь другую CSS анимацию. Вот ее код:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
.os-phrases h2:nth-child(8) > span > span > span {
font-size: 30px;
animation: FadeIn 4s linear 40s forwards;
}
@keyframes FadeIn {
0% {
opacity: 0;
text-shadow: 0 0 50px #fff;
}
100% {
opacity: 0.8;
text-shadow: 0 0 1px #fff;
}
}
|
Напоследок добавим акцент на конкретных словах, сделая их «жирным» начертанием:
|
1
2
3
4
5
6
|
/* Жирные слова */
.os-phrases h2:first-child .word3,
.os-phrases h2:nth-child(2) .word2,
.os-phrases h2:nth-child(4) .word2 {
font-weight: 600;
}
|
Собственно это все шаги. Вот что получится в итоге, нажмите на кнопку демо или скачайте исходники.
Скачать исходники
Одним лишь примером выше мы не ограничимся. Специально для вас я подготовил подборку исходников кода с удивительными анимационными текстовыми эффектами, сделанными при помощи CSS. Их здесь будет целых 15 штук. Бери не хочу.
Html код:
|
1
2
3
4
5
6
7
8
9
10
|
<div class="cssload-preloader">
<span>L</span>
<span>o</span>
<span>a</span>
<span>d</span>
<span>i</span>
<span>n</span>
<span>g</span>
</div>
|
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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
|
.cssload-preloader {
font-family: Arial, Tahoma;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
z-index: 10;
display: box;
display: -o-box;
display: -ms-box;
display: -webkit-box;
display: -moz-box;
display: flex;
display: -o-flex;
display: -ms-flex;
display: -webkit-flex;
display: -moz-flex;
box-pack: center;
-o-box-pack: center;
-ms-box-pack: center;
-webkit-box-pack: center;
-moz-box-pack: center;
justify-content: center;
-o-justify-content: center;
-ms-justify-content: center;
-webkit-justify-content: center;
-moz-justify-content: center;
box-align: center;
-o-box-align: center;
-ms-box-align: center;
-webkit-box-align: center;
-moz-box-align: center;
align-items: center;
-o-align-items: center;
-ms-align-items: center;
-webkit-align-items: center;
-moz-align-items: center;
transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
perspective: 487px;
-o-perspective: 487px;
-ms-perspective: 487px;
-webkit-perspective: 487px;
-moz-perspective: 487px;
overflow: hidden;
animation: wobble 3s ease-in-out infinite;
-o-animation: wobble 3s ease-in-out infinite;
-ms-animation: wobble 3s ease-in-out infinite;
-webkit-animation: wobble 3s ease-in-out infinite;
-moz-animation: wobble 3s ease-in-out infinite;
padding-bottom: 2em;
}
.cssload-preloader > span {
font-size: 49px;
animation: 3s ease-in-out infinite;
-o-animation: 3s ease-in-out infinite;
-ms-animation: 3s ease-in-out infinite;
-webkit-animation: 3s ease-in-out infinite;
-moz-animation: 3s ease-in-out infinite;
color: transparent;
text-shadow: 0 0 0px rgb(0,0,0);
}
span:nth-child(-n+3) {
animation-delay: -1.495s;
-o-animation-delay: -1.495s;
-ms-animation-delay: -1.495s;
-webkit-animation-delay: -1.495s;
-moz-animation-delay: -1.495s;
}
span:nth-child(1),
span:nth-last-child(1) {
animation-name: blur-1;
-o-animation-name: blur-1;
-ms-animation-name: blur-1;
-webkit-animation-name: blur-1;
-moz-animation-name: blur-1;
}
span:nth-child(2),
span:nth-last-child(2) {
animation-name: blur-2;
-o-animation-name: blur-2;
-ms-animation-name: blur-2;
-webkit-animation-name: blur-2;
-moz-animation-name: blur-2;
}
span:nth-child(3),
span:nth-last-child(3) {
animation-name: blur-3;
-o-animation-name: blur-3;
-ms-animation-name: blur-3;
-webkit-animation-name: blur-3;
-moz-animation-name: blur-3;
}
@keyframes blur-1 {
50% {
text-shadow: 0 0 0.15em rgb(0,0,0);
}
}
@-o-keyframes blur-1 {
50% {
text-shadow: 0 0 0.15em rgb(0,0,0);
}
}
@-ms-keyframes blur-1 {
50% {
text-shadow: 0 0 0.15em rgb(0,0,0);
}
}
@-webkit-keyframes blur-1 {
50% {
text-shadow: 0 0 0.15em rgb(0,0,0);
}
}
@-moz-keyframes blur-1 {
50% {
text-shadow: 0 0 0.15em rgb(0,0,0);
}
}
@keyframes blur-2 {
50% {
text-shadow: 0 0 0.075em rgb(0,0,0);
}
}
@-o-keyframes blur-2 {
50% {
text-shadow: 0 0 0.075em rgb(0,0,0);
}
}
@-ms-keyframes blur-2 {
50% {
text-shadow: 0 0 0.075em rgb(0,0,0);
}
}
@-webkit-keyframes blur-2 {
50% {
text-shadow: 0 0 0.075em rgb(0,0,0);
}
}
@-moz-keyframes blur-2 {
50% {
text-shadow: 0 0 0.075em rgb(0,0,0);
}
}
@keyframes blur-3 {
50% {
text-shadow: 0 0 0.05em rgb(0,0,0);
}
}
@-o-keyframes blur-3 {
50% {
text-shadow: 0 0 0.05em rgb(0,0,0);
}
}
@-ms-keyframes blur-3 {
50% {
text-shadow: 0 0 0.05em rgb(0,0,0);
}
}
@-webkit-keyframes blur-3 {
50% {
text-shadow: 0 0 0.05em rgb(0,0,0);
}
}
@-moz-keyframes blur-3 {
50% {
text-shadow: 0 0 0.05em rgb(0,0,0);
}
}
@keyframes wobble {
from, to {
transform: rotateY(-45deg);
}
50% {
transform: rotateY(45deg);
}
}
@-o-keyframes wobble {
from, to {
-o-transform: rotateY(-45deg);
}
50% {
-o-transform: rotateY(45deg);
}
}
@-ms-keyframes wobble {
from, to {
-ms-transform: rotateY(-45deg);
}
50% {
-ms-transform: rotateY(45deg);
}
}
@-webkit-keyframes wobble {
from, to {
-webkit-transform: rotateY(-45deg);
}
50% {
-webkit-transform: rotateY(45deg);
}
}
@-moz-keyframes wobble {
from, to {
-moz-transform: rotateY(-45deg);
}
50% {
-moz-transform: rotateY(45deg);
}
}
|
Результат:
HTML:
|
1
|
<div id="fountainTextG"><div id="fountainTextG_1" class="fountainTextG">L</div><div id="fountainTextG_2" class="fountainTextG">o</div><div id="fountainTextG_3" class="fountainTextG">a</div><div id="fountainTextG_4" class="fountainTextG">d</div><div id="fountainTextG_5" class="fountainTextG">i</div><div id="fountainTextG_6" class="fountainTextG">n</div><div id="fountainTextG_7" class="fountainTextG">g</div></div>
|
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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
|
#fountainTextG{
width:234px;
margin:auto;
}
.fountainTextG{
color:rgb(0,0,0);
font-family:Arial;
font-size:24px;
text-decoration:none;
font-weight:normal;
font-style:normal;
float:left;
animation-name:bounce_fountainTextG;
-o-animation-name:bounce_fountainTextG;
-ms-animation-name:bounce_fountainTextG;
-webkit-animation-name:bounce_fountainTextG;
-moz-animation-name:bounce_fountainTextG;
animation-duration:2.09s;
-o-animation-duration:2.09s;
-ms-animation-duration:2.09s;
-webkit-animation-duration:2.09s;
-moz-animation-duration:2.09s;
animation-iteration-count:infinite;
-o-animation-iteration-count:infinite;
-ms-animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
animation-direction:normal;
-o-animation-direction:normal;
-ms-animation-direction:normal;
-webkit-animation-direction:normal;
-moz-animation-direction:normal;
transform:scale(.5);
-o-transform:scale(.5);
-ms-transform:scale(.5);
-webkit-transform:scale(.5);
-moz-transform:scale(.5);
}#fountainTextG_1{
animation-delay:0.75s;
-o-animation-delay:0.75s;
-ms-animation-delay:0.75s;
-webkit-animation-delay:0.75s;
-moz-animation-delay:0.75s;
}
#fountainTextG_2{
animation-delay:0.9s;
-o-animation-delay:0.9s;
-ms-animation-delay:0.9s;
-webkit-animation-delay:0.9s;
-moz-animation-delay:0.9s;
}
#fountainTextG_3{
animation-delay:1.05s;
-o-animation-delay:1.05s;
-ms-animation-delay:1.05s;
-webkit-animation-delay:1.05s;
-moz-animation-delay:1.05s;
}
#fountainTextG_4{
animation-delay:1.2s;
-o-animation-delay:1.2s;
-ms-animation-delay:1.2s;
-webkit-animation-delay:1.2s;
-moz-animation-delay:1.2s;
}
#fountainTextG_5{
animation-delay:1.35s;
-o-animation-delay:1.35s;
-ms-animation-delay:1.35s;
-webkit-animation-delay:1.35s;
-moz-animation-delay:1.35s;
}
#fountainTextG_6{
animation-delay:1.5s;
-o-animation-delay:1.5s;
-ms-animation-delay:1.5s;
-webkit-animation-delay:1.5s;
-moz-animation-delay:1.5s;
}
#fountainTextG_7{
animation-delay:1.64s;
-o-animation-delay:1.64s;
-ms-animation-delay:1.64s;
-webkit-animation-delay:1.64s;
-moz-animation-delay:1.64s;
}
@keyframes bounce_fountainTextG{
0%{
transform:scale(1);
color:rgb(0,0,0);
}
100%{
transform:scale(.5);
color:rgb(255,255,255);
}
}
@-o-keyframes bounce_fountainTextG{
0%{
-o-transform:scale(1);
color:rgb(0,0,0);
}
100%{
-o-transform:scale(.5);
color:rgb(255,255,255);
}
}
@-ms-keyframes bounce_fountainTextG{
0%{
-ms-transform:scale(1);
color:rgb(0,0,0);
}
100%{
-ms-transform:scale(.5);
color:rgb(255,255,255);
}
}
@-webkit-keyframes bounce_fountainTextG{
0%{
-webkit-transform:scale(1);
color:rgb(0,0,0);
}
100%{
-webkit-transform:scale(.5);
color:rgb(255,255,255);
}
}
@-moz-keyframes bounce_fountainTextG{
0%{
-moz-transform:scale(1);
color:rgb(0,0,0);
}
100%{
-moz-transform:scale(.5);
color:rgb(255,255,255);
}
}
|
Результат:
HTML:
|
1
|
<div id="spinningTextG"><div id="spinningTextG_1" class="spinningTextG">L</div><div id="spinningTextG_2" class="spinningTextG">o</div><div id="spinningTextG_3" class="spinningTextG">a</div><div id="spinningTextG_4" class="spinningTextG">d</div><div id="spinningTextG_5" class="spinningTextG">i</div><div id="spinningTextG_6" class="spinningTextG">n</div><div id="spinningTextG_7" class="spinningTextG">g</div></div>
|
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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
|
#spinningTextG{
width:234px;
margin:auto;
height:29px;
}
.spinningTextG{
color:rgb(0,0,0);
font-family:Arial;
font-size:24px;
text-decoration:none;
font-weight:normal;
font-style:normal;
float:left;
animation-name:bounce_spinningTextG;
-o-animation-name:bounce_spinningTextG;
-ms-animation-name:bounce_spinningTextG;
-webkit-animation-name:bounce_spinningTextG;
-moz-animation-name:bounce_spinningTextG;
animation-duration:1.5s;
-o-animation-duration:1.5s;
-ms-animation-duration:1.5s;
-webkit-animation-duration:1.5s;
-moz-animation-duration:1.5s;
animation-iteration-count:infinite;
-o-animation-iteration-count:infinite;
-ms-animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
animation-direction:normal;
-o-animation-direction:normal;
-ms-animation-direction:normal;
-webkit-animation-direction:normal;
-moz-animation-direction:normal;
transform:scale(.3);
-o-transform:scale(.3);
-ms-transform:scale(.3);
-webkit-transform:scale(.3);
-moz-transform:scale(.3);
}
#spinningTextG_1{
animation-delay:0.75s;
-o-animation-delay:0.75s;
-ms-animation-delay:0.75s;
-webkit-animation-delay:0.75s;
-moz-animation-delay:0.75s;
}
#spinningTextG_2{
animation-delay:0.9s;
-o-animation-delay:0.9s;
-ms-animation-delay:0.9s;
-webkit-animation-delay:0.9s;
-moz-animation-delay:0.9s;
}
#spinningTextG_3{
animation-delay:1.05s;
-o-animation-delay:1.05s;
-ms-animation-delay:1.05s;
-webkit-animation-delay:1.05s;
-moz-animation-delay:1.05s;
}
#spinningTextG_4{
animation-delay:1.2s;
-o-animation-delay:1.2s;
-ms-animation-delay:1.2s;
-webkit-animation-delay:1.2s;
-moz-animation-delay:1.2s;
}
#spinningTextG_5{
animation-delay:1.35s;
-o-animation-delay:1.35s;
-ms-animation-delay:1.35s;
-webkit-animation-delay:1.35s;
-moz-animation-delay:1.35s;
}
#spinningTextG_6{
animation-delay:1.5s;
-o-animation-delay:1.5s;
-ms-animation-delay:1.5s;
-webkit-animation-delay:1.5s;
-moz-animation-delay:1.5s;
}
#spinningTextG_7{
animation-delay:1.64s;
-o-animation-delay:1.64s;
-ms-animation-delay:1.64s;
-webkit-animation-delay:1.64s;
-moz-animation-delay:1.64s;
}
@keyframes bounce_spinningTextG{
0%{
transform:scale(1);
color:rgb(0,0,0);
}
100%{
transform:scale(.3) rotate(90deg);
color:rgb(255,255,255);
}
}
@-o-keyframes bounce_spinningTextG{
0%{
-o-transform:scale(1);
color:rgb(0,0,0);
}
100%{
-o-transform:scale(.3) rotate(90deg);
color:rgb(255,255,255);
}
}
@-ms-keyframes bounce_spinningTextG{
0%{
-ms-transform:scale(1);
color:rgb(0,0,0);
}
100%{
-ms-transform:scale(.3) rotate(90deg);
color:rgb(255,255,255);
}
}
@-webkit-keyframes bounce_spinningTextG{
0%{
-webkit-transform:scale(1);
color:rgb(0,0,0);
}
100%{
-webkit-transform:scale(.3) rotate(90deg);
color:rgb(255,255,255);
}
}
@-moz-keyframes bounce_spinningTextG{
0%{
-moz-transform:scale(1);
color:rgb(0,0,0);
}
100%{
-moz-transform:scale(.3) rotate(90deg);
color:rgb(255,255,255);
}
}
|
Выглядит вот так:
В этом разделе статьи хочется поговорить и на практике показать как работает CSS эффект у кнопок. Здесь все очень просто, ведь вы уже знаете как все работает. Особо останавливаться на разборе не буду. Вам достаточно всего лишь скопировать нужный вариант и вставить к себе на сайт. Итак, разберем первый пример – эффект нажатой выпуклой кнопки. В современном дизайне на многих сайтах они используются, например на сайте elama.ru
Создаем новый html документ и прописываем следующую конструкцию:
|
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
|
<!DOCTYPE html>
<html>
<head>
<style>
.button {
padding: 15px 25px;
font-size: 24px;
text-align: center;
cursor: pointer;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.button:hover {background-color: #3e8e41}
.button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
</style>
</head>
<body>
<h2>Animated Buttons - "Pressed Effect"</h2>
<button class="button">Click Me</button>
</body>
</html>
|
Результат ниже:
Разберем другой пример, где при наведении срабатывает знакомый нам эффект hover (псевдокласс) пример наведении:
|
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
|
<!DOCTYPE html>
<html>
<head>
<style>
.button {
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '»';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
</style>
</head>
<body>
<h2>Animated Button</h2>
<button class="button"><span>Hover </span></button>
</body>
</html>
|
Смотрим результат ниже:
Добавление 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
|
<!DOCTYPE html>
<html>
<head>
<style>
.button {
position: relative;
background-color: #4CAF50;
border: none;
font-size: 28px;
color: #FFFFFF;
padding: 20px;
width: 200px;
text-align: center;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
.button:after {
content: "";
background: #90EE90;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px!important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}
.button:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}
</style>
</head>
<body>
<h2>Animated Button - Ripple Effect</h2>
<button class="button">Click Me</button>
</body>
</html>
|
Сохраняем и смотрим, что получится в итоге:
Рассмотрим еще один эффект, когда наводишь на кнопку и она становится с тенью и словно немного выходит на первый план:
|
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
|
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
.button1 {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.button2:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
</style>
</head>
<body>
<h2>Shadow Buttons</h2>
<p>Use the box-shadow property to add shadows to the button:</p>
<button class="button button1">Shadow Button</button>
<button class="button button2">Shadow on Hover</button>
</body>
</html>
|
Предлагаю еще один восхитительный пример анимации кнопок ниже. Просто копируете код и вставляете полюбившийся стиль кнопок на свой сайт.
С кнопками закончили, настало время рассмотреть…
Да, дорогие друзья, к ним тоже можно применить Wow эффект и сайты, даже в минимализме, будут смотреться и выглядеть очень круто и дорого. Вся фишка в использовании все тех же псевдоклассов для элементов.
Предупреждение: Не все псевдоэлементы перехода (transition) одинаково хорошо работают во всех браузерах. Наиболее хорошо просматриваются в Chrome и FireFox
В большинстве примеров ниже у нас будет общий html каркас:
|
1
2
3
4
5
6
7
|
<nav class="cl-effect-13">
<a href="#">Beleaguer</a>
<a href="#">Lassitude</a>
<a href="#">Murmurous</a>
<a href="#">Palimpsest</a>
<a href="#">Assemblage</a>
</nav>
|
Но для некоторых специальных элементов нам нужно передавать data-atribute ссылке текста в псевдоэлементе:
|
1
2
3
4
5
6
7
|
<nav class="cl-effect-11">
<a href="#" data-hover="Desultory">Desultory</a>
<a href="#" data-hover="Sumptuous">Sumptuous</a>
<a href="#" data-hover="Scintilla">Scintilla</a>
<a href="#" data-hover="Propinquity">Propinquity</a>
<a href="#" data-hover="Harbinger">Harbinger</a>
</nav>
|
Мы могли бы использовать span в некоторых случаях, поскольку мы хотим добавить perspective для каждого элемента или достигнуть другого эффекта.
|
1
2
3
4
5
6
7
|
<nav class="cl-effect-10">
<a href="#" data-hover="Seraglio"><span>Seraglio</span></a>
<a href="#" data-hover="Sumptuous"><span>Sumptuous</span></a>
<a href="#" data-hover="Scintilla"><span>Scintilla</span></a>
<a href="#" data-hover="Palimpsest"><span>Palimpsest</span></a>
<a href="#" data-hover="Assemblage"><span>Assemblage</span></a>
</nav>
|
Теперь нам необходимо добавить псевдоклассы и в них прописать свойства анимации. Примерно так:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
/* 15 эффект: scale down, reveal */
.cl-effect-15 a {
color: rgba(0,0,0,0.2);
font-weight: 700;
text-shadow: none;
}
.cl-effect-15 a::before {
color: #fff;
content: attr(data-hover);
position: absolute;
transition: transform 0.3s, opacity 0.3s;
}
.cl-effect-15 a:hover::before,
.cl-effect-15 a:focus::before {
transform: scale(0.9);
opacity: 0;
}
|
Вот какие получаются эффекты (смотрите ниже):
Скачать исходные файлы
Использование различных эффектов для изображений на вашем сайте придаст ему еще большей интерактивности и наглядности. Это можно сделать и при помощи Javascript, но лучше воспользоваться средствами старого, доброго CSS и не нагружать ваш сайт, а даже сделать его чуточку быстрее. Анимация получается впечатляющая. Давайте продолжим обзор и посмотрим какие могут быть CSS эффекты анимации для картинок.
Одно изображение плавно появляется вместо другого с прозрачностью с применением эффекта у псевдокласса :hover
|
1
2
3
4
|
<div id="cf">
<img class="bottom" src="/images/Windows%20Logo.jpg" />
<img class="top" src="/images/Turtle.jpg" />
</div>
|
CSS:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
#cf {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
#cf img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf img.top:hover {
opacity:0;
}
|
Итог:
Когда одна картинка сменяет другую с плавным эффектом при нажатии на саму эту картинку.
HTML:
|
1
2
3
4
5
|
<div id="cf2" class="shadow">
<img class="bottom" src="/images/Windows%20Logo.jpg" />
<img class="top" src="/images/Turtle.jpg" />
</div>
<p id="cf_onclick">Click me to toggle</p>
|
CSS:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
#cf2 {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
#cf2 img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf2 img.transparent {
opacity:0;
}
#cf_onclick {
cursor:pointer;
}
|
Небольшой скрипт, который будет запускать проверку нажата ли кнопка для смены изображений с эффектом.
|
1
2
3
4
5
|
$(document).ready(function() {
$("#cf_onclick").click(function() {
$("#cf2 img.top").toggleClass("transparent");
});
});
|
Данный код нужно вставлять в подвал сайта в конструкцию <script></script>
Тогда запись будет выглядеть вот так:
|
1
2
3
4
5
6
7
|
<script>
$(document).ready(function() {
$("#cf_onclick").click(function() {
$("#cf2 img.top").toggleClass("transparent");
});
});
</script>
|
Получается следующее:
Приближение одного и удаленность другого (zoom in zoom out).
HTML:
|
1
2
3
4
|
<div id="cf4" class="hover">
<img class="bottom shadow" src="http://d152j5tfobgaot.cloudfront.net/wp-content/uploads/2015/07/blooging.jpg">
<img class="top shadow" src="http://d152j5tfobgaot.cloudfront.net/wp-content/uploads/2015/08/blog1.jpg">
</div>
|
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
|
#cf4 {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
#cf4 img {
position:absolute;
left:0;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#cf4 img.top {
-webkit-transform:scale(0,0);
-moz-transform:scale(0,0);
-o-transform:scale(0,0);
transform:scale(0,0);
opacity:0;
}
#cf4:hover img.top, #cf4.hover_effect img.top {
opacity:1;
-webkit-transform:scale(1,1);
-webkit-transform-origin: top right;
-moz-transform:scale(1,1);
-moz-transform-origin: top right;
-o-transform:scale(1,1);
-o-transform-origin: top right;
transform:scale(1,1);
transform-origin: top right;
}
#cf4:hover img.bottom, #cf4.hover_effect img.bottom {
-webkit-transform:scale(0,0);
-webkit-transform-origin: bottom left;
-moz-transform:scale(0,0);
-moz-transform-origin: bottom left;
-o-transform:scale(0,0);
-o-transform-origin: bottom left;
transform:scale(0,0);
transform-origin: bottom left;
}
|
Результат:
Ротация (смена изображений с эффектом).
HTML:
|
1
2
3
4
|
<div id="cf5" class="hover">
<img class="bottom shadow" src="http://d152j5tfobgaot.cloudfront.net/wp-content/uploads/2015/07/blooging.jpg">
<img class="top shadow" src="http://d152j5tfobgaot.cloudfront.net/wp-content/uploads/2015/08/blog1.jpg">
</div>
|
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
|
#cf5 {
position:relative;
height:281px;
width:450px;
margin:10px auto;
}
#cf5 img {
position:absolute;
left:0;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#cf5 img.top {
-webkit-transform:scale(1,0);
-moz-transform:scale(1,0);
-o-transform:scale(1,0);
transform:scale(1,0);
filter: alpha(opacity=0);
opacity:0;
}
#cf5:hover img.top, #cf5.hover_effect img.top {
opacity:1;
-webkit-transform:scale(1,1);
-moz-transform:scale(1,1);
-o-transform:scale(1,1);
transform:scale(1,1);
}
#cf5:hover img.bottom, #cf5.hover_effect img.bottom {
filter: alpha(opacity=0);
-webkit-transform:rotate(360deg) scale(0,0);
-moz-transform:rotate(360deg) scale(0,0);
-o-transform:rotate(360deg) scale(0,0);
transform:rotate(360deg) scale(0,0);
}
|
Получаем вот такую красоту:
Это будет финальной частью в которой я поделюсь с вами информацией о том, как сделать стильный фон с анимацией. Все очень просто – мы продолжаем задействовать силы CSS и в примере ниже будем использовать @keyframes вместо эффекта transitions. У нас как вы уже догадались будет один блог div, в котором будет использована фоновая картинка с эффектом анимации.
HTML:
|
1
|
<div id="animate-area"></div>
|
CSS:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
#animate-area {
width: 560px;
height: 400px;
background-image: url('https://smarticle.ru/wp-content/uploads/2016/02/bg-clouds.png');
background-position: 0px 0px;
background-repeat: repeat-x;
animation: animatedBackground 40s linear infinite;
}
@keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
|
Результат:
Также вот вам еще один пример анимации фона с градиентом. По мне так очень впечатлило:
HTML:
|
1
2
3
4
5
6
7
8
|
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
</head>
<body>
<div id="gradient" />
</body>
</html>
|
CSS:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
body{
background-color: #000000;
padding: 0px;
margin: 0px;
}
#gradient
{
width: 100%;
height: 800px;
padding: 0px;
margin: 0px;
}
|
JS:
|
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
|
var colors = new Array(
[62,35,255],
[60,255,60],
[255,35,98],
[45,175,230],
[255,0,255],
[255,128,0]);
var step = 0;
//color table indices for:
// current color left
// next color left
// current color right
// next color right
var colorIndices = [0,1,2,3];
//transition speed
var gradientSpeed = 0.002;
function updateGradient()
{
if ( $===undefined ) return;
var c0_0 = colors[colorIndices[0]];
var c0_1 = colors[colorIndices[1]];
var c1_0 = colors[colorIndices[2]];
var c1_1 = colors[colorIndices[3]];
var istep = 1 - step;
var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]);
var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]);
var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]);
var color1 = "rgb("+r1+","+g1+","+b1+")";
var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]);
var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]);
var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]);
var color2 = "rgb("+r2+","+g2+","+b2+")";
$('#gradient').css({
background: "-webkit-gradient(linear, left top, right top, from("+color1+"), to("+color2+"))"}).css({
background: "-moz-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"});
step += gradientSpeed;
if ( step >= 1 )
{
step %= 1;
colorIndices[0] = colorIndices[1];
colorIndices[2] = colorIndices[3];
//pick two new target color indices
//do not pick the same as the current one
colorIndices[1] = ( colorIndices[1] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
colorIndices[3] = ( colorIndices[3] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
}
}
setInterval(updateGradient,10);
|
А теперь смотрим, что получилось:
Здесь я хочу подытожить то, что мы с вами прошли. Мы изучили и поняли как работает, на простых примерах, CSS анимация у картинок, текста, ссылок, кнопок и фона. Теперь вам остается только внедрить понравившиеся вещи на своих сайтах. Спасибо, что дочитали этот мануал до конца. Значит я старался не зря:-) Увидимся с вами совсем скоро, следите за новыми выпусками Smarticle.ru. Всем удачи, а пока…
Я подготовил для Вас обращение, с ним можете ознакомиться тут
Макс Метелев - автор, блоггер, актер местного театра, ведущий городских мероприятий. Делюсь только лучшим!
Всплывающая форма обратного звонка на сайте WordPress
Как проверить сайт на дубли страниц?
Как добавить Disqus комментарии на сайте WordPress?
11 важных правил первичной оптимизации сайтов
Nrelate — плагин внутренней перелинковки страниц сайта
Как сделать импорт CSV записей в WordPress?
24 плагина обязательных для установки на коммерческие сайты на 2016 год
Создаем красивую форму обратной связи самостоятельно
57 отличных примеров сайтов на WordPress
Как настроить рубрики wordpress с помощью Rich text tags?
Бизнес идея — сухая автомойка
18 способов где брать уникальный контент для сайта
101 полезный совет для начинающего блоггера
Как установить метрику на сайт MODx
Как правильно подключить шрифты в CSS на сайте?
Как ограничить доступ к админке wordpress?
Устанавливаем виджет яндекс пробки без информеров
Как добавить кнопку подписки на канал Youtube?
Как установить фон для сайта?
Как привлечь рекламодателей на сайт
Обучающий тренинг-центр База знаний для интернет предпринимателя. Здесь вы сможете получить полную, проверенную, а самое главное доступную информацию о Wordpress, SEO, научитесь востребованной профессии на рынке IT услуг. Все уроки бесплатные, мы не взымаем плату. Информация постоянно обновляется и пополняется свежими выпусками.
