Hover эффекты css3. Интересные эффекты анимации hover на CSS3. Двойной текст с использованием data-hover
В CSS3 предусмотрено очень много интересных эффектов. Данная статья посвящена эффектам анимации hover
В этой статье приведено 10 распространенных эффектов анимации на чистом CSS, которые украсят и освежат любой сайт. К тому же сделать их может любой новичок.
Ниже будут подробно рассмотрены следующие эффекты:
1. Крутящийся элемент
3. «Падающая» иконка
4. Выезжающая иконка
1. Крутящийся элемент
Хорошо подходит для маленьких элементов типа закрывающего крестика или стрелочки. На текстовые ссылки такое, конечно, вешать не надо.
Разметка здесь очень простая:
| 22
23
24
25
26
27
28
29
30
31
| .my-el
{
border
:
1px
solid
rebeccapurple;
cursor
:
pointer
;
background
:
rgb
(219
,
199
,
199
)
;
width
:
17px
;
height
:
17px
;
text-align
:
center
;
font-size
:
14px
;
font-family
:
Arial;
font-weight
:
bold
;
opacity:
0.6
;
z-index
:
100
;
cursor
:
pointer
;
-moz-transform:
rotate(0deg)
;
-webkit-transform:
rotate(0deg)
;
-o-transform:
rotate(0deg)
;
-ms-transform:
rotate(0deg)
;
transform:
rotate(0deg)
;
-webkit-transition:
all 600ms;
-moz-transition:
all 600ms;
-o-transition:
all 600ms;
transition:
all 600ms;
}
.my-el
:hover
{
opacity:
1
;
-moz-transform:
rotate(180deg)
;
-webkit-transform:
rotate(180deg)
;
-o-transform:
rotate(180deg)
;
-ms-transform:
rotate(180deg)
;
transform:
rotate(180deg)
)
;
}
|
Непосредственно за кручение отвечает свойство transform, все остальное — украшательства (еще в этом примере плавно меняется значение прозрачности opacity).
2. Дрожащий / дергающийся элемент (анимация Tada)
Верстка здесь такая же, как в предыдущем примере:
А в css нужно написать не только свойства этого div, но и саму анимацию:
| 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
| .my-el2
{
border
:
1px
solid
rebeccapurple;
background
:
rgb
(219
,
199
,
199
)
;
width
:
17px
;
height
:
17px
;
text-align
:
center
;
font-size
:
14px
;
font-family
:
Arial;
font-weight
:
bold
;
-webkit-animation-duration:
1s;
-moz-animation-duration:
1s;
-o-animation-duration:
1s;
animation-duration:
1s;
-webkit-animation-timing-function:
ease;
-moz-animation-timing-function:
ease;
-o-animation-timing-function:
ease;
animation-timing-function:
ease;
}
.my-el2
:hover
{
-webkit-animation-name:
Tada;
-moz-animation-name:
Tada;
-o-animation-name:
Tada;
animation-name:
Tada;
}
@-webkit-keyframes Tada {
0%
{
-webkit-transform:
scale(1
)
}
10%
,
20%
{
-webkit-transform:
scale(0.9
)
rotate(-3deg)
}
30%
,
50%
,
70%
,
90%
{
-webkit-transform:
scale(1.1
)
rotate(3deg)
}
40%
,
60%
,
80%
{
-webkit-transform:
scale(1.1
)
rotate(-3deg)
}
100%
{
-webkit-transform:
scale(1
)
rotate(0
)
}
}
@-moz-keyframes Tada {
0%
{
-moz-transform:
scale(1
)
}
10%
,
20%
{
-moz-transform:
scale(0.9
)
rotate(-3deg)
}
30%
,
50%
,
70%
,
90%
{
-moz-transform:
scale(1.1
)
rotate(3deg)
}
40%
,
60%
,
80%
{
-moz-transform:
scale(1.1
)
rotate(-3deg)
}
100%
{
-moz-transform:
scale(1
)
rotate(0
)
}
}
@-o-keyframes Tada {
0%
{
-o-transform:
scale(1
)
}
10%
,
20%
{
-o-transform:
scale(0.9
)
rotate(-3deg)
}
30%
,
50%
,
70%
,
90%
{
-o-transform:
scale(1.1
)
rotate(3deg)
}
40%
,
60%
,
80%
{
-o-transform:
scale(1.1
)
rotate(-3deg)
}
100%
{
-o-transform:
scale(1
)
rotate(0
)
}
}
@keyframes Tada {
0%
{
transform:
scale(1
)
}
10%
,
20%
{
transform:
scale(0.9
)
rotate(-3deg)
}
30%
,
50%
,
70%
,
90%
{
transform:
scale(1.1
)
rotate(3deg)
}
40%
,
60%
,
80%
{
transform:
scale(1.1
)
rotate(-3deg)
}
100%
{
transform:
scale(1
)
rotate(0
)
}
}
|
3. «Падающая» иконка
Верстка этого элемента состоит из внешнего элемента А со SPAN внутри, который содержит иконку в качестве background:
| 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
| .my-button
{
overflow
:
hidden
;
display
:
inline-block;
height
:
35px
;
line-height
:
35px
;
background
:
green
;
padding
:
0
10px
;
color
:
white
;
text-decoration
:
none
;
font-family
:
arial;
cursor
:
pointer
;
}
.icon-block
{
position
:
relative
;
background
:
url
()
top
left
no-repeat
;
width
:
15px
;
height
:
15px
;
display
:
block
;
float
:
left
;
margin
:
7px
7px
0
0
;
}
.my-button
:hover
.icon-block
{
-webkit-animation:
anim 0.6s linear 0s 1
;
-moz-animation:
anim 0.6s linear 0s 1
;
-o-animation:
anim 0.6s linear 0s 1
;
animation:
anim 0.6s linear 0s 1
;
}
@-webkit-keyframes anim {
0%
{
top
:
13px
;
opacity:
1
}
30%
{
top
:
5px
;
opacity:
1
}
60%
{
top
:
70px
;
opacity:
1
}
70%
{
top
:
70px
;
opacity:
0
}
80%
{
top
:
-50px
;
opacity:
0
}
100%
{
top
:
13px
;
opacity:
1
}
}
@-moz-keyframes anim {
0%
{
top
:
13px
;
opacity:
1
}
30%
{
top
:
5px
;
opacity:
1
}
60%
{
top
:
70px
;
opacity:
1
}
70%
{
top
:
70px
;
opacity:
0
}
80%
{
top
:
-50px
;
opacity:
0
}
100%
{
top
:
13px
;
opacity:
1
}
}
@-o-keyframes anim {
0%
{
top
:
13px
;
opacity:
1
}
30%
{
top
:
5px
;
opacity:
1
}
60%
{
top
:
70px
;
opacity:
1
}
70%
{
top
:
70px
;
opacity:
0
}
80%
{
top
:
-50px
;
opacity:
0
}
100%
{
top
:
13px
;
opacity:
1
}
}
@keyframes anim {
0%
{
top
:
13px
;
opacity:
1
}
30%
{
top
:
5px
;
opacity:
1
}
60%
{
top
:
70px
;
opacity:
1
}
70%
{
top
:
70px
;
opacity:
0
}
80%
{
top
:
-50px
;
opacity:
0
}
100%
{
top
:
13px
;
opacity:
1
}
}
|
Как видно из примера, анимация происходит вследствие изменения значения top у блока с иконкой. У внешнего блока нужно обязательно указывать overflow: hidden, так как иконка уезжает за его пределы.
4. Выезжающая иконка
Здесь тот же принцип, что и в предыдущем примере, – анимируется положение иконки внутри ссылки при наведении на нее. Только верстка немного изменена — иконка задается как background к псевдоэлементу:before.
| 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
| .btn2
{
overflow
:
hidden
;
background
:
rgb
(176
,
12
,
12
)
;
color
:
white
;
height
:
35px
;
line-height
:
35px
;
width
:
130px
;
display
:
block
;
text-align
:
center
;
font-family
:
arial;
font-size
:
16px
;
text-decoration
:
none
;
position
:
relative
;
-webkit-transition:
all 0.5s ease;
-moz-transition:
all 0.5s ease;
-ms-transition:
all 0.5s ease;
-o-transition:
all 0.5s ease;
transition:
all 0.5s ease;
}
.btn2
:before
{
content
:
""
;
background
:
url
("http://сайт/wp-content/uploads/phone.png"
)
top
left
no-repeat
;
width
:
15px
;
height
:
15px
;
display
:
inline-block;
position
:
absolute
;
top
:
6px
;
left
:
-20px
;
-webkit-transition:
all 0.3s ease;
-moz-transition:
all 0.3s ease;
-ms-transition:
all 0.3s ease;
-o-transition:
all 0.3s ease;
transition:
all 0.3s ease;
}
.btn2
:hover
:before
{
left
:
6px
;
-webkit-transition:
all 0.3s ease;
-moz-transition:
all 0.3s ease;
-ms-transition:
all 0.3s ease;
-o-transition:
all 0.3s ease;
transition:
all 0.3s ease;
}
.btn2
span {
margin-left
:
0
;
-webkit-transition:
all 0.3s ease;
-moz-transition:
all 0.3s ease;
-ms-transition:
all 0.3s ease;
-o-transition:
all 0.3s ease;
transition:
all 0.3s ease;
}
.btn2
:hover
span {
margin-left
:
10px
;
-webkit-transition:
all 0.3s ease;
-moz-transition:
all 0.3s ease;
-ms-transition:
all 0.3s ease;
-o-transition:
all 0.3s ease;
transition:
all 0.3s ease;
}
|
Внешний элемент.btn2 должен иметь position: relative, так как блок с иконкой спозиционирован абсолютно. Также есть небольшая анимация margin на span с текстом внутри.btn2 (.btn2:hover span), которая отодвигает его при появлении иконки.
5. Выезжающая иконка как на CoolWebMasters
Анимация достигается за счет изменения background-position элемента. Нужно подготовить картинку с двумя состояниями иконки:
И верстка:
| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| .btn3
{
background-image
:
url
("http://сайт/wp-content/uploads/phone-i.jpg"
)
;
background-position
:
0
0
;
width
:
40px
;
height
:
40px
;
display
:
block
;
-webkit-transition:
all 0.5s ease;
-moz-transition:
all 0.5s ease;
-ms-transition:
all 0.5s ease;
-o-transition:
all 0.5s ease;
transition:
all 0.5s ease;
}
.btn3
:hover
{
background-position
:
40px
0
;
-webkit-transition:
all 0.5s ease;
-moz-transition:
all 0.5s ease;
-ms-transition:
all 0.5s ease;
-o-transition:
all 0.5s ease;
transition:
all 0.5s ease;
}
|
6. Кнопка с бликом
Блик делается через псевдоэлемент:after, который повернут на 35 градусов.
Верстка совсем простая, достаточно присвоить ссылке класс:
| 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
| .btn4
{
background
:
green
;
display
:
inline-block;
padding
:
10px
;
position
:
relative
;
color
:
white
;
text-decoration
:
none
;
font-family
:
arial;
border-radius
:
5px
;
overflow
:
hidden
;
}
.btn4
:after
{
content
:
""
;
width
:
45px
;
height
:
95px
;
display
:
block
;
background
:
rgba(194
,
194
,
194
,
0.2
)
;
right
:
-100px
;
position
:
absolute
;
top
:
-24px
;
-webkit-transform-origin:
0
0
;
-webkit-transform:
rotate(35deg)
;
-moz-transform-origin:
0
0
;
-moz-transform:
rotate(35deg)
;
-ms-transform-origin:
0
0
;
-ms-transform:
rotate(35deg)
;
transform:
rotate(35deg)
;
-webkit-transition:
all 0.5s ease;
-moz-transition:
all 0.5s ease;
-ms-transition:
all 0.5s ease;
-o-transition:
all 0.5s ease;
transition:
all 0.5s ease;
}
.btn4
:hover
:after
{
right
:
10px
;
}
|
7. Кнопка с увеличивающимся внутренним border
Здесь внутренний border сделан через inset text-shadow, которая и анимируется.
CSS для анимации здесь такой:
| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| .btn5
{
-webkit-transition:
all 0.5s ease;
-moz-transition:
all 0.5s ease;
-ms-transition:
all 0.5s ease;
-o-transition:
all 0.5s ease;
transition:
all 0.5s ease;
}
.btn5
:hover
{
box-shadow:
inset
0
0
0
30px
#53a7ea
;
-webkit-transition:
all 0.5s ease;
-moz-transition:
all 0.5s ease;
-ms-transition:
all 0.5s ease;
-o-transition:
all 0.5s ease;
transition:
all 0.5s ease;
}
|
8. Качающаяся кнопка (анимация Swing)
Верстка здесь такая же, как в предыдущем примере, только ссылке задан класс btn6. В CSS нужно прописать стиль для:hover и саму анимацию swing.
| 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
| .btn6
:hover
{
-webkit-animation-duration:
1s;
-moz-animation-duration:
1s;
-o-animation-duration:
1s;
animation-duration:
1s;
-webkit-transform-origin:
center
center
;
-moz-transform-origin:
center
center
;
-o-transform-origin:
center
center
;
transform-origin:
center
center
;
-webkit-animation-name:
swing;
-moz-animation-name:
swing;
-o-animation-name:
swing;
animation-name:
swing;
}
@-webkit-keyframes swing {
20%
{
-webkit-transform:
rotate3d(0
,
0
,
1
,
15deg)
;
}
40%
{
-webkit-transform:
rotate3d(0
,
0
,
1
,
-10deg)
;
}
60%
{
-webkit-transform:
rotate3d(0
,
0
,
1
,
5deg)
;
}
80%
{
-webkit-transform:
rotate3d(0
,
0
,
1
,
-5deg)
;
}
100%
{
-webkit-transform:
rotate3d(0
,
0
,
1
,
0deg)
;
}
}
@-moz-keyframes swing {
20%
{
-moz-transform:
rotate3d(0
,
0
,
1
,
15deg)
;
}
40%
{
-moz-transform:
rotate3d(0
,
0
,
1
,
-10deg)
;
}
60%
{
-moz-transform:
rotate3d(0
,
0
,
1
,
5deg)
;
}
80%
{
-moz-transform:
rotate3d(0
,
0
,
1
,
-5deg)
;
}
100%
{
-moz-transform:
rotate3d(0
,
0
,
1
,
0deg)
;
}
}
@-o-keyframes swing {
20%
{
-o-transform:
rotate3d(0
,
0
,
1
,
15deg)
;
}
40%
{
-o-transform:
rotate3d(0
,
0
,
1
,
-10deg)
;
}
60%
{
-o-transform:
rotate3d(0
,
0
,
1
,
5deg)
;
}
80%
{
-o-transform:
rotate3d(0
,
0
,
1
,
-5deg)
;
}
100%
{
-o-transform:
rotate3d(0
,
0
,
1
,
0deg)
;
}
}
@keyframes swing {
20%
{
transform:
rotate3d(0
,
0
,
1
,
15deg)
;
}
40%
{
transform:
rotate3d(0
,
0
,
1
,
-10deg)
;
}
60%
{
transform:
rotate3d(0
,
0
,
1
,
5deg)
;
}
80%
{
transform:
rotate3d(0
,
0
,
1
,
-5deg)
;
}
100%
{
transform:
rotate3d(0
,
0
,
1
,
0deg)
;
}
}
|
9. Двойной текст с использованием data-hover
А вот еще один интересный эффект, который подойдет к текстовым ссылкам на цветном фоне:
В CSS анимируется псевдоэлемент before, в который и передается текст из data-hover:
| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| .btn7
:hover
:before
{
-webkit-transform:
scale(1
)
translateX(0px
)
translateY(0px
)
rotate(0deg)
;
-moz-transform:
scale(1
)
translateX(0px
)
translateY(0px
)
rotate(0deg)
;
transform:
scale(1
)
translateX(0px
)
translateY(0px
)
rotate(0deg)
;
opacity:
1
;
}
.btn7
:before
{
color
:
white
;
content
:
attr(data-hover)
;
position
:
absolute
;
opacity:
0
;
text-shadow
:
0
0
1px
rgba(255
,
255
,
255
,
0.3
)
;
-webkit-transform:
scale(1.1
)
translateX(10px
)
translateY(-10px
)
rotate(4deg)
;
-moz-transform:
scale(1.1
)
translateX(10px
)
translateY(-10px
)
rotate(4deg)
;
transform:
scale(1.1
)
translateX(10px
)
translateY(-10px
)
rotate(4deg)
;
-webkit-transition:
-webkit-transform 0.3s,
opacity 0.3s;
-moz-transition:
-moz-transform 0.3s,
opacity 0.3s;
transition:
transform 0.3s,
opacity 0.3s;
pointer-events:
none
;
}
|
10. Выезжающий текст снизу с использованием data-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
| .btn8
{
padding
:
0
30px
;
height
:
1.2em
;
overflow
:
hidden
;
font-size
:
20px
;
display
:
inline-block;
position
:
relative
;
text-decoration
:
none
;
color
:
white
;
font-family
:
arial;
}
.btn8
span {
position
:
relative
;
padding
:
0
5px
;
display
:
inline-block;
-webkit-transition:
-webkit-transform 0.3s;
-moz-transition:
-moz-transform 0.3s;
transition:
transform 0.3s;
}
.btn8
span:before
{
position
:
absolute
;
width
:
100%
;
color
:
rgb
(8
,
120
,
213
)
;
left
:
0
;
top
:
100%
;
content
:
attr(data-hover)
;
font-weight
:
700
;
-webkit-transform:
translate3d(0
,
0
,
0
)
;
-moz-transform:
translate3d(0
,
0
,
0
)
;
transform:
translate3d(0
,
0
,
0
)
;
}
.btn8
:hover
span {
-webkit-transform:
translateY(-100%
)
;
-moz-transform:
translateY(-100%
)
;
transform:
translateY(-100%
)
;
}
|
Предупреждение: эффекты работают только в современных браузерах, поддерживающих возможности CSS3.
Подготовка к работе.
Итак, для того, чтобы создавать наши эффекты нам понадобится вот такая простая дефолтная html-структура
:
Title is Here
View More
Для большей части эффектов она останется неизменна, но кое-где нам придется внести ряд изменений. У нас есть div-контейнер с классом.effect, внутри которого помещаем картинку и контейнер с классом.caption, содержащий заголовок, описание и, как в данном случае, кнопку “View More”. Разумеется, структуру менять можно, главное, тогда сделать соответствующие изменения и для CSS-кода.Дефолтные css-стили
для нашей структуры (опять же, в зависимости от того, какой мы будем рассматривать эффект, они будут различаться):
Effect {
position: relative;
width: 300px;
height: 200px;
overflow: hidden;
}
.effect img {
width: 100%;
height: 100%;
}
.effect .caption {
position: absolute;
top: 0px;
left: 0px;
background: rgba(0,0,0,0.7);
width: 100%;
height: 100%;
color: #fff;
}
.effect .caption h4 {
font-size: 21px;
font-weight: 700;
text-transform: uppercase;
text-align: center;
border-bottom: 1px solid white;
padding-bottom: 20px;
margin-top: 20px;
}
.effect .caption p {
margin: 15px 0px;
text-align: center;
font-style: italic;
padding: 0px 10px;
}
.effect .caption a.btn {
width: 120px;
text-align: center;
display: block;
background: #68432d;
color: #fff;
padding: 10px 0px;
border-radius: 5px;
margin: 0px auto 0px auto;
}
Основы свойства transition. Эффекты #1.1-1.3
Эффект #1.1
заключается в том, что, при наведении мыши на изображение, сверху “выезжает” контейнер.caption с информацией.
Чтобы этого добиться, нужно, в первую очередь, переместить этот контейнер выше, за пределы контейнера с эффектом. Для этого мы изменим ему свойство top, и стили для блока теперь будут выглядеть так:
Effect .caption {
position: absolute;
top: -100%;
left: 0px;
background: rgba(0,0,0,0.7);
width: 100%;
height: 100%;
color: #fff;
}
Следующим шагом будет добавление к.caption свойства transition. transition показывает, какое именно свойство будет изменяться, насколько быстро, с какой задержкой.
Рассмотрим его поподробнее. Вот так должно будет выглядеть свойство transition для эффекта #1.1:
transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;
Первое значение устанавливает имя стилевого свойства, которое будет отслеживаться для изменения. В данном случае мы выставили all - отслеживаться будут все свойства. Второе - отвечает за время, необходимое для анимации. Третье - за то, как в течение времени, заданного вторым свойством, будет распределяться скорость перехода: где замедлится, где ускорится. Так, например, в данном случае сначала анимация будет быстрее, к середине замедлится и ближе к концу выйдет на равномерную скорость. Четвертое значение определяет, начнется анимация с задержкой или нет. Если значение равно 0s - задержки нет.
Кроме того, для этого свойства нам надо будет добавить вендорные префиксы. необходимые для корректного отображения анимации в браузерах. Как это выглядит:
Webkit-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; - для Chrome и Safari
-o-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; - для Opera
-ms-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; - для IE
-moz-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; - для Firefox
Добавим и их:
Effect .caption {
position: absolute;
top: -100%;
left: 0px;
background: rgba(0,0,0,0.7);
width: 100%;
height: 100%;
color: #fff;
-webkit-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;
-o-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;
-ms-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;
-moz-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;
transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;
}
В статье, для краткости, я буду опускать префиксы, но не забывайте добавлять их для таких свойств, как transition, transform и transform-origin. В коде примеров под кнопкой CSS (или в самих файлах) префиксы тоже есть.
Effect:hover .caption {
top: 0px;
}
Эффект #1.2
строится аналогично, только.caption “выезжает” справа налево. Для этого мы вносим незначительные изменения в стили.caption:
Effect .caption {
position: absolute;
top: 0px;
left: 100%;
background: rgba(0,0,0,0.7);
width: 100%;
height: 100%;
color: #fff;
-webkit-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;
-o-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;
-ms-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;
-moz-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;
transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;
}
.effect:hover .caption {
left: 0px;
}
А вот в эффекте #1.3
внесены небольшие усложнения. Так.caption движется, как в эффекте #1.1 сверху вниз, но одновременно ему навстречу снизу вверх выдвигается еще один блок.
Чтобы добиться такого эффекта, внесем изменения в html-структуру. Нам необходимо создать пустой div-контейнер с классом.overlay для блока, выезжающего снизу вверх:
Title is Here
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.
View More
Внесем изменения в стили для.caption. Изменим его положение для выдвижения сверху вниз, уменьшим прозрачность вдвое, чтобы сохранить итоговое значение прозрачности фона (в конечном итоге, у нас будут накладываться друг на друга два блока), добавим z-index, чтобы показать, какой из двух блоков будет “выше” при наложении:
Effect .caption {
position: absolute;
top: -100%;
left: 0px;
background: rgba(0,0,0,0.35);
width: 100%;
height: 100%;
color: #fff;
transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;
z-index: 10;
}
Добавим стили для.overlay.
Effect .overlay {
position: absolute;
top: 100%;
left: 0px;
background: rgba(0,0,0,0.35);
width: 100%;
height: 100%;
transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;
z-index: 5;
}
Осталось только определить конечную точку трансформаций: .caption опускается до top: 0px, а.overlay, наоборот, поднимается до этого же значения:
.effect:hover .caption,
.effect:hover .overlay {
top: 0px;
}
Изменяем прозрачность. Добавляем движение отдельных элементов. Эффекты #2.1-#2.3
В эффекте #2.1
элементы выдвигаются из центра к краям. Воспользуемся базовой html-структурой, в которую, для создания этого эффекта, не понадобится вносить никаких изменений.
А вот в css-стили изменения внести понадобится. В первую очередь, необходимо сместить заголовок и кнопку в центр.caption, чтобы задать начальную точку для последующего перехода. Кроме того, необходимо добавить этим элементам свойство transition, поскольку сейчас именно они являются объектами анимирования:
Effect .caption h4 {
font-size: 21px;
font-weight: 700;
text-transform: uppercase;
text-align: center;
border-bottom: 1px solid white;
padding-bottom: 20px;
margin-top: 20px;
position: relative;
top: 62px;
transition: all 0.3s linear 0s;
}
.effect .caption a.btn {
width: 120px;
text-align: center;
display: block;
background: #68432d;
color: #fff;
padding: 10px 0px;
border-radius: 5px;
margin: 0px auto 0px auto;
position: relative;
top: -58px;
transition: all 0.3s linear 0s;
}
Теперь, если мы зададим конечную точку анимации:
Effect:hover h4,
.effect:hover a.btn {
top: 0px;
}
Мы получим не самый красивый результат. Полупрозрачная подложка никуда не делась, элементы кучкуются в центре и неэстетично оттуда разъезжаются. Поскольку, с помощью transition, можно изменять не только положение элемента, но и, например, его прозрачность, благодаря ей мы сможем скрыть и подложку, и элементы в центре до момента, пока не понадобится их подвинуть.
Добавляем прозрачность и transition к.caption:
.effect .caption {
position: absolute;
top: 0px;
left: 0px;
background: rgba(0,0,0,0.7);
width: 100%;
height: 100%;
color: #fff;
opacity: 0;
transition: all 0.5s linear 0s;
}
Таким образом, сейчас.caption мы спрятали, и чуть позже настроим так, чтобы он появлялся только при наведении мыши. Необходимо добавить прозрачность и для всех элементов внутри.caption, и код для них будет выглядеть так:
.effect .caption h4 {
font-size: 21px;
font-weight: 700;
text-transform: uppercase;
text-align: center;
border-bottom: 1px solid white;
padding-bottom: 20px;
margin-top: 20px;
position: relative;
top: 62px;
opacity: 0;
transition: all 0.3s linear 0s;
}
.effect .caption a.btn {
width: 120px;
text-align: center;
display: block;
background: #68432d;
color: #fff;
padding: 10px 0px;
border-radius: 5px;
margin: 0px auto 0px auto;
position: relative;
top: -58px;
opacity: 0;
transition: all 0.3s linear 0s;
}
.effect .caption p {
margin: 15px 0px;
text-align: center;
font-style: italic;
padding: 0px 10px;
opacity: 0;
transition: all 0.3s linear 0s;
}
Теперь на hover будет происходить следующее: прозрачность.caption и элементов внутри нее сменится с opacity: 0 на opacity: 1, одновременно с чем начнет меняться местоположение заголовка и кнопки:
Effect:hover h4,
.effect:hover a.btn {
top: 0px;
opacity: 1;
}
.effect:hover .caption,
.effect:hover p {
opacity: 1;
}
Эффекты #2.2 и #2.3 построены аналогичным образом, только для эффекта #2.2 заголовок и кнопку мы смещаем сверху вниз и снизу вверх соответственно, а для эффекта #2.3 справа налево и слева направо соответственно.
Изменения, которые необходимо внести в код эффекта #2.1, чтобы получить эффект #2.2
:
Effect .caption h4 {
font-size: 21px;
font-weight: 700;
text-transform: uppercase;
text-align: center;
border-bottom: 1px solid white;
padding-bottom: 20px;
margin-top: 20px;
position: relative;
top: -66px;
opacity: 0;
transition: all 0.3s linear 0s;
}
.effect .caption a.btn {
width: 120px;
text-align: center;
display: block;
background: #68432d;
color: #fff;
padding: 10px 0px;
border-radius: 5px;
margin: 0px auto 0px auto;
position: relative;
top: 66px;
opacity: 0;
transition: all 0.3s linear 0s;
}
В остальном, все остается аналогичным.
Ну а чтобы из эффекта #2.1 получить эффект #2.3
, изменим следующее:
font-size: 21px;
font-weight: 700;
text-transform: uppercase;
text-align: center;
border-bottom: 1px solid white;
padding-bottom: 20px;
margin-top: 20px;
position: relative;
left: 300px;
opacity: 0;
transition: all 0.3s linear 0s;
}
.effect .caption a.btn {
width: 120px;
text-align: center;
display: block;
background: #68432d;
color: #fff;
padding: 10px 0px;
border-radius: 5px;
margin: 0px auto 0px auto;
position: relative;
left: -300px;
opacity: 0;
transition: all 0.3s linear 0s;
}
.effect:hover h4,
.eff-2-3:hover a.btn {
left: 0px;
opacity: 1;
}
Поговорим о transform и об увеличении/уменьшении элементов. Эффекты #3.1-#3.3
Эффект #3.1
строится на том, что, при наведении, появляются очень увеличенные элементы
,
И , постепенно уменьшающиеся до нормальных размеров.
Html-структуру оставляем базовой. Что касается изменений в таблице стилей, уменьшающимся элементам мы должны добавить свойство transform. Transform позволяет трансформировать элементы: вращать, менять им размеры, наклонять, перемещать, комбинировать несколько свойств для создания более сложных эффектов. Для этих эффектов мы разберем уменьшение/увеличение элементов.
Необходимое для такой трансформации значение свойства transform - scale(x,y), где значение x - изменение размеров объекта по горизонтали, а y - по вертикали соответственно. Если мы применим это свойство для
,
И , то получим вот что:
Effect .caption h4 {
font-size: 21px;
font-weight: 700;
text-transform: uppercase;
text-align: center;
border-bottom: 1px solid white;
padding-bottom: 20px;
margin-top: 20px;
transform: scale(2);
transition: all 0.3s linear 0s;
}
Как видите, у значения scale в данном случае не два параметра, а один, и это означает, что и по горизонтали, и по вертикали наш элемент увеличен в два раза.
Effect .caption p {
margin: 15px 0px;
text-align: center;
font-style: italic;
padding: 0px 10px;
transform: scale(2);
transition: all 0.3s linear 0s;
}
.effect .caption a.btn {
width: 120px;
text-align: center;
display: block;
background: #68432d;
color: #fff;
padding: 10px 0px;
border-radius: 5px;
margin: 0px auto 0px auto;
transform: scale(2);
transition: all 0.3s linear 0s;
}
Теперь на hover наша задача уменьшить эти элементы до их нормального размера, что мы и делаем, добавляя эти стили:
Effect:hover .caption h4,
.effect:hover .caption p,
.effect:hover .caption a.btn {
transform: scale(1);
}
Что касается.caption, как и в разборе эффектов #2.1-#2.3, мы выставляем ему opacity: 0 и очень маленькое время transition, чтобы появление подложки не отвлекало зрителя от основной анимации:
Effect .caption {
position: absolute;
top: 0;
left: 0px;
background: rgba(0,0,0,0.7);
width: 100%;
height: 100%;
color: #fff;
opacity: 0;
transition: all 0.2s linear 0s;
}
.effect:hover .caption {
opacity: 1;
}
Эффект #3.2
строится аналогично предыдущему, с тем лишь исключением, что элементы не уменьшаются, а увеличиваются при наведении мыши. Выставим для них такое значение scale: 0.25, все прочие стили остаются аналогичны.
А вот эффект #3.3
- это комбинация из перемещения элементов и изменения их размеров. Как видим, элемент
Остается на своем месте и размеры не меняет, для него стили остаются стандартные. Что касается
Чтобы добиться такого вида для.overlay, мы дадим ему постепенно увеличивающуюся box-shadow:
Effect .overlay {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
transition: all 0.3s linear 0.3s;
}
.effect:hover .overlay {
box-shadow: inset 0px 0px 25px 100px rgba(0,0,0,0.7);
}
Изначальное положение для.caption будет: разворот на 180 градусов и opacity: 0. На hover разворачиваем.caption, который, в процессе поворота, становится непрозрачным:
Effect .caption {
position: absolute;
top: 0px;
left: 0px;
background: transparent;
width: 100%;
height: 100%;
color: #fff;
opacity: 0;
transform: rotate(180deg);
transition: all 0.3s linear 0s;
}
.effect:hover .caption {
opacity: 1;
transform: rotate(0deg);
transition-delay: 0.5s;
}
Все остальные стили - дефолтные.
Эффект #10.1
состоит из пяти меняющих размер “лесенкой” элементов.overlay и, словно выныривающего, .caption.
Html-структура нужна такая:
Title is Here
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.
View More
Сначала построим “лесенку”. Каждый.overlay отличается от другого своим местоположением и значением параметра delay:
Effect .overlay {
background: rgba(0,0,0,0.7);
width: 20%;
height: 100%;
position: absolute;
top: 100%;
}
.effect .overlay-1 {
left: 0;
transition: all 0.15s linear 0.2s;
}
.effect .overlay-2 {
left: 20%;
transition: all 0.15s linear 0.25s;
}
.effect .overlay-3 {
left: 40%;
transition: all 0.15s linear 0.3s;
}
.effect .overlay-4 {
left: 60%;
transition: all 0.15s linear 0.35s;
}
.effect .overlay-5 {
left: 80%;
transition: all 0.15s linear 0.4s;
}
На hover их delay тоже будут различаться:
Effect:hover .overlay {
top: 0px;
}
.effect:hover .overlay-1 {
transition-delay: 0s;
}
.effect:hover .overlay-2 {
transition-delay: 0.1s;
}
.effect:hover .overlay-3 {
transition-delay: 0.15s;
}
.effect:hover .overlay-4 {
transition-delay: 0.2s;
}
.effect:hover .overlay-5 {
transition-delay: 0.25s;
}
Самое интересное и сложное здесь - .caption. Вот базовые стили для него:
Effect .caption {
position: absolute;
top: 0px;
left: 0px;
background: transparent;
width: 100%;
height: 100%;
color: #fff;
transition: all 0.3s linear 0s;
}
Теперь нам нужно задать ему положение до начала анимации. Во-первых, развернуть, ведь, когда мы наводим мышь, мы видим, как.caption проворачивается на некоторый угол. Зададим и transform-origin, определяющий точку, вокруг которой будет проходить трансформация. Добавим transform: rotate(-50deg);
и transform-origin: 0% 100%;
. Следующим шагом будет смещение по вертикали и по горизонтали, чтобы чуть позже обеспечить “выныривание”. Смещать будем с помощью transform: translate(x,y), который сдвигает элемент по оси X и Y соответственно. Наша задача - сдвинуть.caption почти в самый угол по горизонтали и примерно на две трети за пределы контейнера.effects по вертикали:
Effect .caption {
position: absolute;
top: 0px;
left: 0px;
background: transparent;
width: 100%;
height: 100%;
color: #fff;
transform: rotate(-50deg) translate(-101px,291px);
transform-origin: 0% 100%;
transition: all 0.3s linear 0s;
}
Теперь нам нужно совсем скрыть.caption до тех пор, пока на контейнер с эффектом не наведут мышь. В этот раз мы спрячем с помощью height: 0px;
и overflow: hidden;
. Конечные стили такие:
Effect .caption {
position: absolute;
top: 0px;
left: 0px;
background: transparent;
width: 100%;
height: 0px;
overflow: hidden;
color: #fff;
transform: rotate(-50deg) translate(-101px,291px);
transform-origin: 0% 100%;
transition: all 0.3s linear 0s;
}
Теперь, чтобы проявить.caption на hover, восстановим его высоту, повернем до rotate(0deg) и вернем на место по горизонтали и вертикали:
Effect:hover .caption {
height: 100%;
transform: rotate(0deg) translate(0px,0px);
transition-delay: 0.3s;
}
Стили для
,
И остаются дефолтными.
Эффект #10.2
строится на двух.overlay, выезжающих из верхнего левого и правого нижнего угла соответственно, а также на “выпадании” сверху элементов
,
Html-структура нужна такая:
Title is Here
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.
View More
Начнем с левого верхнего.overlay, раскрывающегося полупрозрачной подложкой:
Effect .overlay-1 {
position: absolute;
top: 0px;
left: 0px;
background: rgba(0,0,0,0.7);
width: 0px;
height: 0px;
overflow: hidden;
transition: all 0.3s linear 0.3s;
}
.effect:hover .overlay-1 {
width: 100%;
height: 100%;
transition-delay: 0s;
}
Интереснее с нижним правым. Поскольку ширина border равна 4px, просто задать ширине и высоте по 100% недостаточно, нужно компенсировать по 8px по вертикали и по горизонтали, чем нам и поможет calc:
Effect .overlay-2 {
position: absolute;
bottom: 0px;
right: 0px;
background: transparent;
border: 4px double #fff;
width: 0px;
height: 0px;
opacity: 0;
transition: all 0.3s linear 0.3s;
}
.effect:hover .overlay-2 {
width: 100%;
max-width: calc(100% - 8px);
height: 100%;
max-height: calc(100% - 8px);
opacity: 1;
transition-delay: 0s;
}
Теперь перейдем к.caption и его содержимому. Для.caption стили остаются дефолтными, изменятся они для перемещаемых элементов
,
И , каждый из которых необходимо сместить наверх. Чтобы заголовок не налезал на border подчеркиванием, рассчитаем ему ширину, как и.overlay-2:
Effect .caption h4 {
font-size: 21px;
font-weight: 700;
text-transform: uppercase;
text-align: center;
border-bottom: 1px solid white;
padding-bottom: 20px;
margin: 20px auto 0px auto;
width: calc(100% - 8px);
position: relative;
top: -100%;
transition: all 0.3s linear 0.2s;
}
.effect .caption p {
margin: 15px 0px;
text-align: center;
font-style: italic;
padding: 0px 10px;
position: relative;
top: -100%;
transition: all 0.3s linear 0.1s;
}
.effect .caption a.btn {
width: 120px;
text-align: center;
display: block;
background: #68432d;
color: #fff;
padding: 10px 0px;
border-radius: 5px;
margin: 0px auto 0px auto;
position: relative;
top: -100%;;
transition: all 0.3s linear 0s;
}
Осталось лишь, чтоб элементы опускались на hover, причем в установленном нами порядке:
Effect:hover .caption a.btn,
.effect:hover .caption p,
.effect:hover .caption h4 {
top: 0px;
}
.effect:hover .caption a.btn {
transition-delay: 0.3s;
}
.effect:hover .caption p {
transition-delay: 0.4s;
}
.effect:hover .caption h4 {
transition-delay: 0.5s;
}
Эффект #10.3
состоит из увеличивающейся картинки и изменения угла поворота.caption на hover.
Html-структура нужна дефолтная, равно как и стили для
,
И . А начнем мы с увеличения картинки:
Effect img {
width: 100%;
height: 100%;
transition: all 0.25s linear 0.3s;
transform: scale(1);
}
.effect:hover img {
transform: scale(1.3);
transition-delay: 0s;
}
Ну а что касается.caption - задача в том, чтобы, развернув его на 30 градусов, совместить его правый нижний угол с правым нижним углом картинки и заставить исчезнуть с помощью понижения прозрачности. А его transition, состоит из двух частей:
- opacity должен измениться сразу же, как только наводим мышь, за очень короткое время. opacity 0.1s linear 0s
- для transform необходима задержка на величину времени, необходимого для п.1, и transition-timing-function, создающий иллюзию небольшого замаха: transform 0.35s cubic-bezier(0.49, -0.19, 0.7, -0.01) 0.1s
Effect .caption {
position: absolute;
top: 0px;
left: 0px;
background: rgba(0,0,0,0.7);
width: 100%;
height: 100%;
color: #fff;
opacity: 0;
transform: rotate(30deg) translate(30px,-89px);
transition: transform 0.35s cubic-bezier(0.49, -0.19, 0.7, -0.01) 0.1s, opacity 0.1s linear 0s;
}
.effect:hover .caption {
transform: rotate(0deg) translate(0px,0px);
opacity: 1;
transition-delay: 0.3s;
}
Надеюсь, эта статья оказалась для вас полезной и интересной!
Теги:
Добавить метки
Структура разметки весьма проста и интуитивна. Создаем контейнер, который будет содержать изображение и всю остальную информацию.
Внутри элемента view
содержится элемент с классом mask
, который реализует наш эффект с использованием CSS3. В элементе с классом mask
содержится заголовок, описание и ссылка (Для некоторых примеров элемент с классом mask
используется отдельно, а содержание помещается в контейнер с классом content
).
Заголовок
Текст сообщения
Кнопка
CSS
После создания разметки зададим стили. Для нашего набора эффектов будет использоваться класс с общими правилами, а специфические свойства будут добавляться для каждого примера в виде отдельных классов. В тексте урока префиксы производителей браузеров будут опущены для большей наглядности.
View {
width: 300px;
height: 200px;
margin: 10px;
float: left;
border: 10px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff url(../images/bgimg.jpg) no-repeat center center
}
.view .mask, .view .content {
width: 300px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0
}
.view img {
display: block;
position: relative
}
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0
}
.view p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
box-shadow: 0 0 1px #000
}
.view a.info:hover {
box-shadow: 0 0 5px #000
}
А теперь представим 10 эффектов. Открывайте демонстрационную страницу в отдельном окне или вкладке, смотрите и изучайте код.
Пример 1
Добавляем специальный класс view-first
к элементу с классом view
для данного эффекта. Специальный класс будет добавляться в каждом примере к элементу с классом view (view-first, view-second, view-third, и так далее).
В данном примере будут использоваться базовые переходы для создания отличного эффекта.
View-first img {
transition: all 0.2s linear;
}
.view-first .mask {
opacity: 0;
background-color: rgba(219,127,8, 0.7);
transition: all 0.4s ease-in-out;
}
.view-first h2 {
transform: translateY(-100px);
opacity: 0;
transition: all 0.2s ease-in-out;
}
.view-first p {
transform: translateY(100px);
opacity: 0;
transition: all 0.2s linear;
}
.view-first a.info{
opacity: 0;
transition: all 0.2s ease-in-out;
}
А теперь перейдем к основе нашего эффекта. Когда курсор мыши проходит над изображением мы используем задержку для имитации простой анимации. Свойство transition-delay
, которое используется в псевдо-классах hover
, может вносить изменения для отличия от обычного класса. В данном примере мы не используем задержки в обычном классе, но в псевдо-классах hover
запуск переходов немного задерживается. Когда курсор мыши покидает объект, будет использоваться значение по умолчанию 0s, и "восстановление" произойдет быстро.
View-first:hover img {
transform: scale(1.1);
}
.view-first:hover .mask {
opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
opacity: 1;
transform: translateY(0px);
}
.view-first:hover p {
transition-delay: 0.1s;
}
.view-first:hover a.info {
transition-delay: 0.2s;
}
Пример 2
Во втором примере мы добавляем специальный класс view-second
, но элемент с классом mask
будет пустым, а содержание будет помещено в элемент с классом content
.
Здесь класс mask
имеет другие атрибуты для построения эффекта. Мы собираемся использовать свойства трансформации (translate
и rotate
):
View-second img {
transition: all 0.2s ease-in;
}
.view-second .mask {
background-color: rgba(115,146,184, 0.7);
width: 300px;
padding: 60px;
height: 300px;
opacity: 0;
transform: translate(265px, 145px) rotate(45deg);
transition: all 0.2s ease-in-out;
}
.view-second h2 {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
background: transparent;
margin: 20px 40px 0px 40px;
transform: translate(200px, -200px);
transition: all 0.2s ease-in-out;
}
.view-second p {
transform: translate(-200px, 200px);
transition: all 0.2s ease-in-out;
}
.view-second a.info {
transform: translate(0px, 100px);
transition: all 0.2s 0.1s ease-in-out;
}
Для нашего эффекта будет использоваться трансформация translate
для перемещения элементов на место. А маска будет также вращаться. Элементы описания будут появляться с небольшой задержкой друг за другом.
View-second:hover .mask {
opacity:1;
transform: translate(-80px, -125px) rotate(45deg);
}
.view-second:hover h2 {
transform: translate(0px,0px);
transition-delay: 0.3s;
}
.view-second:hover p {
transform: translate(0px,0px);
transition-delay: 0.4s;
}
.view-second:hover a.info {
transform: translate(0px,0px);
transition-delay: 0.5s;
}
Пример 3
В третьем примере мы будем использовать трансформации translate
и rotate
для вывода наших элементов описания:
View-third img {
transition: all 0.2s ease-in;
}
.view-third .mask {
background-color: rgba(0,0,0,0.6);
opacity: 0;
transform: translate(460px, -100px) rotate(180deg);
transition: all 0.2s 0.4s ease-in-out;
}
.view-third h2{
transform: translateY(-100px);
transition: all 0.2s ease-in-out;
}
.view-third p {
transform: translateX(300px) rotate(90deg);
transition: all 0.2s ease-in-out;
}
.view-third a.info {
transform: translateY(-200px);
transition: all 0.2s ease-in-out;
}
Достаточно простые инструкции для получения эффекта.
View-third:hover .mask {
opacity:1;
transition-delay: 0s;
transform: translate(0px, 0px);
}
.view-third:hover h2 {
transform: translateY(0px);
transition-delay: 0.5s;
}
.view-third:hover p {
transform: translateX(0px) rotate(0deg);
transition-delay: 0.4s;
}
.view-third:hover a.info {
transform: translateY(0px);
transition-delay: 0.3s;
}
Пример 4
В четвертом примере будет использоваться простое масштабирование изображения и содержания с использованием трансформации scale
. Для изображения будет установлена задержка 0.2s в стилях, но при наведении курсора задержка будет 0s. Поэтому при наведении курсора мыши эффект проявится немедленно, а при убирании курсора мыши будет задержка.
View-fourth img {
transition: all 0.4s ease-in-out 0.2s;
opacity: 1;
}
.view-fourth .mask {
background-color: rgba(0,0,0,0.8);
opacity: 0;
transform: scale(0) rotate(-180deg);
transition: all 0.4s ease-in;
border-radius: 0px;
}
.view-fourth h2{
opacity: 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
background: transparent;
margin: 20px 40px 0px 40px;
transition: all 0.5s ease-in-out;
}
.view-fourth p {
opacity: 0;
transition: all 0.5s ease-in-out;
}
.view-fourth a.info {
opacity: 0;
transition: all 0.5s ease-in-out;
}
Простые инструкции для получения эффекта. CSS3 может все.
View-fourth:hover .mask {
opacity: 1;
transform: scale(1) rotate(0deg);
transition-delay: 0.2s;
}
.view-fourth:hover img {
transform: scale(0);
opacity: 0;
transition-delay: 0s;
}
.view-fourth:hover h2,
.view-fourth:hover p,
.view-fourth:hover a.info{
opacity: 1;
transition-delay: 0.5s;
}
Пример 5
В пятом примере содержание будет выскальзывать слева благодаря использованию свойства translate
в сочетании с функцией перехода ease-in-out
.
View-fifth img {
transition: all 0.3s ease-in-out;
}
.view-fifth .mask {
background-color: rgba(146,96,91,0.3);
transform: translateX(-300px);
opacity: 1;
transition: all 0.4s ease-in-out;
}
.view-fifth h2{
background: rgba(255, 255, 255, 0.5);
color: #000;
box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
}
.view-fifth p{
opacity: 0;
color: #333;
transition: all 0.2s linear;
}
При наведении курсора мыши изображение выскальзывает вправо, и на его место слева выдвигается описание, как бы сдвигая картинку:
View-fifth:hover .mask {
transform: translateX(0px);
}
.view-fifth:hover img {
transform: translateX(300px);
transition-delay: 0.1s;
}
.view-fifth:hover p{
opacity: 1;
transition-delay: 0.4s;
}
Пример 6
В данном примере мы содержание будет "падать" с переднего плана, уменьшая масштаб от 10 до 1 (нормального размера). А кнопка будет выскальзывать снизу.
View-sixth img {
transition: all 0.4s ease-in-out 0.5s;
}
.view-sixth .mask{
background-color: rgba(146,96,91,0.5);
opacity:0;
transition: all 0.3s ease-in 0.4s;
}
.view-sixth h2{
opacity:0;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
background: transparent;
margin: 20px 40px 0px 40px;
transform: scale(10);
transition: all 0.3s ease-in-out 0.1s;
}
.view-sixth p {
opacity:0;
transform: scale(10);
transition: all 0.3s ease-in-out 0.2s;
}
.view-sixth a.info {
opacity:0;
transform: translateY(100px);
transition: all 0.3s ease-in-out 0.1s;
}
Обратная трансформация также выполняется плавно:
View-sixth:hover .mask {
opacity:1;
transition-delay: 0s;
}
.view-sixth:hover img {
transition-delay: 0s;
}
.view-sixth:hover h2 {
opacity: 1;
transform: scale(1);
transition-delay: 0.1s;
}
.view-sixth:hover p {
opacity:1;
transform: scale(1);
transition-delay: 0.2s;
}
.view-sixth:hover a.info {
opacity:1;
transform: translateY(0px);
transition-delay: 0.3s;
}
Пример 7
В седьмом эффекте идея заключается в использовании вращения изображения вокруг центра и одновременного уменьшения его масштаба. А описание затем опускается сверху.
View-seventh img{
transition: all 0.5s ease-out;
opacity: 1;
}
.view-seventh .mask {
background-color: rgba(77,44,35,0.5);
transform: rotate(0deg) scale(1);
opacity: 0;
transition: all 0.3s ease-out;
transform: translateY(-200px) rotate(180deg);
}
.view-seventh h2{
transform: translateY(-200px);
transition: all 0.2s ease-in-out;
}
.view-seventh p {
transform: translateY(-200px);
transition: all 0.2s ease-in-out;
}
.view-seventh a.info {
transform: translateY(-200px);
transition: all 0.2s ease-in-out;
}
При наведении курсора мыши элементы описания появляются с задержкой:
View-seventh:hover img{
transform: rotate(720deg) scale(0);
opacity: 0;
}
.view-seventh:hover .mask {
opacity: 1;
transform: translateY(0px) rotate(0deg);
transition-delay: 0.4s;
}
.view-seventh:hover h2 {
transform: translateY(0px);
transition-delay: 0.7s;
}
.view-seventh:hover p {
transform: translateY(0px);
transition-delay: 0.6s;
}
.view-seventh:hover a.info {
transform: translateY(0px);
transition-delay: 0.5s;
}
Пример 8
В данном примере создается эффект отскока при опускании элементов описания сверху.
View-eighth .mask {
background-color: rgba(255, 255, 255, 0.7);
top: -200px;
opacity: 0;
transition: all 0.3s ease-out 0.5s;
}
.view-eighth h2{
transform: translateY(-200px);
transition: all 0.2s ease-in-out 0.1s;
}
.view-eighth p {
color: #333;
transform: translateY(-200px);
transition: all 0.2s ease-in-out 0.2s;
}
.view-eighth a.info {
transform: translateY(-200px);
transition: all 0.2s ease-in-out 0.3s;
}
Мы добавляем анимацию к элементу mask
и определяем задержи для элеменетов описания:
View-eighth:hover .mask {
opacity: 1;
top: 0px;
transition-delay: 0s;
animation: bounceY 0.9s linear;
}
.view-eighth:hover h2 {
transform: translateY(0px);
transition-delay: 0.4s;
}
.view-eighth:hover p {
transform: translateY(0px);
transition-delay: 0.2s;
}
.view-eighth:hover a.info {
transform: translateY(0px);
transition-delay: 0s;
}
Для создания эффекта отскока используется функция translateY
и несколько фреймов:
@keyframes bounceY {
0% { transform: translateY(-205px);}
40% { transform: translateY(-100px);}
65% { transform: translateY(-52px);}
82% { transform: translateY(-25px);}
92% { transform: translateY(-12px);}
55%, 75%, 87%, 97%, 100% { transform: translateY(0px);}
}
Пример 9
В данном примере мы используем два элемента маски для создания эффекта закрывающихся штор:
Стиль #9
Описаниеt
Кнопка
Две маски имеют различные параметры для трансформаций. Также они выравнены по-разному.
View-ninth .mask-1,
.view-ninth .mask-2{
background-color: rgba(0,0,0,0.5);
height: 361px;
width: 361px;
background: rgba(119,0,36,0.5);
opacity: 1;
transition: all 0.3s ease-in-out 0.6s;
}
.view-ninth .mask-1 {
left: auto;
right: 0px;
transform: rotate(56.5deg) translateX(-180px);
transform-origin: 100% 0%;
}
.view-ninth .mask-2 {
top: auto;
bottom: 0px;
transform: rotate(56.5deg) translateX(180px);
transform-origin: 0% 100%;
}
View-ninth .content{
background: rgba(0,0,0,0.9);
height: 0px;
opacity: 0.5;
width: 361px;
overflow: hidden;
transform: rotate(-33.5deg) translate(-112px,166px);
transform-origin: 0% 100%;
transition: all 0.4s ease-in-out 0.3s;
}
.view-ninth h2{
background: transparent;
margin-top: 5px;
border-bottom: 1px solid rgba(255,255,255,0.2);
}
.view-ninth a.info{
display: none;
}
При наведении курсора мыши появляется содержание из границы соприкосновения масок:
View-ninth:hover .content{
height: 120px;
width: 300px;
opacity: 0.9;
top: 40px;
transform: rotate(0deg) translate(0px,0px);
}
.view-ninth:hover .mask-1,
.view-ninth:hover .mask-2{
transition-delay: 0s;
}
.view-ninth:hover .mask-1{
transform: rotate(56.5deg) translateX(1px);
}
.view-ninth:hover .mask-2 {
transform: rotate(56.5deg) translateX(-1px);
}
Для масок используется свойство transition-delay
, поэтому при наведении курсора мыши трансформации начинаются немедленно. Но обратная трансформация осуществляется с задержкой, чтобы содержание успело свернуться.
Пример 10
В последнем пример используется увеличение изображения с одновременным изменением прозрачности, а содержание увеличивается до нормальных размеров.
View-tenth img {
transform: scaleY(1);
transition: all 0.7s ease-in-out;
}
.view-tenth .mask {
background-color: rgba(255, 231, 179, 0.3);
transition: all 0.5s linear;
opacity: 0;
}
.view-tenth h2{
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
background: transparent;
margin: 20px 40px 0px 40px;
transform: scale(0);
color: #333;
transition: all 0.5s linear;
opacity: 0;
}
.view-tenth p {
color: #333;
opacity: 0;
transform: scale(0);
transition: all 0.5s linear;
}
.view-tenth a.info {
opacity: 0;
transform: scale(0);
transition: all 0.5s linear;
}
При наведении курсора просто изменяется масштаб изображения и прозрачность:
View-tenth:hover img {
transform: scale(10);
opacity: 0;
}
.view-tenth:hover .mask {
opacity: 1;
}
.view-tenth:hover h2,
.view-tenth:hover p,
.view-tenth:hover a.info{
transform: scale(1);
opacity: 1;
}
Заключение
CSS3 имеет огромный потенциал для создания различных визуальных эффектов. Вероятно, что вскоре мы сможем отказаться от использования JavaScript для простых эффектов.
Чтобы привлечь внимание пользователей есть очень много способов: начиная от самых надоедливых и пугающих, я имею ввиду всплывающие окна, которые нельзя закрыть и переадресовывают на другие сайты, и более простых, таких как интересное выделение ссылки. Вот последний случай мы и рассмотрим в этом уроке. В этом уроке мы рассмотрим специальную библиотеку написанную на CSS3, которая позволяет выделять ссылки при наведении на нее. А это делает более интерактивную связь с пользователем.
Скачать
Как пользоваться? — 40+ эффектов при наведении
HTML часть
Возможно разработчики этой библиотеки иногда обновляют ее, поэтому рекомендую скачать ее отсюда — перейти
(последнюю версию).
Вам нужен файл hover-min.css
— это уменьшенная версия библиотеки. Его необходимо подключить в начале вашего сайта:
Затем осталось лишь добавить эффект для нашей ссылки. К примеру вот код нашей ссылки:
| 1
| <a
href
=
"#"
class
=
"btn"
>
Кнпока</
a
>
|
Стиль для примера я выбрал вот такой:
Если кому-то понравился стиль кнопки, вот код CSS для нее:
| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| .btn
{
position
:
relative
;
vertical-align
:
top
;
width
:
100%
;
height
:
60px
;
padding
:
0
;
font-size
:
22px
;
color
:
white
;
text-align
:
center
;
text-shadow
:
0
1px
2px
rgba(0
,
0
,
0
,
0.25
)
;
background
:
#9b59b6
;
border
:
0
;
border-bottom
:
2px
solid
#8d4ca7
;
cursor
:
pointer
;
-webkit-box-shadow
:
inset
0
-2px
#8d4ca7
;
box-shadow
:
inset
0
-2px
#8d4ca7
;
text-decoration
:
none
;
padding
:
20px
;
}
|
И чтобы придать эффект, вам лишь нужно написать его через пробел в атрибуте class
. Я выбрал эффект, при котором кнопка зависает вверху, когда на нее наводят:
| 1
| <a
href
=
"#"
class
=
"btn hover-shadow"
>
Кнопка</
a
>
|
Вот и всё! Что получилось у меня (это GIF изображение, поэтому если анимации нет — нужно подождать пока подгрузится).
Очередная анимация на CSS3, с присутствием hover-эффект на изображение, которое идет на изображение разного порядка тематического сайта. Здесь появление заключается в том, что оно не будет появляться с разных сторон. Здесь оно в уникально, а точнее с наведении курсора, плавно и потом быстрее выезжает самого снимка, что смотрится просто шикарно. Не говоря о том, что несет за собой информацию и безусловно функциональные действия. Это название материала, если установлено в каталоге фотографий, то можно кратко описание выставить.
Но и сам переход, где кнопка создана на самом фоне по центру, где светлые тени идут обводом и также имеет свой эффект. И все это происходит на прозрачно темном фоне, что подойдет на светлый интернет ресурс и аналогичный по оттенку в материале. Можно назвать, что все сделано современно с идеи для тонких эффектов зависания, где работает, если только курсор находится на снимке. Красивый эффект зависания, который минимизирует изображения, придающие пространство сплошной цветной коробке с текстом, что находится внутри, со всем функционалом.
Эффекты Hover доступны на странице продуктов любого шаблона. Вы можете отобразить название продуктов и цены над цветовым наложением, который можно поставить в ручную по палитре цвета. Но это касается многих тематических наклонений, это как софт или игровой ресурс. Также не нужно забывать, что отличный способ продемонстрировать особенность или ключевые детали для каждого продукта.
.png" alt="">
Скрипты на zotner.ru
Переход
CSS
Abecause_certainlyn {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
Abecause_certainlyn .easytuni_cigaretolsag {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
opacity: 0;
filter: alpha(opacity=0);
background-color: rgba(27, 25, 25, 0.65);
-webkit-transition: all 0.4s cubic-bezier(0.88, -0.99, 0.35, 1.4);
transition: all 0.4s cubic-bezier(0.88, -0.99, 0.37, 1.43);
}
Abecause_certainlyn img {
display: block;
position: relative;
-webkit-transition: all 0.4s cubic-bezier(0.88, -0.99, 0.33, 1.4);
transition: all 0.4s cubic-bezier(0.88, -0.99, 0.36, 1.42);
}
Abecause_certainlyn h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
background: rgba(25, 24, 24, 0.73);
-webkit-transform: translatey(-100px);
-ms-transform: translatey(-100px);
transform: translatey(-100px);
-webkit-transition: all 0.4s cubic-bezier(0.88, -0.99, 0.44, 1.36);
transition: all 0.4s cubic-bezier(0.88, -0.99, 0.44, 1.44);
padding: 10px;
}
Abecause_certainlyn a.pembarra_sedogzam {
text-decoration: none;
display: inline-block;
text-transform: uppercase;
color: #f7f2f2;
border: 1px solid #fff;
background-color: rgba(29, 28, 28, 0);
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: all 0.4s cubic-bezier(0.25, 0.1, 0.16, 0.89);
transition: all 0.4s cubic-bezier(0.25, 0.1, 0.24, 0.83);
margin: 50px 0 0;
padding: 8px 15px;
}
Abecause_certainlyn a.pembarra_sedogzam:hover {
box-shadow: 0 0 6px #f9ecec;
}
Abecause_certainlyn:hover img {
-ms-transform: scale(1.3);
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
Abecause_certainlyn:hover .easytuni_cigaretolsag {
opacity: 1;
filter: alpha(opacity=100);
}
Abecause_certainlyn:hover h2,.abecause_certainlyn:hover a.pembarra_sedogzam {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform: translatey(0);
-webkit-transform: translatey(0);
transform: translatey(0);
}
Abecause_certainlyn:hover a.pembarra_sedogzam {
-webkit-transition-delay: .2.1s;
transition-delay: .2.1s;
}
Чтоб понять, как все производится, то будет ниже Demo и снимки при работе.
По умолчанию:
Это когда навели курсор:
Многие эффекты используют функции CSS3, такие, как переходы, трансляции и анимации. Старые браузеры, которые не поддерживают эти функции, могут нуждаться в дополнительном внимании, чтобы убедиться, что эффект отложенного зависания все еще существует.
Loading...