kurisucn.github.io/section.html at master · kurisucn/kurisucn.github.io · GitHub

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
<section class="nowar_banner">
    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
    />
    <meta charset="utf-8" />

    <p class="nowar_banner_title">🇺🇦 #Support_Ukraine</p>
    <p class="nowar_banner_infomation">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;请给予人道主义关爱予以饱受战争伤害的乌克兰群众。&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </p>

    <style>
        .nowar_banner {
            width: 50vw;
            height: 2em;
            display: inline;
            white-space: nowrap;
            border: 0px solid rgba(0, 0, 0, 0);
            padding: 0;
            background: linear-gradient(
                90deg,
                rgba(0, 0, 0, 0) 2%,
                rgba(255, 255, 255, 0.01) 2.1%
            );
            overflow: hidden;
            display: flex;
            scroll-behavior: smooth;
            align-items: center; /* 垂直居中 */
        }

        body {
            margin: 0;
        }
        .nowar_banner_title {
            background: linear-gradient(
                120deg,
                #0058b5 90%,
                rgba(255, 255, 255, 0.01) 90.2%
            );
            color: white;
            display: inline-block;
            margin: 0 0 0 1%;
            font-size: 1em;
            z-index: 99;
        }
        .nowar_banner_title::before {
            content: "\00A0\00A0";
            width: 3px;
            margin: 0 0 0 0px;
            background: #0058b5;
            pointer-events: none;
        }
        .nowar_banner_title::after {
            content: "\00A0\00A0\00A0\00A0\00A0";
            width: 3px;
            margin: 0 0 0 0px;
            background: linear-gradient(
                120deg,
                #0058b5 50%,
                rgba(255, 255, 255, 0.01) 50.2%
            );
            pointer-events: none;
        }
        .nowar_banner_infomation {
            width: 200vw;
            padding: 0 0 0 -6vw;
            background: #f7ce00;
            color: black;
            display: inline-block;
            white-space: nowrap;
            overflow: auto;
            font-size: 1em;
            /*animation:move 4s linear infinite;*/
            transform: translateX(-5vw);
            /*overflow-x: hidden;*/
            scroll-behavior: smooth;
            overscroll-behavior: contain;
            -ms-scroll-chaining: contain;
            margin: 0 0 0 0;
        }
        .nowar_banner_infomation::-webkit-scrollbar {
            display: none;
        }

        .nowar_banner_infomation::selection {
            background: rgba(0, 0, 0, 1);
            color: rgba(255, 255, 255, 1);
        }

        .nowar_banner_infomation::-moz-selection {
            background: rgba(0, 0, 0, 1);
            color: rgba(255, 255, 255, 1);
        }

        .nowar_banner_infomation::-webkit-selection {
            background: rgba(0, 0, 0, 1);
            color: rgba(255, 255, 255, 1);
        }
        .nowar_banner::after {
            background-image: linear-gradient( to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 10% );
            position: absolute;
            /* bottom: 0; */
            right: 4.95vw;
            width: 120vw;
            /*left: 0;*/
            height: 1.25em;
            content: "";
            z-index: 100;
            pointer-events: none;
        }

        @keyframes move {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-100%);
            }
        }
    </style>
    <script>
        let nowar_banner_infomation = document.querySelector(
            ".nowar_banner_infomation"
        );
        nowar_banner_infomation.addEventListener("wheel", (event) => {
            event.preventDefault();
            nowar_banner_infomation.scrollLeft += event.deltaY;
        });
    </script>
</section>