23 анимированных стрелки в css для вашего сайта

Содержание:

Вариант 3:
Вариант 4:
Вариант 5:
Вариант 2:
Вариант 7:
Вариант 8:

Вариант 3:

Стрелка на SVG для меню или кнопки «подробнее / далее»

<a class=»arrow-3″ href=»#link»>Подробнее или пунк меню
<svg class=»arrow-3-icon» xmlns=»http://www.w3.org/2000/svg» width=»32″ height=»32″ viewBox=»0 0 32 32″>
<g fill=»none» stroke=»#337AB7″ stroke-width=»1.5″ stroke-linejoin=»round» stroke-miterlimit=»10″>
<circle class=»arrow-3-iconcircle» cx=»16″ cy=»16″ r=»15.12″></circle>
<path class=»arrow-3-icon—arrow» d=»M16.14 9.93L22.21 16l-6.07 6.07M8.23 16h13.98″></path>
</g>
</svg>
</a>

1
2
3
4
5
6
7
8

<a class=»arrow-3″href=»#link»>Подробнее или пунк меню

</g>

</svg>

</a>

.arrow-3 {
color: #337AB7;
cursor: pointer;
text-decoration: none;
font-size: 18px;
height: 18px;
line-height: 18px;
display: inline-block;
margin: 20px;
}
.arrow-3 .arrow-3-icon {
position: relative;
top: -1px;
transition: transform 0.3s ease;
vertical-align: middle;
}
.arrow-3 .arrow-3-iconcircle {
transition: stroke-dashoffset .3s ease;
stroke-dasharray: 95;
stroke-dashoffset: 95;
}
.arrow-3:hover .arrow-3-icon {
transform: translate3d(5px, 0, 0);
}
.arrow-3:hover .arrow-3-iconcircle {
stroke-dashoffset: 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
26
27

.arrow-3 {

color#337AB7;

cursorpointer;

text-decorationnone;

font-size18px;

height18px;

line-height18px;

displayinline-block;

margin20px;

}

.arrow-3 .arrow-3-icon {

positionrelative;

top-1px;

transitiontransform0.3sease;

vertical-alignmiddle;

}

.arrow-3 .arrow-3-iconcircle {

transitionstroke-dashoffset.3sease;

stroke-dasharray95;

stroke-dashoffset95;

}

.arrow-3:hover .arrow-3-icon {

transformtranslate3d(5px,0,);

}

.arrow-3:hover .arrow-3-iconcircle {

stroke-dashoffset;

}

Вариант 4:

Символ стрелка знак стрелки

Вариант стрелки для аккордиона или выпадающего блока (меняет направление по клику).

Требуется библиотека jQuery

1
2
3
4

</div>

.arrow-4 {
position: relative;
cursor: pointer;
margin:20px;
width: 66px;
height: 30px;
}
.arrow-4-left {
position: absolute;
background-color: transparent;
top: 10px;
left: 0;
width: 40px;
height: 10px;
display: block;
transform: rotate(35deg);
float: right;
border-radius: 2px;
}
.arrow-4-left:after {
content: «»;
background-color: #337AB7;
width: 40px;
height: 10px;
display: block;
float: right;
border-radius: 6px 10px 10px 6px;
transition: all 0.5s cubic-bezier(0.25, 1.7, 0.35, 0.8);
z-index: -1;
}

.arrow-4-right {
position: absolute;
background-color: transparent;
top: 10px;
left: 26px;
width: 40px;
height: 10px;
display: block;
transform: rotate(-35deg);
float: right;
border-radius: 2px;
}
.arrow-4-right:after {
content: «»;
background-color: #337AB7;
width: 40px;
height: 10px;
display: block;
float: right;
border-radius: 10px 6px 6px 10px;
transition: all 0.5s cubic-bezier(0.25, 1.7, 0.35, 0.8);
z-index: -1;
}
.open .arrow-4-left:after {
transform-origin: center center;
transform: rotate(-70deg);
}
.open .arrow-4-right:after {
transform-origin: center center;
transform: rotate(70deg);
}

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

.arrow-4 {

positionrelative;

cursorpointer;

margin20px;

width66px;

height30px;

}

.arrow-4-left {

positionabsolute;

background-colortransparent;

top10px;

left;

width40px;

height10px;

displayblock;

transformrotate(35deg);

floatright;

border-radius2px;

}

.arrow-4-left:after {

content»»;

background-color#337AB7;

width40px;

height10px;

displayblock;

floatright;

border-radius6px10px10px6px;

transitionall0.5scubic-bezier(0.25,1.7,0.35,0.8);

z-index-1;

}

.arrow-4-right {

positionabsolute;

background-colortransparent;

top10px;

left26px;

width40px;

height10px;

displayblock;

transformrotate(-35deg);

floatright;

border-radius2px;

}

.arrow-4-right:after {

content»»;

background-color#337AB7;

width40px;

height10px;

displayblock;

floatright;

border-radius10px6px6px10px;

transitionall0.5scubic-bezier(0.25,1.7,0.35,0.8);

z-index-1;

}

.open .arrow-4-left:after {

transform-origincentercenter;

transformrotate(-70deg);

}

.open .arrow-4-right:after {

transform-origincentercenter;

transformrotate(70deg);

}

$(«.arrow-4»).click(function() {
$(this).toggleClass(«open»);
});

1
2
3

$(«.arrow-4»).click(function(){

$(this).toggleClass(«open»);

});

Вариант 5:

Необычные стрелки на глазах: стильный тренд в макияже

Стрелки для оформления подсказок или каких-нибудь информационных блоков

Стрелка вверх

Стрелка влево

Стрелка вправо

<div class=»arrow-5 arrow-5-top»>
Стрелка вверх
</div>

<div class=»arrow-5 arrow-5-bottom»>
Стрелка вниз
</div>

<div class=»arrow-5 arrow-5-left»>
Стрелка влево
</div>

<div class=»arrow-5 arrow-5-right»>
Стрелка вправо
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Стрелка вверх
</div>

Стрелка вниз
</div>

Стрелка влево
</div>

Стрелка вправо
</div>

.arrow-5 {
background: #337AB7;
text-align: center;
color: #fff;
padding: 20px;
margin: 20px;
}
.arrow-5-top,
.arrow-5-bottom,
.arrow-5-right,
.arrow-5-left {
position: relative;
z-index: 10;
}
.arrow-5-top::after,
.arrow-5-bottom::after,
.arrow-5-right::after,
.arrow-5-left::after {
content: »;
width: 0;
height: 0;
display: block;
position: absolute;
z-index: 10;
border: 0;
}
.arrow-5-top::after {
border-left: 10px solid transparent;
border-right: 10px solid transparent;
margin-left: -10px;
left: 50%;
border-bottom: 10px solid #337AB7;
top: -10px;
}
.arrow-5-bottom::after {
border-left: 10px solid transparent;
border-right: 10px solid transparent;
margin-left: -10px;
left: 50%;
border-top: 10px solid #337AB7;
bottom: -10px;
}
.arrow-5-right::after {
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
margin-top: -10px;
top: 50%;
border-left: 10px solid #337AB7;
left: auto;
right: -10px;
}
.arrow-5-left::after {
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
margin-top: -10px;
top: 50%;
border-right: 10px solid #337AB7;
left: -10px;
}

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

.arrow-5 {

background#337AB7;

text-aligncenter;

color#fff;

padding20px;

margin20px;

}
.arrow-5-top,
.arrow-5-bottom,
.arrow-5-right,

.arrow-5-left {

positionrelative;

z-index10;

}
.arrow-5-top::after,
.arrow-5-bottom::after,
.arrow-5-right::after,

.arrow-5-left::after {

content»;

width;

height;

displayblock;

positionabsolute;

z-index10;

border;

}

.arrow-5-top::after {

border-left10pxsolidtransparent;

border-right10pxsolidtransparent;

margin-left-10px;

left50%;

border-bottom10pxsolid#337AB7;

top-10px;

}

.arrow-5-bottom::after {

border-left10pxsolidtransparent;

border-right10pxsolidtransparent;

margin-left-10px;

left50%;

border-top10pxsolid#337AB7;

bottom-10px;

}

.arrow-5-right::after {

border-top10pxsolidtransparent;

border-bottom10pxsolidtransparent;

margin-top-10px;

top50%;

border-left10pxsolid#337AB7;

leftauto;

right-10px;

}

.arrow-5-left::after {

border-top10pxsolidtransparent;

border-bottom10pxsolidtransparent;

margin-top-10px;

top50%;

border-right10pxsolid#337AB7;

left-10px;

}

Вариант 2:

Стрелки на глазах 2021: кому идут стрелки и как их нарисовать (пошаговая инструкция)

Большая стрелка для каких-нибудь информационных или графических блоков.

1
2
3
4

</div>

.arrow-2 {
cursor: pointer;
height: 120px;
width: 80px;
position: relative;
margin: 20px;
}
.arrow-2-top,
.arrow-2-bottom {
background: #337AB7;
height: 10px;
left: -30px;
position: absolute;
top: 60px;
width: 100px;
}
.arrow-2-top {
top: 64px;
}
.arrow-2-top {
transform: rotate(45deg);
transform-origin: bottom right;
}
.arrow-2-bottom {
transform: rotate(-45deg);
transform-origin: top right;
}
.arrow-2-top::after,
.arrow-2-bottom::after {
background: #000;
content: »;
height: 100%;
position: absolute;
top: 0;
transition: all 0.15s;
}
.arrow-2-top::after {
left: 100%;
right: 0;
transition-delay: 0s;
}
.arrow-2-bottom::after {
left: 0;
right: 100%;
transition-delay: 0.15s;
}
.arrow-2:hover .arrow-2-top::after {
left: 0;
transition-delay: 0.15s;
}
.arrow-2:hover .arrow-2-bottom::after {
right: 0;
transition-delay: 0s;
}

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

.arrow-2 {

cursorpointer;

height120px;

width80px;

positionrelative;

margin20px;

}
.arrow-2-top,

.arrow-2-bottom {

background#337AB7;

height10px;

left-30px;

positionabsolute;

top60px;

width100px;

}

.arrow-2-top {

top64px;

}

.arrow-2-top {

transformrotate(45deg);

transform-originbottomright;

}

.arrow-2-bottom {

transformrotate(-45deg);

transform-origintopright;

}
.arrow-2-top::after,

.arrow-2-bottom::after {

background#000;

content»;

height100%;

positionabsolute;

top;

transitionall0.15s;

}

.arrow-2-top::after {

left100%;

right;

transition-delay0s;

}

.arrow-2-bottom::after {

left;

right100%;

transition-delay0.15s;

}

.arrow-2:hover .arrow-2-top::after {

left;

transition-delay0.15s;

}

.arrow-2:hover .arrow-2-bottom::after {

right;

transition-delay0s;

}

Вариант 7:

Анимированная стрелка вниз

1
2
3
4
5

</div>

.arrow-7 {
margin: 40px auto 10px auto;
width: 38px;
height: 100px;
}
.arrow-7 span {
display: block;
width: 30px;
height: 30px;
border-bottom: 5px solid #337AB7;
border-right: 5px solid #337AB7;
transform: rotate(45deg);
margin: -16px 0;
animation: arrow-7 2s infinite;
}
.arrow-7 span:nth-child(2){
animation-delay: -0.2s;
}
.arrow-7 span:nth-child(3){
animation-delay: -0.4s;
}
@keyframes arrow-7 {
0%{
opacity: 0;
transform: translate(0,-20px) rotate(45deg);
}
50%{
opacity: 1;
}
100%{
opacity: 0;
transform: translate(0,20px) rotate(45deg);
}
}

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

.arrow-7 {

margin40pxauto10pxauto;

width38px;

height100px;

}

.arrow-7 span {

displayblock;

width30px;

height30px;

border-bottom5pxsolid#337AB7;

border-right5pxsolid#337AB7;

transformrotate(45deg);

margin-16px;

animationarrow-72sinfinite;

}

.arrow-7 span:nth-child(2){

animation-delay-0.2s;

}

.arrow-7 span:nth-child(3){

animation-delay-0.4s;

}

@keyframes arrow-7 {

0%{

opacity;

transformtranslate(0,-20px)rotate(45deg);

}

50%{

opacity1;

}

100%{

opacity;

transformtranslate(0,20px)rotate(45deg);

}

Вариант 8:

Еще один вариант анимированной стрелки вниз

1	<div class=»arrow-8″></div>

.arrow-8 {
position: relative;
width: 100px;
height: 100px;
margin: 30px auto 80px auto;
}
.arrow-8:before,
.arrow-8:after {
content: »;
position: absolute;
box-sizing: border-box;
width: 100%;
height: 100%;
border-left: 26px solid #337AB7;
border-bottom: 26px solid #337AB7;
animation: arrow-8 3s linear infinite;
}
.arrow-8:after {
animation: arrow-8 3s linear infinite -1.5s;
}
@keyframes arrow-8 {
0% {
opacity: 0;
transform: translate(0, -53px) rotate(-45deg);
}
10%, 90% {
opacity: 0;
}
50% {
opacity: 1;
transform: translate(0, 0) rotate(-45deg);
}
100% {
opacity: 0;
transform: translate(0, 53px) rotate(-45deg);
}
}

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

.arrow-8 {

positionrelative;

width100px;

height100px;

margin30pxauto80pxauto;

}
.arrow-8:before,

.arrow-8:after {

content»;

positionabsolute;

box-sizingborder-box;

width100%;

height100%;

border-left26pxsolid#337AB7;

border-bottom26pxsolid#337AB7;

animationarrow-83slinearinfinite;

}

.arrow-8:after {

animationarrow-83slinearinfinite-1.5s;

}

@keyframes arrow-8 {

0% {

opacity;

transformtranslate(0,-53px)rotate(-45deg);

}

10%, 90% {

opacity;

}

50% {

opacity1;

transformtranslate(0,)rotate(-45deg);

}

100% {

opacity;

transformtranslate(0,53px)rotate(-45deg);

}

Еще несколько вариантов стрелок можно найти в темах: Кнопка «вверх» и варианты ее оформления и Векторные стрелки на SVG