横向滚动示例

html

1
2
3
4
5
6
<div class="marquee">
    <div class="marquee-wrap" style="width: 430px;text-align: center">
        <span
              class="yellow marquee-content">这是一断横向滚动的文字</span>
    </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
.marquee {
    overflow: hidden;
}

.marquee .marquee-wrap {
    width: 100%;
    animation: marquee-wrap 4s infinite linear;
}

.marquee .marquee-content {
    float: left;
    white-space: nowrap;
    min-width: 100%;
    animation: marquee-content 4s infinite linear;
}

@keyframes marquee-wrap {
    0%,
    30% {
        transform: translateX(0);
    }
    70%,
    100% {
        transform: translateX(100%);
    }
}

@keyframes marquee-content {
    0%,
    30% {
        transform: translateX(0);
    }
    70%,
    100% {
        transform: translateX(-100%);
    }
}

实现效果

横向滚动

纵向滚动示例

html

1
2
3
4
5
<div class="marquee-y">
    <div class="marquee-wrap-y" style="height: 330px;width:2360px;text-align: center">
        <span class="marquee-content-y"><mark class="zyyjxx-index">{{index+1}} 、</mark>{{item}}</span>
    </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
.marquee-y {
    overflow: hidden;
}

.marquee-y .marquee-wrap-y {
    height: 100%;
    animation: marquee-wrap-y 4s infinite linear;
}

.marquee-y .marquee-content-y {
    float: left;
    min-height: 100%;
    max-width: 100%;
    white-space: pre-wrap;
    animation: marquee-content-y 4s infinite linear;
}

@keyframes marquee-wrap-y {
    0%,
    30% {
        transform: translateY(0);
    }
    70%,
    100% {
        transform: translateY(100%);
    }
}

@keyframes marquee-content-y {
    0%,
    30% {
        transform: translateY(0);
    }
    70%,
    100% {
        transform: translateY(-100%);
    }
}

实现效果

纵向向滚动

末尾停顿

因为滚动部分时间固定，可以设置80%的时间时滚动到100%，这样剩下20%的时间将会停顿在末尾

示例
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
/* 纵向滚动 */
.marquee-y {
    overflow: hidden;
}

.marquee-y .marquee-wrap-y {
    height: 100%;
    animation: marquee-wrap-y infinite linear;
}

.marquee-y .marquee-content-y {
    float: left;
    min-height: 100%;
    max-width: 100%;
    white-space: pre-wrap;
    animation: marquee-content-y infinite linear;
}

@keyframes marquee-wrap-y {
    0% {
        transform: translateY(0);
    }
    20% {
        transform: translateY(25%);
    }
    40% {
        transform: translateY(50%);
    }
    60% {
        transform: translateY(75%);
    }
    80% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(100%);
    }
}

@keyframes marquee-content-y {
    0% {
        transform: translateY(0);
    }
    20% {
        transform: translateY(-25%);
    }
    40% {
        transform: translateY(-50%);
    }
    60% {
        transform: translateY(-75%);
    }
    80% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(-100%);
    }
}