ZeroCup2020/index.html at master · LSX-s-Software/ZeroCup2020 · 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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>游戏与电子竞技</title>
    <script src="javascript/jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" href="./javascript/swiper/dist/css/swiper.min.css">
    <script src="./javascript/swiper/dist/js/swiper.min.js"></script>
    <link rel="stylesheet" href="./css/index.css">
    <script src="./javascript/index.js"></script>
</head>

<body>
    <div class="container">
        <div class="sidebar">
            <div class="side colored" onclick="$('html,body').animate({ scrollTop: $('#s1').offset().top }, 400)"></div>
            <div class="side" onclick="$('html,body').animate({ scrollTop: $('#s2').offset().top }, 400)"></div>
            <div class="side" onclick="$('html,body').animate({ scrollTop: $('#s3').offset().top }, 400)"></div>
            <div class="side" onclick="$('html,body').animate({ scrollTop: $('#s4').offset().top }, 400)"></div>
            <div class="side" onclick="$('html,body').animate({ scrollTop: $('#s5').offset().top }, 400)"></div>
        </div>
        <div class="screen s1" id="s1">
            <video id="bgVideo" muted autoplay loop playsinline src="./source/video/LOLOurGame.mp4"></video>
            <div class="wrapper">
                <div class="bigger" id="s1l1">游戏</div>
                <div class="smaller" id="s1l2">与</div>
                <div class="bigger" id="s1l3">电子竞技</div>
            </div>
            <div class="promote" onclick="$('html,body').animate({ scrollTop: $('#s2').offset().top }, 400)">
                <p>向下滑动来了解</p>
                <img src="source/img/down.svg" id="down">
            </div>
        </div>
        <div class="banner">
            <div class="span" id="b1">游戏</div>
            <div class="span hidden" id="b2">与电子竞技</div>
        </div>
        <div class="screen s2" id="s2">
            <div class="wrapper">
                <div class="content-wrapper" id="warpper1">
                    <div class="head">单机游戏</div>
                    <div class="content">
                        <div class="span">随时、随地、随心</div>
                        <div class="span">更细腻、更真实、更生动</div>
                        <div class="span">打造自己的<div class="colored"> 史诗 </div>与<div class="colored"> 传奇经历 </div>
                        </div>
                    </div>
                    <div class="btn" id="more1">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 183 56">
                            <path d="M-177-1912l26,28-26,28Zm-131,56v-56h131v56Zm-26-28,26-28v56Z" transform="translate(334 1912)" fill="#fff" />
                            <text transform="translate(92 39.482)" font-size="28">
                                <tspan x="-56" y="0">了解更多</tspan>
                            </text>
                        </svg>
                    </div>
                </div>
                <div class="skew">
                    <div class="line"></div>
                </div>
                <div class="content-wrapper" id="warpper2">
                    <div class="head">网络游戏</div>
                    <div class="content cr">
                        <div class="span">互动、竞争</div>
                        <div class="span">低门槛、大众化、群体化</div>
                        <div class="span">与来自五湖四海的玩家共建 <div class="colored">传奇</div>
                        </div>
                    </div>
                    <div class="btn" id="more2">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 183 56">
                            <path d="M-177-1912l26,28-26,28Zm-131,56v-56h131v56Zm-26-28,26-28v56Z" transform="translate(334 1912)" fill="#fff" />
                            <text transform="translate(92 39.482)" font-size="28">
                                <tspan x="-56" y="0">了解更多</tspan>
                            </text>
                        </svg>
                    </div>
                </div>
                <!-- Slider main container -->
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <!-- 第一个为占位符 -->
                        <div class="swiper-slide">
                            <div class="skew-fix"><img alt=""></div>
                        </div>
                        <div class="swiper-slide">
                            <div class="skew-fix"><img alt=""></div>
                        </div>
                        <div class="swiper-slide">
                            <div class="skew-fix"><img alt=""></div>
                        </div>
                        <div class="swiper-slide">
                            <div class="skew-fix"><img alt=""></div>
                        </div>
                        <div class="swiper-slide">
                            <div class="skew-fix"><img alt=""></div>
                        </div>
                        <div class="swiper-slide">
                            <div class="skew-fix"><img alt=""></div>
                        </div>
                        <div class="swiper-slide">
                            <div class="skew-fix"><img alt=""></div>
                        </div>
                    </div>
                </div>
                <div class="mask">
                    <h1 id="gameName">游戏标题</h1>
                    <h3 id="gameDes">游戏简介</h3>
                    <h3><a href="" id="gameSite" target="_blank">前往游戏官网&nbsp;&raquo;</a></h3>
                    <div class="swiper-btn">
                        <div class="swiper-button-prev swiper-button-white"></div>
                        <div class="swiper-button-next swiper-button-white"></div>
                    </div>
                </div>
            </div>
            <div class="video-section">
                <video muted autoplay loop playsinline src="./source/video/LOLWORLDFINALS.mp4"></video>
                <img src="./source/img/ProDisplayXDR.png" alt="img">
                <div class="filter"></div>
            </div>
            <div class="siderS" id="s3">
                <img class="sider sd1" src="./source/icon/lol.png">
                <div class="text-view sd1 left">全称英雄联盟全球总决赛，是英雄联盟一年一度的最为盛大的比赛，拥有最高荣誉、最高含金量、最高竞技水平、最高知名度。比赛一般在每年10月-11月开赛，迄今为止已经举办了S1-S10十届的比赛。参赛者均是来自各大赛区最顶尖水平的战队，只有在每一年的职业联赛中表现出色的队伍才有资格参赛，每个赛区根据规模和水平决定其在总决赛中的名额 。全球12个赛区及联赛分别是：中国大陆LPL、韩国LCK、欧洲LEC、北美LCS、独联体LCL、巴西CBLOL、东南亚PCS、拉丁美洲LLA、土耳其TCL、大洋洲OPL、日本LJL、越南VCS。</div>

                <img class="sider sd2" src="./source/icon/heartstone.png">
                <div class="text-view sd2 left">炉石黄金公开赛是由网易和暴雪联合主办的一项全民电竞赛事。该赛事旨在发掘中国炉石玩家的竞技潜力，为全体炉石玩家提供公平的参赛机会，也为炉石牌友提供炉边聚会、交流的机会。炉石黄金公开赛每站参赛人数限定512人，报名不设门槛，无论是民间大神还是草根玩家都有参与夺冠的机会。自从2014年起，黄金公开赛每年都会在全国数个城市巡回举行。优胜者不但能收获丰厚奖金，还将获得《炉石传说》黄金系列赛年度总决赛的参赛权，与全国顶尖玩家共同争夺最高荣誉——500g纯金炉石雕像奖励。</div>

                <img class="sider sd3" src="./source/icon/dota2.jpg">
                <div class="text-view sd3 left">Ti，全称DOTA2国际邀请赛。创立于2011年，是一个全球性的电子竞技赛事，每年一届，由ValveCorporation（V社）主办,奖杯为V社特制冠军盾牌，每一届冠军队伍及人员将记录在游戏泉水的冠军盾中。Ti联赛最让人津津乐道的就是他们的比赛奖金屡屡打破记录，去年的ti9总奖金已达3433万美元，冠军可拿1501.5万元美金。</div>

                <img class="sider sd4" src="./source/icon/csgo.jpg">
                <div class="text-view sd4 right">Major是CSGO的世界性盛事，是由Valve公司主办，全球几大电竞赛事方承办的CSGO最大赛事，也是所有CS职业选手最向往的一个赛事。采用邀请晋级制来招募世界各地的战队参加，比赛分为预选赛和正赛。一个底层队伍的晋级之路是Minor预选赛—Minor正赛—Major预选赛—Major正赛。</div>

                <img class="sider sd5" src="./source/icon/overwatch.jpg">
                <div class="text-view sd5 right">OWL，全称《守望先锋联赛》，是全球首个以城市战队为单位的大型电竞联赛，于2016年11月4日成立，由来自全球各个城市的20支战队组成，是《守望先锋》电子竞技的最高殿堂。2020年赛季守望先锋季后赛分为两大赛区，其中13支战队归属北美赛区，其余7支战队划归亚洲赛区。</div>

                <img class="sider sd6" src="./source/icon/WCG.jfif">
                <div class="text-view sd6 right">世界电子竞技大赛是一个全球性的电子竞技赛事，创立于2000年。该项赛事由韩国国际电子营销公司（ICM）主办，并由三星和微软提供赞助。 大赛一直以 “beyond the game” 为口号，以推动电子竞技的全球发展为目标，旨在促进人们在网络时代的沟通、互动和交流，促进人类生活的和谐与愉快。</div>
            </div>
        </div>
        <div class="screen s3" id="s4">
            <div class="imgContainer" id="iC1">
                <img src="./source/img/hof2.jpeg" alt="">
            </div>
            <div class="imgContainer" id="iC2">
                <img src="./source/img/videoplayback-0001.jpg" alt="">
            </div>
            <div class="wrapper">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                    viewBox="0 0 330.414 317.931" id="hof">
                    <defs>
                        <linearGradient id="linear-gradient" x1="0.255" y1="0.01" x2="0.749" y2="0.997"
                            gradientUnits="objectBoundingBox">
                            <stop offset="0" stop-color="#c8a06a" />
                            <stop offset="1" stop-color="#806644" />
                        </linearGradient>
                    </defs>
                    <g transform="translate(-85.474 -400.164)">
                        <path d="M190.772,0l63.591,110.129L190.772,220.258H63.591L0,110.129,63.591,0Z" transform="translate(195.603 400.164) rotate(30)" fill="url(#linear-gradient)" />
                        <text transform="translate(250.156 522.444)" fill="#fff" font-size="43">
                            <tspan x="-43" y="0">电竞</tspan>
                            <tspan x="-64.5" y="50">名人堂</tspan>
                        </text>
                        <text transform="translate(250.5 618)" fill="#f2f2f2" font-size="24">
                            <tspan x="-48" y="0">了解更多</tspan>
                        </text>
                    </g>
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                    viewBox="0 0 330.414 317.931" id="tl">
                    <defs>
                        <linearGradient id="linear-gradient" x1="0.255" y1="0.01" x2="0.749" y2="0.997" gradientUnits="objectBoundingBox">
                            <stop offset="0" stop-color="#c8a06a" />
                            <stop offset="1" stop-color="#806644" />
                        </linearGradient>
                    </defs>
                    <g transform="translate(-85.474 -400.164)">
                        <path d="M190.772,0l63.591,110.129L190.772,220.258H63.591L0,110.129,63.591,0Z" transform="translate(195.603 400.164) rotate(30)" fill="url(#linear-gradient)" />
                        <text transform="translate(250.156 522.444)" fill="#fff" font-size="43">
                            <tspan x="-43" y="0">电竞</tspan>
                            <tspan x="-64.5" y="50">大事记</tspan>
                        </text>
                        <text transform="translate(250.5 618)" fill="#f2f2f2" font-size="24">
                            <tspan x="-48" y="0">了解更多</tspan>
                        </text>
                    </g>
                </svg>
            </div>
        </div>
        <div class="screen s4" id="s5">
            <div class="wrapper">
                <div class="smaller" id="s5l1">游戏与电子竞技</div>
                <div class="bigger" id="s5l2">不只是新辟的一条路，</div>
                <div class="bigger" id="s5l3">更是另一个维度的天空</div>
            </div>
        </div>
    </div>
    <div class="closeBtn">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38.891 38.891">
            <g transform="translate(133.997 -310.773) rotate(45)">
                <line x2="50" transform="translate(127.5 314.5)" fill="none" stroke="#fff" stroke-width="5" />
                <line x2="50" transform="translate(152.5 289.5) rotate(90)" fill="none"stroke="#fff" stroke-width="5" />
            </g>
        </svg>
    </div>
    <iframe src="waterfallflow.html" frameborder="0" id="waterflow"></iframe>
    <iframe src="timeline.html" frameborder="0" id="timeline"></iframe>
</body>

</html>