星星之火-向下箭头实现上下浮动效果

本文最后更新于：February 16, 2022 pm

积土成山，风雨兴焉；积水成渊，蛟龙生焉；积善成德，而神明自得，圣心备焉。故不积跬步，无以至千里，不积小流无以成江海。齐骥一跃，不能十步，驽马十驾，功不在舍。面对悬崖峭壁，一百年也看不出一条裂缝来，但用斧凿，能进一寸进一寸，能进一尺进一尺，不断积累，飞跃必来，突破随之。

目录

定义箭头

1
2
3
<div class="scroll-down" @click="scrollDown">
    <h4><i class="el-icon-arrow-down"></i></h4>
</div>

样式

带兼容不同浏览器。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.scroll-down {
    cursor: pointer;
    position: absolute;
    bottom: 86vh;
    width: 100%;
}
.scroll-down i {
    font-size: 2rem;
    font-weight: bold;
    display: inline-block;
    position: relative;
    padding-top: 2rem;
    color: #fff;
    webkit-transform: translate(0);
    -moz-transform: translate(0);
    -ms-transform: translate(0);
    -o-transform: translate(0);
    transform: translate(0);
    -webkit-animation: scroll-down-bar 1.5s infinite;
    animation: scroll-down-bar 1.5s infinite;
}

其中， scroll-down-bar 为动画效果。

动画

带兼容不同浏览器。

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
@-moz-keyframes scroll-down-bar {
    0% {
        opacity: 0.8;
        top: 0;
    }
    50% {
        opacity: 0.4;
        top: -1em;
    }
    100% {
        opacity: 0.8;
        top: 0;
    }
}
@-webkit-keyframes scroll-down-bar {
    0% {
        opacity: 0.8;
        top: 0;
    }
    50% {
        opacity: 0.4;
        top: -1em;
    }
    100% {
        opacity: 0.8;
        top: 0;
    }
}
@-o-keyframes scroll-down-bar {
    0% {
        opacity: 0.8;
        top: 0;
    }
    50% {
        opacity: 0.4;
        top: -1em;
    }
    100% {
        opacity: 0.8;
        top: 0;
    }
}
@keyframes scroll-down-bar {
    0% {
        opacity: 0.8;
        top: 0;
    }
    50% {
        opacity: 0.4;
        top: -1em;
    }
    100% {
        opacity: 0.8;
        top: 0;
    }
}