<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>英雄联盟全新官方网站-腾讯游戏</title>
<link rel="stylesheet" href="css/index.css">
<link rel="shortcut icon" href="lol.ico">
<script src="js/myMove.js"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<!-- 头部注册 -->
<header class="head">
<div class="mask"></div>
<div class="mask-all" id = "mask_all">
<div class="menu-wrapper">
<ul class="menu">
<li><a href="javascript:;">新手指引</a></li>
<li><a href="javascript:;"><span class = "hot"></span>资料库</a></li>
<li><a href="javascript:;">攻略中心</a></li>
<li><a href="javascript:;"><span class = "new"></span>开发者基地</a></li>
<li><a href="javascript:;">海克斯战利品库</a></li>
<li><a href="javascript:;"><span class = "new"></span>武器大师竞技场</a></li>
<li><a href="javascript:;">宇宙官网</a></li>
</ul>
<ul class="menu">
<li><a href="javascript:;">点券充值</a></li>
<li><a href="javascript:;">道具城</a></li>
<li><a href="javascript:;"><span class = "hot"></span>周边商城</a></li>
<li><a href="javascript:;">LOL桌游</a></li>
<li><a href="javascript:;">LOL信用卡</a></li>
<li><a href="javascript:;">网吧特权</a></li>
<li><a href="javascript:;"><span class = "new"></span>电竞小说</a></li>
</ul>
<ul class="menu">
<li><a href="javascript:;">官方社区</a></li>
<li><a href="javascript:;">视频中心</a></li>
<li><a href="javascript:;">官方论坛</a></li>
<li><a href="javascript:;">官方微信</a></li>
<li><a href="javascript:;">官方微博</a></li>
<li><a href="javascript:;"><span class = "new"></span>玩家创作馆</a></li>
<li><a href="javascript:;"><span class = "new"></span>作者入驻计划</a></li>
<li><a href="javascript:;"><span class = "new"></span>玩家服务</a></li>
</ul>
<ul class="menu">
<li><a href="javascript:;">LPL职业联赛</a></li>
<li><a href="javascript:;"><span class = "new"></span>LDL发展联赛</a></li>
<li><a href="javascript:;">季中冠军赛</a></li>
<li><a href="javascript:;">洲际冠军赛</a></li>
<li><a href="javascript:;">全球总决赛</a></li>
<li><a href="javascript:;">全明星赛</a></li>
<li><a href="javascript:;">高校联赛</a></li>
<li><a href="javascript:;">城市争霸赛</a></li>
</ul>
<ul class="menu">
<li><a href="javascript:;">在线客服</a></li>
<li><a href="javascript:;"><span class = "new"></span>转区系统</a></li>
<li><a href="javascript:;"><span class = "hot"></span>封号查询</a></li>
<li><a href="javascript:;">体验服申请</a></li>
<li><a href="javascript:;">回放系统</a></li>
<li><a href="javascript:;">服务器状态查询</a></li>
<li><a href="javascript:;"><span class = "new"></span>秩序殿堂</a></li>
<li><a href="javascript:;"><span class = "new"></span>峡谷之巅</a></li>
</ul>
</div>
</div>
<div class="head-wrapper">
<div class="head-nav">
<div class="left">
<ul id = "menu_left">
<li><a href="javascript:;"><img src="img/logo.png" alt="" title="英雄联盟官网"></a></li>
<li><a href="javascript:;"><p class = "c">游戏资料</p><p class = "e">GAME INFO</p></a></li>
<li><p class = "c">商城/合作</p><p class = "e">STORE</p></li>
<li><p class = "c">社区互动</p><p class = "e">COMMUNITY</p></li>
<li><a href="javascript:;"><p class = "c">赛事官网</p><p class = "e">ESPORTS</p></a></li>
<li><p class = "c">自助系统</p><p class = "e">SYSTEM</p></li>
</ul>
</div>
<div class="right">
<div class = 'search'><a href="javascript:;"></a></div>
<div class = "phone">
<a href="javascript:;"></a>
<div class="QRC" id = "QRC">
<span class="qrc-wrapper">
<img src="img/qrc.jpg" alt="">
</span>
<p>扫码下载掌上英雄联盟</p>
<span class = "polo"><img src="img/polo.gif" alt=""></span>
</div>
</div>
<div class = "login">
<a href="javascript:;"><img src="./img/hero1/default.png""></a>
<span>亲爱的召唤师，欢迎<a href="javascript:;">登录</a></span>
</div>
<div class="login-mask" id = "login_mask">
<p>登录并且绑定大区后才可以查看您的具体信息哦<br>(包括战绩、资产、声望）</p>
<p>官网个人信息显示略有延迟，请以游戏数据为准</p>
<div class="go">进入个人中心<span class = "arrow"></span></div>
</div>
</div>
</div>
<div class="detail"><a href="javascript:;">查看详情</a></div>
<div class="version">
<div><a href="javascript:;">当前游戏版本：<em>Ver 9.6</em><span>版本详情</span></a></div>
</div>
</div>
</header>
<!-- 实时信息 -->
<section class="wrap">
<!-- 轮播信息 -->
<section class="promo">
<div class="pic-wrapper">
<ul class = "promo-pic">
<li><a href="javascript:;"><img src="img/pro1.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="img/pro2.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="img/pro3.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="img/pro4.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="img/pro5.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="img/pro1.jpg" alt=""></a></li>
</ul>
</div>
<ul class = "promo-li">
<li class = "current">猫狗总动员</li>
<li>阿卡丽神秘商店</li>
<li>猫狗大战全新皮肤</li>
<li>兑换绒毛菲兹至臻</li>
<li>教你一招</li>
</ul>
</section>
<!-- 信息发布 -->
<section class="info">
<div class="info-head">
<ul>
<li>综合</li>
<li>公告</li>
<li>赛事</li>
<li>攻略</li>
<li>社区</li>
</ul>
</div>
<div class="info-content">
<ul style = "display: block">
<li class="title"><a href="">2021猫狗大战全新皮肤、活动上线公告</a></li>
<li class="content"><span class = "ss">赛事</span><a href="">LPL四队竞逐半决赛 谁将晋级春决线下?</a><span>04-08</span></li>
<li class="content"><span class = "sp">视频</span><a href="">英雄麦克疯：胜负就在刹那间</a><span>04-06</span></li>
<li class="content"><span class = "sp">视频</span><a href="">教你一招：9分钟学会新厄加特上野玩法</a><span>04-04</span></li>
<li class="content"><span class = "ss">赛事</span><a href="">4月4日季后赛首轮开战 八队赛前海报公布</a><span>04-03</span></li>
<li class="content"><span class = "xw">新闻</span><a href="">恶魔之焰 崔丝塔娜：原画&视觉特效</a><span>04-03</span></li>
<li class="content"><span class = "sp">视频</span><a href="">iG S8冠军皮肤大曝光!卡蜜尔剑姬妖姬刀妹卡莎洛</a><span>04-03</span></li>
</ul>
<ul>
<li class="title"><a href="">2021猫狗大战全新皮肤、活动上线公告</a></li>
<li class="content"><span class = "gg">公告</span><a href="">裁决之地临时维护公告</a><span>04-05</span></li>
<li class="content"><span class = "gg">公告</span><a href="">4月5日免费英雄更换公告</a><span>04-03</span></li>
<li class="content"><span class = "gg">公告</span><a href="">全大区队列系统维护升级公告</a><span>04-02</span></li>
<li class="content"><span class = "gg">公告</span><a href="">4月1日比赛服下载地址更新公告</a><span>04-02</span></li>
<li class="content"><span class = "gg">公告</span><a href="">游戏环境公示及处罚名单3月31日</a><span>04-01</span></li>
<li class="content"><span class = "gg">公告</span><a href="">史上最正式的对决！猫狗大战任务公告</a><span>03-28</span></li>
</ul>
<ul>
<li class="title"><a href="">369吸血鬼无人能挡 TOP横扫SDG晋级四强</a></li>
<li class="content"><span class = "yl">娱乐</span><a href="">LPL新格局完成 春决将诞生新王！</a><span>04-08</span></li>
<li class="content"><span class = "ss">赛事</span><a href="">京东成功将RNG淘汰出局 RNG无缘洲际赛</a><span>04-06</span></li>
<li class="content"><span class = "ss">赛事</span><a href="">Zoom绕后策略绝杀 JDG力克RNG成功晋级</a><span>04-06</span></li>
<li class="content"><span class = "ss">赛事</span><a href="">4月7日SDG挑战TOP 谁将晋级半决赛？</a><span>04-06</span></li>
<li class="content"><span class = "ss">赛事</span><a href="">JDG书写黑八奇迹 RNG惨遭淘汰出局</a><span>04-06</span></li>
<li class="content"><span class = "ss">赛事</span><a href="">EDG彻底告别洲际赛 S赛之路何去何从？</a><span>04-06</span></li>
</ul>
<ul>
<li class="title"><a href="">偷钱爆破乌鸦专治小短手 远程法坦解析</a></li>
<li class="content"><span class = "jx">教学</span><a href="">小丑登顶韩服辅助 冰川减速流全面解析</a><span>04-07</span></li>
<li class="content"><span class = "jx">教学</span><a href="">饮血剑德莱文领衔 9.7五大崛起英雄</a><span>04-07</span></li>
<li class="content"><span class = "jx">教学</span><a href="">9.7版本刺客制霸中路 劫泰隆对线支援两不误</a><span>04-07</span></li>
<li class="content"><span class = "jx">教学</span><a href="">9.7上单英雄全面评级 兰博加强成中流砥柱</a><span>04-06</span></li>
<li class="content"><span class = "jx">教学</span><a href="">9.7七大加强英雄全解析 盖伦领衔上单坦克崛起</a><span>04-06</span></li>
<li class="content"><span class = "jx">教学</span><a href="">9.7版本T1打野盘点！豹女盲僧领衔致胜</a><span>04-05</span></li>
</ul>
<ul>
<li class="title"><a href="">无限乱斗即将结束 说说你心中的OP英雄</a></li>
<li class="content"><span class = "lt">论坛</span><a href="">至臻也没什么难的 亚索都有了</a><span>04-08</span></li>
<li class="content"><span class = "lt">论坛</span><a href="">LOL可以满足你所有想象</a><span>04-02</span></li>
<li class="content"><span class = "lt">论坛</span><a href="">对于支持的战队 你会亲临现场吗</a><span>04-02</span></li>
<li class="content"><span class = "lt">论坛</span><a href="">这样投缘的队友 能不能来4个？</a><span>04-02</span></li>
<li class="content"><span class = "lt">论坛</span><a href="">天使·凯尔 重做攻略 教你快速上手！</a><span>03-28</span></li>
<li class="content"><span class = "lt">论坛</span><a href="">厄加特在野区风生水起 说说你的玩法</a><span>03-28</span></li>
</ul>
</div>
<div class="info-footer">
<span>阅读更多</span><span>最新资讯</span>
<span class = "arrow"></span>
</div>
</section>
<!-- 热门活动 -->
<section class="activity" id = "activity">
<div class="top">
<h2>热门活动</h2>
<div class="top-right" id = "activity_top">
<ul>
<li class = "selected">正在进行</li>
<li>商城特惠</li>
<li>长期活动</li>
</ul>
<div><a>更多<span class="arrow"></span></a></div>
</div>
</div>
<div class="down" id = "activity_down">
<ul class = "selected">
<li>
<div class="mask">
<div class="inner-mask">
<h4>猫狗总动员</h4>
<p>1500喵喵币兑换绒毛 菲兹 至臻</p>
<P>开启时间: 2021-03-28</P>
<div class="mask-box"></div>
</div>
</div>
<div class = "pic"><img src="img/act11.jpg" alt=""></div>
<p>猫狗总动员</p>
<p>限时活动</p>
</li>
<li>
<div class="mask">
<div class="inner-mask">
<h4>猫狗魔法引擎</h4>
<p>100至臻点兑换绒毛菲兹至臻</p>
<P>2021-03-28 - 2021-04-17</P>
<div class="mask-box"></div>
</div>
</div>
<div class = "pic"><img src="img/act12.jpg" alt=""></div>
<p>猫狗魔法引擎</p>
<p>9天后结束</p>
</li>
<li>
<div class="mask">
<div class="inner-mask">
<h4>猫狗大战活动</h4>
<p>收集鱼骨头随机兑换2021猫狗大战在售炫彩皮肤</p>
<P>2021-03-28 - 2021-04-10</P>
<div class="mask-box"></div>
</div>
</div>
<div class = "pic"><img src="img/act13.jpg" alt=""></div>
<p>猫狗大战活动</p>
<p>2天后结束</p>
</li>
<li>
<div class="mask">
<div class="inner-mask">
<h4>LPL六周年同人创作大赛</h4>
<p>描绘出你心目中的LPL梦幻阵容或LPL六周年主题内容，赢取QB和Uzi和JKL参与设计的限量连帽衫</p>
<P>2021-03-14 - 2021-04-14</P>
<div class="mask-box"></div>
</div>
</div>
<div class = "pic"><img src="img/act14.jpg" alt=""></div>
<p>LPL六周年同人创作大赛</p>
<p>6天后结束</p>
</li>
</ul>
<ul>
<li>
<div class="mask">
<div class="inner-mask">
<h4>每周5折</h4>
<p>每周精选英雄/皮肤 5折销售！</p>
<P>2021-04-04 - 2021-04-08</P>
<div class="mask-box"></div>
</div>
</div>
<div class = "pic"><img src="img/act21.jpg" alt=""></div>
<p>每周5折</p>
<p>今天结束</p>
</li>
<li>
<div class="mask">
<div class="inner-mask">
<h4>阿卡丽神秘商店</h4>
<p>试试手气抽取心动折扣</p>
<P>开启时间: 2021-03-27</P>
<div class="mask-box"></div>
</div>
</div>
<div class = "pic"><img src="img/act22.jpg" alt=""></div>
<p>阿卡丽神秘商店</p>
<p>限时活动</p>
</li>
<li>
<div class="mask">
<div class="inner-mask">
<h4>每周5折</h4>
<p>每周精选英雄/皮肤 5折销售！</p>
<P>2021-03-29 - 2021-04-01</P>
<div class="mask-box"></div>
</div>
</div>
<div class = "pic"><img src="img/act23.jpg" alt=""></div>
<p>每周5折</p>
<p>已结束</p>
</li>
<li>
<div class="mask">
<div class="inner-mask">
<h4>每周5折</h4>
<p>每周精选英雄/皮肤 5折销售！</p>
<P>2021-03-08 - 2021-03-11</P>
<div class="mask-box"></div>
</div>
</div>
<div class = "pic"><img src="img/act24.jpg" alt=""></div>
<p>每周5折</p>
<p>已结束</p>
</li>
</ul>
<ul>
<li>
<div class="mask">
<div class="inner-mask">
<h4>福来Day</h4>
<p>每周拼锦鲤赢点券</p>
<P>开启时间: 2021-03-31</P>
<div class="mask-box"></div>
</div>
</div>
<div class = "pic"><img src="img/act31.jpg" alt=""></div>
<p>福来Day</p>
<p>长期活动</p>
</li>
<li>
<div class="mask">
<div class="inner-mask">
<h4>《校园解说大赛》等你发声！</h4>
<p>寻找校园最强赛事解说，助攻你的职业解说梦！</p>
<P>开启时间: 2018-04-16</P>
<div class="mask-box"></div>
</div>
</div>
<div class = "pic"><img src="img/act32.jpg" alt=""></div>
<p>《校园解说大赛》等你发声！</p>
<p>长期活动</p>
</li>
<li>
<div class="mask">
<div class="inner-mask">
<h4>高校自发赛</h4>
<p>举办属于你的校园赛事吧！赛事授权、比赛奖金、比赛服多重支持！</p>
<P>开启时间: 2018-10-12</P>
<div class="mask-box"></div>
</div>
</div>
<div class = "pic"><img src="img/act33.jpg" alt=""></div>
<p>高校自发赛</p>
<p>长期活动</p>
</li>
<li>
<div class="mask">
<div class="inner-mask">
<h4>作者入驻计划</h4>
<p>入驻成为作者，获得内容创作激励与支持。</p>
<P>开启时间: 2018-09-15</P>
<div class="mask-box"></div>
</div>
</div>
<div class = "pic"><img src="img/act34.jpg" alt=""></div>
<p>作者入驻计划</p>
<p>长期活动</p>
</li>
</ul>
</div>
</section>
<!-- 下载界面 -->
<section class="download">
<ul>
<li class="download-game"><a href="">
<video src="img/btn-download.mp4" autoplay loop muted></video>
</a></li>
<li class="p1">
<a href="">新手必备</a>
<div class="guide">
<div><a href=""><span></span>指引</a></div>
<div><a href=""><span></span>礼包</a></div>
</div>
</li>
<li class="p1"><a href="">领取中心</a></li>
<li class="p2"><a href=""><span></span>在线客服</a></li>
<li class="p2"><a href=""><span></span>秩序殿堂</a></li>
<li class="p2"><a href=""><span></span>游戏资料</a></li>
<li class="p2"><a href=""><span></span>峡谷之巅</a></li>
<li class="p3"><a href=""><span></span>微信绑定<div></div></a></li>
<li class="p2"><a href=""><span></span>LOL宇宙</a></li>
<li class="p2"><a href=""><span></span>玩家社区</a></li>
</ul>
</section>
<!-- 版本更新 -->
<section class="update-info">
<div class="hero">
<div class="hero-update">
<img src="img/hero.jpeg" alt="">
<span>英雄更新</span>
<p>“直面白与黑的宿命”</p>
<p>凯尔和莫甘娜重做</p>
</div>
<div class="hero-mask">
<div class="mask"></div>
<p>凯尔和莫甘娜重做</p>
<ul>
<li class = "p1">
难度：
<span></span>
<span></span>
<span></span>
</li>
<li class = "p2">
物理攻击：
<span><span></span></span>
</li>
<li class = "p2">
防御能力：
<span><span></span></span>
</li>
<li class = "p2">
魔法攻击：
<span><span></span></span>
</li>
</ul>
<a href="">查看详情<span class = "arrow"></span></a>
</div>
</div>
<div class="skin">
<div class="skin-update">
<img src="img/skin.jpeg" alt="">
<span>新皮肤</span>
<p>“是时候带TA回家了！”</p>
<p>猫狗大战</p>
</div>
</div>
<div class="version">
<div class="version97">
<img src="img/version1.jpeg" alt="">
</div>
<div class="xiaopao">
<img src="img/version4.jpeg" alt="">
<div>
<div class="version-mask"></div>
<h6>小恶魔 崔丝塔娜：原画&视觉特效</h6>
<p>恶魔之焰，灵魂，探索以及提莫</p>
</div>
</div>
<div class="sell">
<a href=""></a>
</div>
<div class="weekfree">
<span class="left"></span>
周免<span class="arrow"></span>
<span class="right"></span>
<div class="weekfree-list">
<span></span>
<ul>
<li><a href=""><img src="img/hero/1.png" alt=""></a></li>
<li><a href=""><img src="img/hero/2.png" alt=""></a></li>
<li><a href=""><img src="img/hero/3.png" alt=""></a></li>
<li><a href=""><img src="img/hero/4.png" alt=""></a></li>
<li><a href=""><img src="img/hero/5.png" alt=""></a></li>
<li><a href=""><img src="img/hero/6.png" alt=""></a></li>
<li><a href=""><img src="img/hero/7.png" alt=""></a></li>
<li><a href=""><img src="img/hero/8.png" alt=""></a></li>
<li><a href=""><img src="img/hero/9.png" alt=""></a></li>
<li><a href=""><img src="img/hero/10.png" alt=""></a></li>
<li><a href=""><img src="img/hero/11.png" alt=""></a></li>
<li><a href=""><img src="img/hero/12.png" alt=""></a></li>
<li><a href=""><img src="img/hero/13.png" alt=""></a></li>
<li><a href=""><img src="img/hero/14.png" alt=""></a></li>
</ul>
</div>
</div>
</div>
<div class="more-skin">
<ul>
<li><img src="img/hero/more1.jpeg" alt=""><p>猫狗大战</p></li>
<li><img src="img/hero/more2.jpeg" alt=""><p>苍穹之光 布兰德</p></li>
<li><img src="img/hero/more3.jpeg" alt=""><p>千纸传说</p></li>
<li><img src="img/hero/more4.jpeg" alt=""><p>2021情人节</p></li>
<li><img src="img/hero/more5.jpeg" alt=""><p>2021新春限定</p></li>
<li><img src="img/hero/more6.jpeg" alt=""><p>腥红之月2021</p></li>
<li><img src="img/hero/more7.jpeg" alt=""><p>2018冰雪节皮肤</p></li>
</ul>
</div>
</section>
</section>
<!-- 视频区 -->
<div class = "video-wrap">
<div class="wrap">
<!-- 最新视频 -->
<section class="video" id = "video">
<div class="top">
<h2>最新视频</h2>
<div class="top-right" id = "activity_top">
<ul>
<li class = "selected">推荐</li>
<li>官方</li>
<li>娱乐</li>
<li>赛事</li>
<li>教学</li>
</ul>
<div><a>更多<span class="arrow"></span></a></div>
</div>
</div>
<div class="down">
<ul>
<li>
<div class="video-pic">
<img src="img/video1.jpeg" alt="">
<span class= "length">03:04</span>
</div>
<p>2021LPL春季赛季后赛毒奶（上）</p>
<div>
<span class="click">1.5万次播放</span>
<span class="time">2021-04-03</span>
</div>
</li>
<li>
<div class="video-pic">
<img src="img/video2.jpeg" alt="">
<span class= "length">01:58</span>
</div>
<p>痛苦之拥-K/DA至臻皮肤效果展示</p>
<div>
<span class="click">9.9万次播放</span>
<span class="time">2021-04-03</span>
</div>
</li>
<li>
<div class="video-pic">
<img src="img/video3.jpeg" alt="">
<span class= "length">10:23</span>
</div>
<p>LOL极限对战集锦：高能VN极限走位取五杀</p>
<div>
<span class="click">32万次播放</span>
<span class="time">2021-04-03</span>
</div>
</li>
<li>
<div class="video-pic">
<img src="img/video4.jpeg" alt="">
<span class= "length">08:24</span>
</div>
<p>联盟套路王 06 快速满征服者强势对拼 神超不当人打野</p>
<div>
<span class="click">1.7万次播放</span>
<span class="time">2021-04-08</span>
</div>
</li>
<li>
<div class="video-pic">
<img src="img/video6.jpeg" alt="">
<span class= "length">13:21</span>
</div>
<p>LOL版本抢先看：9.7版本坦系增强 灌篮高手热血来袭！</p>
<div>
<span class="click">938次播放</span>
<span class="time">2021-04-11</span>
</div>
</li>
<li>
<div class="video-pic">
<img src="img/video5.jpeg" alt="">
<span class= "length">06:41</span>
</div>
<p>峡谷TOP5：武器大师天神下凡 一锤五豪取5杀</p>
<div>
<span class="click">2176次播放</span>
<span class="time">2021-04-06</span>
</div>
</li>
<li>
<div class="video-pic">
<img src="img/video7.jpeg" alt="">
<span class= "length">02:29</span>
</div>
<p>版本热门上单人马两大重要对线细节解析</p>
<div>
<span class="click">1942次播放</span>
<span class="time">2021-04-01</span>
</div>
</li>
<li>
<div class="video-pic">
<img src="img/video8.jpeg" alt="">
<span class= "length">02:46</span>
</div>
<p>LOL联盟小技巧：9.7版本蒙多强势称霸，劫大招仅26</p>
<div>
<span class="click">1263次播放</span>
<span class="time">2021-04-07</span>
</div>
</li>
</ul>
</div>
</section>
<!-- 热门专辑 -->
<section class="alblum" id = "alblum">
<div class="top">
<h2>热门专辑</h2>
<div class="top-right" id = "activity_top">
<ul>
<li class = "selected">周一</li>
<li>周二</li>
<li>周三</li>
<li>周四</li>
<li>周五</li>
<li>周六</li>
<li>周日</li>
</ul>
</div>
</div>
<div class="middle" id = "alblum_middle">
<div class="middle-wrap">
<ul class = "alblum-selected">
<li>
<div class="alblum-pic">
<img src="img/alb1.jpg" alt="">
<div class="word">
<p>主播日报</p>
<p>2021-04-09更新</p>
</div>
</div>
<p>主播每日搞笑镜头集锦。</p>
<div class="alblum-author"><span><img src="img/head1.jpg" alt=""></span>兔玩LOL</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb3.png" alt="">
<div class="word">
<p>巅峰top5</p>
<p>2021-04-07更新</p>
</div>
</div>
<p>巅峰top5是一档精彩英雄联盟赛事集锦节目，为广大玩家带来每日LPL比赛精彩镜头</p>
<div class="alblum-author"><span><img src="img/head3.webp" alt=""></span>飞熊TV英雄联盟</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb2.jpg" alt="">
<div class="word">
<p>赛场狂秀</p>
<p>2021-04-01更新</p>
</div>
</div>
<p>LCK赛场精彩操作TOP10</p>
<div class="alblum-author"><span><img src="img/head2.webp" alt=""></span>暴龙电竞官方号</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb4.png" alt="">
<div class="word">
<p>撸神别搞事儿</p>
<p>2021-03-18更新</p>
</div>
</div>
<p>大神翻车，高玩跳水，路人表演，青铜绝活，一分钟让你笑个不停！撸神别搞事儿，浓缩的都是精华！</p>
<div class="alblum-author"><span><img src="img/head4.webp" alt=""></span>电竞动物园</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb5.jpg" alt="">
<div class="word">
<p>虎牙一周秀</p>
<p>2021-04-09更新</p>
</div>
</div>
<p>每周二悄悄更新，更多匪夷所思、令人瞠目结舌的操作等你来发掘。</p>
<div class="alblum-author"><span><img src="img/head5.png" alt=""></span>虎牙直播LOL</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb7.jpg" alt="">
<div class="word">
<p>教你一招</p>
<p>2021-04-04更新</p>
</div>
</div>
<p>每周教你一招，学不完用不尽的超级套路！</p>
<div class="alblum-author"><span><img src="img/head7.jpg" alt=""></span>掌盟教你一招</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb8.jpg" alt="">
<div class="word">
<p>青铜组的搞笑时刻</p>
<p>2021-04-05更新</p>
</div>
</div>
<p>青铜组选手又出古怪骚操作？让你笑到停不下来！</p>
<div class="alblum-author"><span><img src="img/head8.webp" alt=""></span>木木不哭官方号</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb10.jpg" alt="">
<div class="word">
<p>徐老师来巡山</p>
<p>2021-04-7更新</p>
</div>
</div>
<p>徐老师继《LOL三十六计》《进击的小学生》之后出品的全新英雄联盟搞笑系列巨作，保留了一贯的独特风格，每周精选最精彩的搞笑镜头。</p>
<div class="alblum-author"><span><img src="img/head10.jpg" alt=""></span>LOL徐老师</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb1.jpg" alt="">
<div class="word">
<p>主播日报</p>
<p>2021-04-09更新</p>
</div>
</div>
<p>主播每日搞笑镜头集锦。</p>
<div class="alblum-author"><span><img src="img/head1.jpg" alt=""></span>兔玩LOL</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb3.png" alt="">
<div class="word">
<p>巅峰top5</p>
<p>2021-04-07更新</p>
</div>
</div>
<p>巅峰top5是一档精彩英雄联盟赛事集锦节目，为广大玩家带来每日LPL比赛精彩镜头</p>
<div class="alblum-author"><span><img src="img/head3.webp" alt=""></span>飞熊TV英雄联盟</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb2.jpg" alt="">
<div class="word">
<p>赛场狂秀</p>
<p>2021-04-01更新</p>
</div>
</div>
<p>LCK赛场精彩操作TOP10</p>
<div class="alblum-author"><span><img src="img/head2.webp" alt=""></span>暴龙电竞官方号</div>
</li>
</ul>
<ul>
<li>
<div class="alblum-pic">
<img src="img/alb1.jpg" alt="">
<div class="word">
<p>主播日报</p>
<p>2021-04-09更新</p>
</div>
</div>
<p>主播每日搞笑镜头集锦。</p>
<div class="alblum-author"><span><img src="img/head1.jpg" alt=""></span>兔玩LOL</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb3.png" alt="">
<div class="word">
<p>巅峰top5</p>
<p>2021-04-07更新</p>
</div>
</div>
<p>巅峰top5是一档精彩英雄联盟赛事集锦节目，为广大玩家带来每日LPL比赛精彩镜头</p>
<div class="alblum-author"><span><img src="img/head3.webp" alt=""></span>飞熊TV英雄联盟</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb2.jpg" alt="">
<div class="word">
<p>赛场狂秀</p>
<p>2021-04-01更新</p>
</div>
</div>
<p>LCK赛场精彩操作TOP10</p>
<div class="alblum-author"><span><img src="img/head2.webp" alt=""></span>暴龙电竞官方号</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb4.png" alt="">
<div class="word">
<p>撸神别搞事儿</p>
<p>2021-03-18更新</p>
</div>
</div>
<p>大神翻车，高玩跳水，路人表演，青铜绝活，一分钟让你笑个不停！撸神别搞事儿，浓缩的都是精华！</p>
<div class="alblum-author"><span><img src="img/head4.webp" alt=""></span>电竞动物园</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb5.jpg" alt="">
<div class="word">
<p>虎牙一周秀</p>
<p>2021-04-09更新</p>
</div>
</div>
<p>每周二悄悄更新，更多匪夷所思、令人瞠目结舌的操作等你来发掘。</p>
<div class="alblum-author"><span><img src="img/head5.png" alt=""></span>虎牙直播LOL</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb6.jpg" alt="">
<div class="word">
<p>神探苍赛事比比叨</p>
<p>2021-04-02更新</p>
</div>
</div>
<p>神探苍解析赛事热点畅聊电竞八卦</p>
<div class="alblum-author"><span><img src="img/head6.webp" alt=""></span>小苍mm</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb7.jpg" alt="">
<div class="word">
<p>教你一招</p>
<p>2021-04-04更新</p>
</div>
</div>
<p>每周教你一招，学不完用不尽的超级套路！</p>
<div class="alblum-author"><span><img src="img/head7.jpg" alt=""></span>掌盟教你一招</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb8.jpg" alt="">
<div class="word">
<p>青铜组的搞笑时刻</p>
<p>2021-04-05更新</p>
</div>
</div>
<p>青铜组选手又出古怪骚操作？让你笑到停不下来！</p>
<div class="alblum-author"><span><img src="img/head8.webp" alt=""></span>木木不哭官方号</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb8.jpg" alt="">
<div class="word">
<p>起小点TOP10</p>
<p>2021-04-10更新</p>
</div>
</div>
<p>起小点TOP10集合国服/外服一周的精彩操作镜头</p>
<div class="alblum-author"><span><img src="img/head9.jpg" alt=""></span>联盟是大腿</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb10.jpg" alt="">
<div class="word">
<p>徐老师来巡山</p>
<p>2021-04-7更新</p>
</div>
</div>
<p>徐老师继《LOL三十六计》《进击的小学生》之后出品的全新英雄联盟搞笑系列巨作，保留了一贯的独特风格，每周精选最精彩的搞笑镜头。</p>
<div class="alblum-author"><span><img src="img/head10.jpg" alt=""></span>LOL徐老师</div>
</li>
</ul>
<ul>
<li>
<div class="alblum-pic">
<img src="img/alb1.jpg" alt="">
<div class="word">
<p>主播日报</p>
<p>2021-04-09更新</p>
</div>
</div>
<p>主播每日搞笑镜头集锦。</p>
<div class="alblum-author"><span><img src="img/head1.jpg" alt=""></span>兔玩LOL</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb3.png" alt="">
<div class="word">
<p>巅峰top5</p>
<p>2021-04-07更新</p>
</div>
</div>
<p>巅峰top5是一档精彩英雄联盟赛事集锦节目，为广大玩家带来每日LPL比赛精彩镜头</p>
<div class="alblum-author"><span><img src="img/head3.webp" alt=""></span>飞熊TV英雄联盟</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb2.jpg" alt="">
<div class="word">
<p>赛场狂秀</p>
<p>2021-04-01更新</p>
</div>
</div>
<p>LCK赛场精彩操作TOP10</p>
<div class="alblum-author"><span><img src="img/head2.webp" alt=""></span>暴龙电竞官方号</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb4.png" alt="">
<div class="word">
<p>撸神别搞事儿</p>
<p>2021-03-18更新</p>
</div>
</div>
<p>大神翻车，高玩跳水，路人表演，青铜绝活，一分钟让你笑个不停！撸神别搞事儿，浓缩的都是精华！</p>
<div class="alblum-author"><span><img src="img/head4.webp" alt=""></span>电竞动物园</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb5.jpg" alt="">
<div class="word">
<p>虎牙一周秀</p>
<p>2021-04-09更新</p>
</div>
</div>
<p>每周二悄悄更新，更多匪夷所思、令人瞠目结舌的操作等你来发掘。</p>
<div class="alblum-author"><span><img src="img/head5.png" alt=""></span>虎牙直播LOL</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb6.jpg" alt="">
<div class="word">
<p>神探苍赛事比比叨</p>
<p>2021-04-02更新</p>
</div>
</div>
<p>神探苍解析赛事热点畅聊电竞八卦</p>
<div class="alblum-author"><span><img src="img/head6.webp" alt=""></span>小苍mm</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb7.jpg" alt="">
<div class="word">
<p>教你一招</p>
<p>2021-04-04更新</p>
</div>
</div>
<p>每周教你一招，学不完用不尽的超级套路！</p>
<div class="alblum-author"><span><img src="img/head7.jpg" alt=""></span>掌盟教你一招</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb8.jpg" alt="">
<div class="word">
<p>青铜组的搞笑时刻</p>
<p>2021-04-05更新</p>
</div>
</div>
<p>青铜组选手又出古怪骚操作？让你笑到停不下来！</p>
<div class="alblum-author"><span><img src="img/head8.webp" alt=""></span>木木不哭官方号</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb8.jpg" alt="">
<div class="word">
<p>起小点TOP10</p>
<p>2021-04-10更新</p>
</div>
</div>
<p>起小点TOP10集合国服/外服一周的精彩操作镜头</p>
<div class="alblum-author"><span><img src="img/head9.jpg" alt=""></span>联盟是大腿</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb10.jpg" alt="">
<div class="word">
<p>徐老师来巡山</p>
<p>2021-04-7更新</p>
</div>
</div>
<p>徐老师继《LOL三十六计》《进击的小学生》之后出品的全新英雄联盟搞笑系列巨作，保留了一贯的独特风格，每周精选最精彩的搞笑镜头。</p>
<div class="alblum-author"><span><img src="img/head10.jpg" alt=""></span>LOL徐老师</div>
</li>
</ul>
<ul>
<li>
<div class="alblum-pic">
<img src="img/alb1.jpg" alt="">
<div class="word">
<p>主播日报</p>
<p>2021-04-09更新</p>
</div>
</div>
<p>主播每日搞笑镜头集锦。</p>
<div class="alblum-author"><span><img src="img/head1.jpg" alt=""></span>兔玩LOL</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb3.png" alt="">
<div class="word">
<p>巅峰top5</p>
<p>2021-04-07更新</p>
</div>
</div>
<p>巅峰top5是一档精彩英雄联盟赛事集锦节目，为广大玩家带来每日LPL比赛精彩镜头</p>
<div class="alblum-author"><span><img src="img/head3.webp" alt=""></span>飞熊TV英雄联盟</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb2.jpg" alt="">
<div class="word">
<p>赛场狂秀</p>
<p>2021-04-01更新</p>
</div>
</div>
<p>LCK赛场精彩操作TOP10</p>
<div class="alblum-author"><span><img src="img/head2.webp" alt=""></span>暴龙电竞官方号</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb4.png" alt="">
<div class="word">
<p>撸神别搞事儿</p>
<p>2021-03-18更新</p>
</div>
</div>
<p>大神翻车，高玩跳水，路人表演，青铜绝活，一分钟让你笑个不停！撸神别搞事儿，浓缩的都是精华！</p>
<div class="alblum-author"><span><img src="img/head4.webp" alt=""></span>电竞动物园</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb5.jpg" alt="">
<div class="word">
<p>虎牙一周秀</p>
<p>2021-04-09更新</p>
</div>
</div>
<p>每周二悄悄更新，更多匪夷所思、令人瞠目结舌的操作等你来发掘。</p>
<div class="alblum-author"><span><img src="img/head5.png" alt=""></span>虎牙直播LOL</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb6.jpg" alt="">
<div class="word">
<p>神探苍赛事比比叨</p>
<p>2021-04-02更新</p>
</div>
</div>
<p>神探苍解析赛事热点畅聊电竞八卦</p>
<div class="alblum-author"><span><img src="img/head6.webp" alt=""></span>小苍mm</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb7.jpg" alt="">
<div class="word">
<p>教你一招</p>
<p>2021-04-04更新</p>
</div>
</div>
<p>每周教你一招，学不完用不尽的超级套路！</p>
<div class="alblum-author"><span><img src="img/head7.jpg" alt=""></span>掌盟教你一招</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb8.jpg" alt="">
<div class="word">
<p>青铜组的搞笑时刻</p>
<p>2021-04-05更新</p>
</div>
</div>
<p>青铜组选手又出古怪骚操作？让你笑到停不下来！</p>
<div class="alblum-author"><span><img src="img/head8.webp" alt=""></span>木木不哭官方号</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb8.jpg" alt="">
<div class="word">
<p>起小点TOP10</p>
<p>2021-04-10更新</p>
</div>
</div>
<p>起小点TOP10集合国服/外服一周的精彩操作镜头</p>
<div class="alblum-author"><span><img src="img/head9.jpg" alt=""></span>联盟是大腿</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb10.jpg" alt="">
<div class="word">
<p>徐老师来巡山</p>
<p>2021-04-7更新</p>
</div>
</div>
<p>徐老师继《LOL三十六计》《进击的小学生》之后出品的全新英雄联盟搞笑系列巨作，保留了一贯的独特风格，每周精选最精彩的搞笑镜头。</p>
<div class="alblum-author"><span><img src="img/head10.jpg" alt=""></span>LOL徐老师</div>
</li>
</ul>
<ul>
<li>
<div class="alblum-pic">
<img src="img/alb1.jpg" alt="">
<div class="word">
<p>主播日报</p>
<p>2021-04-09更新</p>
</div>
</div>
<p>主播每日搞笑镜头集锦。</p>
<div class="alblum-author"><span><img src="img/head1.jpg" alt=""></span>兔玩LOL</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb3.png" alt="">
<div class="word">
<p>巅峰top5</p>
<p>2021-04-07更新</p>
</div>
</div>
<p>巅峰top5是一档精彩英雄联盟赛事集锦节目，为广大玩家带来每日LPL比赛精彩镜头</p>
<div class="alblum-author"><span><img src="img/head3.webp" alt=""></span>飞熊TV英雄联盟</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb2.jpg" alt="">
<div class="word">
<p>赛场狂秀</p>
<p>2021-04-01更新</p>
</div>
</div>
<p>LCK赛场精彩操作TOP10</p>
<div class="alblum-author"><span><img src="img/head2.webp" alt=""></span>暴龙电竞官方号</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb4.png" alt="">
<div class="word">
<p>撸神别搞事儿</p>
<p>2021-03-18更新</p>
</div>
</div>
<p>大神翻车，高玩跳水，路人表演，青铜绝活，一分钟让你笑个不停！撸神别搞事儿，浓缩的都是精华！</p>
<div class="alblum-author"><span><img src="img/head4.webp" alt=""></span>电竞动物园</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb5.jpg" alt="">
<div class="word">
<p>虎牙一周秀</p>
<p>2021-04-09更新</p>
</div>
</div>
<p>每周二悄悄更新，更多匪夷所思、令人瞠目结舌的操作等你来发掘。</p>
<div class="alblum-author"><span><img src="img/head5.png" alt=""></span>虎牙直播LOL</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb6.jpg" alt="">
<div class="word">
<p>神探苍赛事比比叨</p>
<p>2021-04-02更新</p>
</div>
</div>
<p>神探苍解析赛事热点畅聊电竞八卦</p>
<div class="alblum-author"><span><img src="img/head6.webp" alt=""></span>小苍mm</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb7.jpg" alt="">
<div class="word">
<p>教你一招</p>
<p>2021-04-04更新</p>
</div>
</div>
<p>每周教你一招，学不完用不尽的超级套路！</p>
<div class="alblum-author"><span><img src="img/head7.jpg" alt=""></span>掌盟教你一招</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb8.jpg" alt="">
<div class="word">
<p>青铜组的搞笑时刻</p>
<p>2021-04-05更新</p>
</div>
</div>
<p>青铜组选手又出古怪骚操作？让你笑到停不下来！</p>
<div class="alblum-author"><span><img src="img/head8.webp" alt=""></span>木木不哭官方号</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb8.jpg" alt="">
<div class="word">
<p>起小点TOP10</p>
<p>2021-04-10更新</p>
</div>
</div>
<p>起小点TOP10集合国服/外服一周的精彩操作镜头</p>
<div class="alblum-author"><span><img src="img/head9.jpg" alt=""></span>联盟是大腿</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb10.jpg" alt="">
<div class="word">
<p>徐老师来巡山</p>
<p>2021-04-7更新</p>
</div>
</div>
<p>徐老师继《LOL三十六计》《进击的小学生》之后出品的全新英雄联盟搞笑系列巨作，保留了一贯的独特风格，每周精选最精彩的搞笑镜头。</p>
<div class="alblum-author"><span><img src="img/head10.jpg" alt=""></span>LOL徐老师</div>
</li>
</ul>
<ul>
<li>
<div class="alblum-pic">
<img src="img/alb1.jpg" alt="">
<div class="word">
<p>主播日报</p>
<p>2021-04-09更新</p>
</div>
</div>
<p>主播每日搞笑镜头集锦。</p>
<div class="alblum-author"><span><img src="img/head1.jpg" alt=""></span>兔玩LOL</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb3.png" alt="">
<div class="word">
<p>巅峰top5</p>
<p>2021-04-07更新</p>
</div>
</div>
<p>巅峰top5是一档精彩英雄联盟赛事集锦节目，为广大玩家带来每日LPL比赛精彩镜头</p>
<div class="alblum-author"><span><img src="img/head3.webp" alt=""></span>飞熊TV英雄联盟</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb2.jpg" alt="">
<div class="word">
<p>赛场狂秀</p>
<p>2021-04-01更新</p>
</div>
</div>
<p>LCK赛场精彩操作TOP10</p>
<div class="alblum-author"><span><img src="img/head2.webp" alt=""></span>暴龙电竞官方号</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb4.png" alt="">
<div class="word">
<p>撸神别搞事儿</p>
<p>2021-03-18更新</p>
</div>
</div>
<p>大神翻车，高玩跳水，路人表演，青铜绝活，一分钟让你笑个不停！撸神别搞事儿，浓缩的都是精华！</p>
<div class="alblum-author"><span><img src="img/head4.webp" alt=""></span>电竞动物园</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb5.jpg" alt="">
<div class="word">
<p>虎牙一周秀</p>
<p>2021-04-09更新</p>
</div>
</div>
<p>每周二悄悄更新，更多匪夷所思、令人瞠目结舌的操作等你来发掘。</p>
<div class="alblum-author"><span><img src="img/head5.png" alt=""></span>虎牙直播LOL</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb6.jpg" alt="">
<div class="word">
<p>神探苍赛事比比叨</p>
<p>2021-04-02更新</p>
</div>
</div>
<p>神探苍解析赛事热点畅聊电竞八卦</p>
<div class="alblum-author"><span><img src="img/head6.webp" alt=""></span>小苍mm</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb7.jpg" alt="">
<div class="word">
<p>教你一招</p>
<p>2021-04-04更新</p>
</div>
</div>
<p>每周教你一招，学不完用不尽的超级套路！</p>
<div class="alblum-author"><span><img src="img/head7.jpg" alt=""></span>掌盟教你一招</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb8.jpg" alt="">
<div class="word">
<p>青铜组的搞笑时刻</p>
<p>2021-04-05更新</p>
</div>
</div>
<p>青铜组选手又出古怪骚操作？让你笑到停不下来！</p>
<div class="alblum-author"><span><img src="img/head8.webp" alt=""></span>木木不哭官方号</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb8.jpg" alt="">
<div class="word">
<p>起小点TOP10</p>
<p>2021-04-10更新</p>
</div>
</div>
<p>起小点TOP10集合国服/外服一周的精彩操作镜头</p>
<div class="alblum-author"><span><img src="img/head9.jpg" alt=""></span>联盟是大腿</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb10.jpg" alt="">
<div class="word">
<p>徐老师来巡山</p>
<p>2021-04-7更新</p>
</div>
</div>
<p>徐老师继《LOL三十六计》《进击的小学生》之后出品的全新英雄联盟搞笑系列巨作，保留了一贯的独特风格，每周精选最精彩的搞笑镜头。</p>
<div class="alblum-author"><span><img src="img/head10.jpg" alt=""></span>LOL徐老师</div>
</li>
</ul>
<ul>
<li>
<div class="alblum-pic">
<img src="img/alb1.jpg" alt="">
<div class="word">
<p>主播日报</p>
<p>2021-04-09更新</p>
</div>
</div>
<p>主播每日搞笑镜头集锦。</p>
<div class="alblum-author"><span><img src="img/head1.jpg" alt=""></span>兔玩LOL</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb3.png" alt="">
<div class="word">
<p>巅峰top5</p>
<p>2021-04-07更新</p>
</div>
</div>
<p>巅峰top5是一档精彩英雄联盟赛事集锦节目，为广大玩家带来每日LPL比赛精彩镜头</p>
<div class="alblum-author"><span><img src="img/head3.webp" alt=""></span>飞熊TV英雄联盟</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb2.jpg" alt="">
<div class="word">
<p>赛场狂秀</p>
<p>2021-04-01更新</p>
</div>
</div>
<p>LCK赛场精彩操作TOP10</p>
<div class="alblum-author"><span><img src="img/head2.webp" alt=""></span>暴龙电竞官方号</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb4.png" alt="">
<div class="word">
<p>撸神别搞事儿</p>
<p>2021-03-18更新</p>
</div>
</div>
<p>大神翻车，高玩跳水，路人表演，青铜绝活，一分钟让你笑个不停！撸神别搞事儿，浓缩的都是精华！</p>
<div class="alblum-author"><span><img src="img/head4.webp" alt=""></span>电竞动物园</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb5.jpg" alt="">
<div class="word">
<p>虎牙一周秀</p>
<p>2021-04-09更新</p>
</div>
</div>
<p>每周二悄悄更新，更多匪夷所思、令人瞠目结舌的操作等你来发掘。</p>
<div class="alblum-author"><span><img src="img/head5.png" alt=""></span>虎牙直播LOL</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb6.jpg" alt="">
<div class="word">
<p>神探苍赛事比比叨</p>
<p>2021-04-02更新</p>
</div>
</div>
<p>神探苍解析赛事热点畅聊电竞八卦</p>
<div class="alblum-author"><span><img src="img/head6.webp" alt=""></span>小苍mm</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb7.jpg" alt="">
<div class="word">
<p>教你一招</p>
<p>2021-04-04更新</p>
</div>
</div>
<p>每周教你一招，学不完用不尽的超级套路！</p>
<div class="alblum-author"><span><img src="img/head7.jpg" alt=""></span>掌盟教你一招</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb8.jpg" alt="">
<div class="word">
<p>青铜组的搞笑时刻</p>
<p>2021-04-05更新</p>
</div>
</div>
<p>青铜组选手又出古怪骚操作？让你笑到停不下来！</p>
<div class="alblum-author"><span><img src="img/head8.webp" alt=""></span>木木不哭官方号</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb8.jpg" alt="">
<div class="word">
<p>起小点TOP10</p>
<p>2021-04-10更新</p>
</div>
</div>
<p>起小点TOP10集合国服/外服一周的精彩操作镜头</p>
<div class="alblum-author"><span><img src="img/head9.jpg" alt=""></span>联盟是大腿</div>
</li>
<li>
<div class="alblum-pic">
<img src="img/alb10.jpg" alt="">
<div class="word">
<p>徐老师来巡山</p>
<p>2021-04-7更新</p>
</div>
</div>
<p>徐老师继《LOL三十六计》《进击的小学生》之后出品的全新英雄联盟搞笑系列巨作，保留了一贯的独特风格，每周精选最精彩的搞笑镜头。</p>
<div class="alblum-author"><span><img src="img/head10.jpg" alt=""></span>LOL徐老师</div>
</li>
</ul>
</div>
<div class="left-btn"></div>
<div class="right-btn"></div>
</div>
<div class="down">
前往视频中心<span class="arrow"></span>
</div>
</section>
</div>
</div>
<!-- 赛事中心 -->
<section class="champion" id = "champion">
<div class="champion-wrap">
<div class="champion-head">
<div class="top">
<h2>赛事中心</h2>
<div class="top-right" id = "champion_top">
<ul>
<li class = "selected">春季赛常规赛</li>
<li>春季赛季后赛</li>
</ul>
<div><a>更多<span class="arrow"></span></a></div>
<a href=""><span></span>2021LPL春季赛</a>
</div>
</div>
</div>
<div class="content">
<div style = "display: block" class="champion-content" id = "champion_content">
<div class="contestant">
<div class="ul-wraper">
<ul>
<li>
<div class="game-status">
<p>已结束</p>
<p>19:00</p>
<p>3-15</p>
</div>
<div class="compete-wrap">
<div class="competeA">
<span><img src="img/contestant/1.png" alt="IG"></span>
<p>IG</p>
</div>
<div class="competeB">
<span><img src="img/contestant/2.png" alt="IG"></span>
<p>VG</p>
</div>
<div class="score">2:0</div>
<div class="video-back">视频回顾</div>
</div>
<p class="match-name">2021职业联赛</p>
<p class="match-num">春季赛常规赛 第八周 BO3</p>
</li>
<li>
<div class="game-status">
<p>已结束</p>
<p>14:00</p>
<p>3-16</p>
</div>
<div class="compete-wrap">
<div class="competeA">
<span><img src="img/contestant/3.png" alt="IG"></span>
<p>V5</p>
</div>
<div class="competeB">
<span><img src="img/contestant/4.png" alt="IG"></span>
<p>WE</p>
</div>
<div class="score">0:2</div>
<div class="video-back">视频回顾</div>
</div>
<p class="match-name">2021职业联赛</p>
<p class="match-num">春季赛常规赛 第八周 BO3</p>
</li>
<li>
<div class="game-status">
<p>已结束</p>
<p>17:00</p>
<p>3-16</p>
</div>
<div class="compete-wrap">
<div class="competeA">
<span><img src="img/contestant/5.png" alt="IG"></span>
<p>RW</p>
</div>
<div class="competeB">
<span><img src="img/contestant/6.png" alt="IG"></span>
<p>TOP</p>
</div>
<div class="score">0:2</div>
<div class="video-back">视频回顾</div>
</div>
<p class="match-name">2021职业联赛</p>
<p class="match-num">春季赛常规赛 第八周 BO3</p>
</li>
<li>
<div class="game-status">
<p>已结束</p>
<p>19:00</p>
<p>3-16</p>
</div>
<div class="compete-wrap">
<div class="competeA">
<span><img src="img/contestant/7.png" alt="IG"></span>
<p>JDG</p>
</div>
<div class="competeB">
<span><img src="img/contestant/8.png" alt="IG"></span>
<p>SN</p>
</div>
<div class="score">2:1</div>
<div class="video-back">视频回顾</div>
</div>
<p class="match-name">2021职业联赛</p>
<p class="match-num">春季赛常规赛 第八周 BO3</p>
</li>
<li>
<div class="game-status">
<p>已结束</p>
<p>14:00</p>
<p>3-17</p>
</div>
<div class="compete-wrap">
<div class="competeA">
<span><img src="img/contestant/9.png" alt="IG"></span>
<p>LGD</p>
</div>
<div class="competeB">
<span><img src="img/contestant/10.png" alt="IG"></span>
<p>OMG</p>
</div>
<div class="score">2:1</div>
<div class="video-back">视频回顾</div>
</div>
<p class="match-name">2021职业联赛</p>
<p class="match-num">春季赛常规赛 第八周 BO3</p>
</li>
<li>
<div class="game-status">
<p>已结束</p>
<p>17:00</p>
<p>3-17</p>
</div>
<div class="compete-wrap">
<div class="competeA">
<span><img src="img/contestant/11.png" alt="IG"></span>
<p>RNG</p>
</div>
<div class="competeB">
<span><img src="img/contestant/12.png" alt="IG"></span>
<p>BLG</p>
</div>
<div class="score">2:1</div>
<div class="video-back">视频回顾</div>
</div>
<p class="match-name">2021职业联赛</p>
<p class="match-num">春季赛常规赛 第八周 BO3</p>
</li>
<li>
<div class="game-status">
<p>已结束</p>
<p>17:00</p>
<p>3-18</p>
</div>
<div class="compete-wrap">
<div class="competeA">
<span><img src="img/contestant/5.png" alt="IG"></span>
<p>RW</p>
</div>
<div class="competeB">
<span><img src="img/contestant/2.png" alt="IG"></span>
<p>VG</p>
</div>
<div class="score">2:1</div>
<div class="video-back">视频回顾</div>
</div>
<p class="match-name">2021职业联赛</p>
<p class="match-num">春季赛常规赛 第八周 BO3</p>
</li>
<li>
<div class="game-status">
<p>已结束</p>
<p>19:00</p>
<p>3-18</p>
</div>
<div class="compete-wrap">
<div class="competeA">
<span><img src="img/contestant/7.png" alt="IG"></span>
<p>JDG</p>
</div>
<div class="competeB">
<span><img src="img/contestant/15.png" alt="IG"></span>
<p>SS</p>
</div>
<div class="score">2:0</div>
<div class="video-back">视频回顾</div>
</div>
<p class="match-name">2021职业联赛</p>
<p class="match-num">春季赛常规赛 第八周 BO3</p>
</li>
<li>
<div class="game-status">
<p>已结束</p>
<p>17:00</p>
<p>3-19</p>
</div>
<div class="compete-wrap">
<div class="competeA">
<span><img src="img/contestant/3.png" alt="IG"></span>
<p>V5</p>
</div>
<div class="competeB">
<span><img src="img/contestant/14.png" alt="IG"></span>
<p>SDG</p>
</div>
<div class="score">0:2</div>
<div class="video-back">视频回顾</div>
</div>
<p class="match-name">2021职业联赛</p>
<p class="match-num">春季赛常规赛 第八周 BO3</p>
</li>
<li>
<div class="game-status">
<p>已结束</p>
<p>19:00</p>
<p>3-19</p>
</div>
<div class="compete-wrap">
<div class="competeA">
<span><img src="img/contestant/7.png" alt="IG"></span>
<p>JDG</p>
</div>
<div class="competeB">
<span><img src="img/contestant/8.png" alt="IG"></span>
<p>SN</p>
</div>
<div class="score">2:1</div>
<div class="video-back">视频回顾</div>
</div>
<p class="match-name">2021职业联赛</p>
<p class="match-num">春季赛常规赛 第八周 BO3</p>
</li>
</li>
<li>
<div class="game-status">
<p>已结束</p>
<p>19:00</p>
<p>3-19</p>
</div>
<div class="compete-wrap">
<div class="competeA">
<span><img src="img/contestant/4.png" alt="IG"></span>
<p>WE</p>
</div>
<div class="competeB">
<span><img src="img/contestant/6.png" alt="IG"></span>
<p>TOP</p>
</div>
<div class="score">2:1</div>
<div class="video-back">视频回顾</div>
</div>
<p class="match-name">2021职业联赛</p>
<p class="match-num">春季赛常规赛 第八周 BO3</p>
</li>
<li>
<div class="game-status">
<p>已结束</p>
<p>17:00</p>
<p>3-20</p>
</div>
<div class="compete-wrap">
<div class="competeA">
<span><img src="img/contestant/16.png" alt="IG"></span>
<p>EDG</p>
</div>
<div class="competeB">
<span><img src="img/contestant/12.png" alt="IG"></span>
<p>BLG</p>
</div>
<div class="score">1:2</div>
<div class="video-back">视频回顾</div>
</div>
<p class="match-name">2021职业联赛</p>
<p class="match-num">春季赛常规赛 第八周 BO3</p>
</li>
<li>
<div class="game-status">
<p>已结束</p>
<p>19:00</p>
<p>3-20</p>
</div>
<div class="compete-wrap">
<div class="competeA">
<span><img src="img/contestant/11.png" alt="IG"></span>
<p>RNG</p>
</div>
<div class="competeB">
<span><img src="img/contestant/7.png" alt="IG"></span>
<p>JDG</p>
</div>
<div class="score">2:1</div>
<div class="video-back">视频回顾</div>
</div>
<p class="match-name">2021职业联赛</p>
<p class="match-num">春季赛常规赛 第八周 BO3</p>
</li>
<li>
<div class="game-status">
<p>已结束</p>
<p>17:00</p>
<p>3-22</p>
</div>
<div class="compete-wrap">
<div class="competeA">
<span><img src="img/contestant/14.png" alt="IG"></span>
<p>SDG</p>
</div>
<div class="competeB">
<span><img src="img/contestant/9.png" alt="IG"></span>
<p>LGD</p>
</div>
<div class="score">1:2</div>
<div class="video-back">视频回顾</div>
</div>
<p class="match-name">2021职业联赛</p>
<p class="match-num">春季赛常规赛 第八周 BO3</p>
</li>
<li>
<div class="game-status">
<p>已结束</p>
<p>19:00</p>
<p>3-22</p>
</div>
<div class="compete-wrap">
<div class="competeA">
<span><img src="img/contestant/15.png" alt="IG"></span>
<p>SS</p>
</div>
<div class="competeB">
<span><img src="img/contestant/10.png" alt="IG"></span>
<p>OMG</p>
</div>
<div class="score">2:1</div>
<div class="video-back">视频回顾</div>
</div>
<p class="match-name">2021职业联赛</p>
<p class="match-num">春季赛常规赛 第八周 BO3</p>
</li>
</ul>
</div>
<div class="left-btn"></div>
<div class="right-btn"></div>
</div>
<div class="match">
<div class="match-top">
<h6>最强战力</h6>
<div class="top-right" id = "match_top">
<ul>
<li class = "selected" >上路</li>
<li>打野</li>
<li>中路</li>
<li>下路</li>
<li>辅助</li>
</ul>
</div>
</div>
<div class="match-bottom" id = "match_bottom">
<div class="match-wrap">
<ul style = "display:block;">
<li class = "shows">
<div class="pics">
<img src="./img/player/11.png" alt="">
<p>1</p>
<span><img src="./img/contestant/12.png" alt=""></span>
</div>
<p class="name">ADD</p>
<p class="des"><span>战力 ：</span><span>64.86</span></p>
</li>
<li class = "shows">
<div class="pics">
<img src="./img/player/12.png" alt="">
<p>2</p>
<span><img src="./img/contestant/1.png" alt=""></span>
</div>
<p class="name">TheShy</p>
<p class="des"><span>战力 ：</span><span>60.99</span></p>
</li>
<li class = "shows">
<div class="pics">
<img src="./img/player/13.png" alt="">
<p>3</p>
<span><img src="./img/contestant/6.png" alt=""></span>
</div>
<p class="name">369</p>
<p class="des"><span>战力 ：</span><span>59.63</span></p>
</li>
<li class = "shows">
<div class="pics">
<img src="./img/player/14.png" alt="">
<p>4</p>
<span><img src="./img/contestant/3.png" alt=""></span>
</div>
<p class="name">Jinoo</p>
<p class="des"><span>战力 ：</span><span>58.5</span></p>
</li>
<li class = "shows">
<div class="pics">
<img src="./img/player/15.png" alt="">
<p>5</p>
<span><img src="./img/contestant/16.png" alt=""></span>
</div>
<p class="name">Ray</p>
<p class="des"><span>战力 ：</span><span>57.57</span></p>
</li>
</ul>
<ul style = "display:block;">
<li>
<div class="pics">
<img src="./img/player/21.png" alt="">
<p>1</p>
<span><img src="./img/contestant/13.png" alt=""></span>
</div>
<p class="name">Tian</p>
<p class="des"><span>战力 ：</span><span>75.27</span></p>
</li>
<li>
<div class="pics">
<img src="./img/player/22.png" alt="">
<p>2</p>
<span><img src="./img/contestant/1.png" alt=""></span>
</div>
<p class="name">Ning</p>
<p class="des"><span>战力 ：</span><span>70.76</span></p>
</li>
<li>
<div class="pics">
<img src="./img/player/23.png" alt="">
<p>3</p>
<span><img src="./img/contestant/11.png" alt=""></span>
</div>
<p class="name">Karsa</p>
<p class="des"><span>战力 ：</span><span>70</span></p>
</li>
<li>
<div class="pics">
<img src="./img/player/24.png" alt="">
<p>4</p>
<span><img src="./img/contestant/12.png" alt=""></span>
</div>
<p class="name">Metoer</p>
<p class="des"><span>战力 ：</span><span>65.63</span></p>
</li>
<li>
<div class="pics">
<img src="./img/player/25.png" alt="">
<p>5</p>
<span><img src="./img/contestant/4.png" alt=""></span>
</div>
<p class="name">beishang</p>
<p class="des"><span>战力 ：</span><span>63.29</span></p>
</li>
</ul>
<ul style = "display:block;">
<li>
<div class="pics">
<img src="./img/player/31.png" alt="">
<p>1</p>
<span><img src="./img/contestant/6.png" alt=""></span>
</div>
<p class="name">Knight9</p>
<p class="des"><span>战力 ：</span><span>76.46</span></p>
</li>
<li>
<div class="pics">
<img src="./img/player/32.png" alt="">
<p>2</p>
<span><img src="./img/contestant/13.png" alt=""></span>
</div>
<p class="name">Doinb</p>
<p class="des"><span>战力 ：</span><span>73.11</span></p>
</li>
<li>
<div class="pics">
<img src="./img/player/33.png" alt="">
<p>3</p>
<span><img src="./img/contestant/1.png" alt=""></span>
</div>
<p class="name">Rookie</p>
<p class="des"><span>战力 ：</span><span>68.6</span></p>
</li>
<li>
<div class="pics">
<img src="./img/player/34.png" alt="">
<p>4</p>
<span><img src="./img/contestant/11.png" alt=""></span>
</div>
<p class="name">Xiaohu</p>
<p class="des"><span>战力 ：</span><span>63.8</span></p>
</li>
<li>
<div class="pics">
<img src="./img/player/35.png" alt="">
<p>5</p>
<span><img src="./img/contestant/4.png" alt=""></span>
</div>
<p class="name">Xiye</p>
<p class="des"><span>战力 ：</span><span>63.67</span></p>
</li>
</ul>
<ul style = "display:block;">
<li>
<div class="pics">
<img src="./img/player/41.png" alt="">
<p>1</p>
<span><img src="./img/contestant/16.png" alt=""></span>
</div>
<p class="name">iBoy</p>
<p class="des"><span>战力 ：</span><span>65.91</span></p>
</li>
<li>
<div class="pics">
<img src="./img/player/42.png" alt="">
<p>2</p>
<span><img src="./img/contestant/4.png" alt=""></span>
</div>
<p class="name">Mystic</p>
<p class="des"><span>战力 ：</span><span>63.3</span></p>
</li>
<li>
<div class="pics">
<img src="./img/player/43.png" alt="">
<p>3</p>
<span><img src="./img/contestant/8.png" alt=""></span>
</div>
<p class="name">Smlz</p>
<p class="des"><span>战力 ：</span><span>60.52</span></p>
</li>
<li>
<div class="pics">
<img src="./img/player/44.png" alt="">
<p>4</p>
<span><img src="./img/contestant/9.png" alt=""></span>
</div>
<p class="name">Kramer</p>
<p class="des"><span>战力 ：</span><span>58.56</span></p>
</li>
<li>
<div class="pics">
<img src="./img/player/45.png" alt="">
<p>5</p>
<span><img src="./img/contestant/12.png" alt=""></span>
</div>
<p class="name">Jinjiao</p>
<p class="des"><span>战力 ：</span><span>58.38</span></p>
</li>
</ul>
<ul style = "display:block;">
<li>
<div class="pics">
<img src="./img/player/51.png" alt="">
<p>1</p>
<span><img src="./img/contestant/11.png" alt=""></span>
</div>
<p class="name">Ming</p>
<p class="des"><span>战力 ：</span><span>62.82</span></p>
</li>
<li>
<div class="pics">
<img src="./img/player/52.png" alt="">
<p>2</p>
<span><img src="./img/contestant/13.png" alt=""></span>
</div>
<p class="name">Crisp</p>
<p class="des"><span>战力 ：</span><span>62.08</span></p>
</li>
<li>
<div class="pics">
<img src="./img/player/53.png" alt="">
<p>3</p>
<span><img src="./img/contestant/16.png" alt=""></span>
</div>
<p class="name">Meiko</p>
<p class="des"><span>战力 ：</span><span>61.31</span></p>
</li>
<li>
<div class="pics">
<img src="./img/player/54.png" alt="">
<p>4</p>
<span><img src="./img/contestant/8.png" alt=""></span>
</div>
<p class="name">SwordArT</p>
<p class="des"><span>战力 ：</span><span>58.77</span></p>
</li>
<li>
<div class="pics">
<img src="./img/player/55.png" alt="">
<p>5</p>
<span><img src="./img/contestant/14.png" alt=""></span>
</div>
<p class="name">Mark</p>
<p class="des"><span>战力 ：</span><span>57.67</span></p>
</li>
</ul>
</div>
</div>
</div>
<div class="score">
<div class="score-rank">
<p>积分榜</p>
<div class = "score-head">
<p>排名</p>
<p>俱乐部</p>
<p>胜负</p>
<p>积分</p>
</div>
<div class="rank">
<ul>
<li>
<p class="x">1</p>
<span><img src="./img/contestant/13.png" alt="">FPX</span>
<p class="y">13/2</p>
<p class="z">13</p>
</li>
<li>
<p class="x">2</p>
<span><img src="./img/contestant/1.png" alt="">IG</span>
<p class="y">11/4</p>
<p class="z">11</p>
</li>
<li>
<p class="x">3</p>
<span><img src="./img/contestant/6.png" alt="">TOP</span>
<p class="y">11/4</p>
<p class="z">11</p>
</li>
<li>
<p class="x">4</p>
<span><img src="./img/contestant/11.png" alt="">RNG</span>
<p class="y">10/5</p>
<p class="z">10</p>
</li>
<li>
<p class="x">5</p>
<span><img src="./img/contestant/4.png" alt="">WE</span>
<p class="y">10/5</p>
<p class="z">10</p>
</li>
<li>
<p class="x">6</p>
<span><img src="./img/contestant/14.png" alt="">SDG</span>
<p class="y">9/6</p>
<p class="z">9</p>
</li>
<li>
<p class="x">7</p>
<span><img src="./img/contestant/13.png" alt="">EDG</span>
<p class="y">9/6</p>
<p class="z">9</p>
</li>
<li>
<p class="x">8</p>
<span><img src="./img/contestant/7.png" alt="">JDG</span>
<p class="y">9/6</p>
<p class="z">9</p>
</li>
<li>
<p class="x">9</p>
<span><img src="./img/contestant/12.png" alt="">BLG</span>
<p class="y">8/7</p>
<p class="z">8</p>
</li>
<li>
<p class="x">10</p>
<span><img src="./img/contestant/8.png" alt="">SN</span>
<p class="y">6/9</p>
<p class="z">6</p>
</li>
<li>
<p class="x">11</p>
<span><img src="./img/contestant/9.png" alt="">LGD</span>
<p class="y">5/10</p>
<p class="z">5</p>
</li>
<li>
<p class="x">12</p>
<span><img src="./img/contestant/15.png" alt="">SS</span>
<p class="y">5/10</p>
<p class="z">5</p>
</li>
<li>
<p class="x">13</p>
<span><img src="./img/contestant/3.png" alt="">V5</span>
<p class="y">4/11</p>
<p class="z">4</p>
</li>
<li>
<p class="x">14</p>
<span><img src="./img/contestant/10.png" alt="">OMG</span>
<p class="y">4/11</p>
<p class="z">4</p>
</li>
<li>
<p class="x">15</p>
<span><img src="./img/contestant/5.png" alt="">RW</span>
<p class="y">4/11</p>
<p class="z">4</p>
</li>
<li>
<p class="x">16</p>
<span><img src="./img/contestant/2.png" alt="">VG</span>
<p class="y">2/13</p>
<p class="z">2</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<div style = "display: none" class="game" id = "game">
<div class="list-col1">
<p class="list-head">第一轮</p>
<div class="vs">
<p class="info">
<span>已结束</span>
<span>4月4日 17:00</span>
<a href="">视频</a>
<a href="">数据</a>
</p>
<div class="vsA">
<span class="logo"><img src="./img/contestant/4.png" alt=""></span>
<span class= "logo-name">WE</span>
<span class = "A">1</span>
</div>
<div class="vsB">
<span class="logo"><img src="./img/contestant/7.png" alt=""></span>
<span class= "logo-name">JDG</span>
<span class = "B">3</span>
</div>
</div>
<div class="vs">
<p class="info">
<span>已结束</span>
<span>4月5日 17:00</span>
<a href="">视频</a>
<a href="">数据</a>
</p>
<div class="vsA">
<span class="logo"><img src="./img/contestant/14.png" alt=""></span>
<span class= "logo-name">SDG</span>
<span class = "A">3</span>
</div>
<div class="vsB">
<span class="logo"><img src="./img/contestant/16.png" alt=""></span>
<span class= "logo-name">EDG</span>
<span class = "B">0</span>
</div>
</div>
</div>
<i class="link"></i>
<div class="list-col1">
<p class="list-head">第二轮</p>
<div class="vs">
<p class="info">
<span>已结束</span>
<span>4月6日 17:00</span>
<a href="">视频</a>
<a href="">数据</a>
</p>
<div class="vsA">
<span class="logo"><img src="./img/contestant/11.png" alt=""></span>
<span class= "logo-name">RNG</span>
<span class = "A">2</span>
</div>
<div class="vsB">
<span class="logo"><img src="./img/contestant/7.png" alt=""></span>
<span class= "logo-name">JDG</span>
<span class = "B">3</span>
</div>
</div>
<div class="vs">
<p class="info">
<span>已结束</span>
<span>4月7日 17:00</span>
<a href="">视频</a>
<a href="">数据</a>
</p>
<div class="vsA">
<span class="logo"><img src="./img/contestant/6.png" alt=""></span>
<span class= "logo-name">TOP</span>
<span class = "A">3</span>
</div>
<div class="vsB">
<span class="logo"><img src="./img/contestant/14.png" alt=""></span>
<span class= "logo-name">SDG</span>
<span class = "B">0</span>
</div>
</div>
</div>
<i class="link"></i>
<div class="list-col2">
<p class="list-head">第三轮</p>
<div class="vs">
<p class="info">
<span>未开始</span>
<span>4月13日 17:00</span>
<a href="">敬请期待</a>
</p>
<div class="vsA">
<span class="logo"><img src="./img/contestant/13.png" alt=""></span>
<span class= "logo-name">FPX</span>
<span class = "A">0</span>
</div>
<div class="vsA">
<span class="logo"><img src="./img/contestant/7.png" alt=""></span>
<span class= "logo-name">JDG</span>
<span class = "A">0</span>
</div>
</div>
<div class="vs">
<p class="info">
<span>未开始</span>
<span>4月14日 17:00</span>
<a href="">敬请期待</a>
</p>
<div class="vsA">
<span class="logo"><img src="./img/contestant/1.png" alt=""></span>
<span class= "logo-name">IG</span>
<span class = "A">0</span>
</div>
<div class="vsA">
<span class="logo"><img src="./img/contestant/6.png" alt=""></span>
<span class= "logo-name">TOP</span>
<span class = "A">0</span>
</div>
</div>
</div>
<i class="link1"></i>
<div class="list-col2 col3">
<p class="list-head">总决赛</p>
<div class="vs">
<p class="info">
<span>未开始</span>
<span></span>
<a href="">敬请期待</a>
</p>
<div class="vsA">
<span class="logo"><img src="./img/contestant/17.png" alt=""></span>
<span class= "logo-name">待定</span>
<span class = "A">0</span>
</div>
<div class="vsA">
<span class="logo"><img src="./img/contestant/17.png" alt=""></span>
<span class= "logo-name">待定</span>
<span class = "A">0</span>
</div>
</div>
<p class="list-head">季军赛</p>
<div class="vs">
<p class="info">
<span>未开始</span>
<span></span>
<a href="">敬请期待</a>
</p>
<div class="vsA">
<span class="logo"><img src="./img/contestant/17.png" alt=""></span>
<span class= "logo-name">待定</span>
<span class = "A">0</span>
</div>
<div class="vsA">
<span class="logo"><img src="./img/contestant/17.png" alt=""></span>
<span class= "logo-name">待定</span>
<span class = "A">0</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 英雄资料 -->
<section class="heros" id = "heros">
<div class="hero-wrap">
<div class="hero-head">
<h4>英雄资料</h4>
<ul >
<li class = "selected"><span></span>所有英雄</li>
<li><span></span>战士</li>
<li><span></span>法师</li>
<li><span></span>刺客</li>
<li><span></span>坦克</li>
<li><span></span>射手</li>
<li><span></span>辅助</li>
</ul>
<div>资料库<span class = "arrow"></span></div>
</div>
<div class="hero-content">
<div class="hero-content-wrap">
<ul id = "hero-ul">
</ul>
</div>
</div>
</div>
</section>
<!-- FANART创作馆 -->
<section class="fanart" id = "fanart">
<div class="fanart-wrap">
<div class="fanart-left">
<div class="fanart-left-top">
<h4>FANART创作馆</h4>
<div>更多<span class = "arrow"></span></div>
</div>
<div class="fanart-left-bottom">
<ul>
<li>
<a href=""><img src="./img/f1.jpg" alt=""></a>
<div class="fanart-des">
<a href="">[League of Legends:] Blood Moon Zendra</a>
<div class="down-des">
<a href="" class="a"><img src="./img/g1.jpg" alt="">美服Fanart精选</a>
<a href="" class="b"><span class="riot"></span> <span>1</span></a>
</div>
</div>
</li>
<li>
<a href=""><img src="./img/f2.jpg" alt=""></a>
<div class="fanart-des">
<a href="">原创IG冠军卡莎皮肤——巅峰之耀</a>
<div class="down-des">
<a href="" class="a"><img src="./img/g2.jpg" alt="">L□KING★</a>
<a href="" class="b"><span class="riot"></span> <span>8</span></a>
</div>
</div>
</li>
<li>
<a href=""><img src="./img/f3.jpg" alt=""></a>
<div class="fanart-des">
<a href="">Orianna</a>
<div class="down-des">
<a href="" class="a"><img src="./img/g1.jpg" alt="">美服Fanart精选</a>
<a href="" class="b"><span class="riot"></span> <span>1</span></a>
</div>
</div>
</li>
<li>
<a href=""><img src="./img/f4.jpg" alt=""></a>
<div class="fanart-des">
<a href="">玉剑传说 泰隆</a>
<div class="down-des">
<a href="" class="a"><img src="./img/g4.jpg" alt="">□</a>
<a href="" class="b"><span class="riot"></span> <span>7</span></a>
</div>
</div>
</li>
<li>
<a href=""><img src="./img/f5.jpg" alt=""></a>
<div class="fanart-des">
<a href="">Nami</a>
<div class="down-des">
<a href="" class="a"><img src="./img/g1.jpg" alt="">美服Fanart精选</a>
<a href="" class="b"><span class="riot"></span> <span>2</span></a>
</div>
</div>
</li>
<li>
<a href=""><img src="./img/f6.jpg" alt=""></a>
<div class="fanart-des">
<a href="">【LPL六周年】THE SHY:大灭将至，感受雷霆吧！</a>
<div class="down-des">
<a href="" class="a"><img src="./img/g6.jpg" alt="">W.X.Y</a>
<a href="" class="b"><span class="riot"></span> <span>6</span></a>
</div>
</div>
</li>
<li>
<a href=""><img src="./img/f7.jpg" alt=""></a>
<div class="fanart-des">
<a href="">万花通灵-妮蔻同人</a>
<div class="down-des">
<a href="" class="a"><img src="./img/g7.jpg" alt="">。</a>
<a href="" class="b"><span class="riot"></span> <span>4</span></a>
</div>
</div>
</li>
<li>
<a href=""><img src="./img/f8.jpg" alt=""></a>
<div class="fanart-des">
<a href="">艾瑞莉娅-刀妹同人</a>
<div class="down-des">
<a href="" class="a"><img src="./img/g7.jpg" alt="">。</a>
<a href="" class="b"><span class="riot"></span> <span>11</span></a>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="fanart-right">
<ul>
<li class="lp">
<img src="./img/lp1.png" alt="">
</li>
<li class="rp">
<img src="./img/rp1.jpg" alt="">
<span><i></i> 英雄联盟用户调查</span>
</li>
<li class="rp">
<img src="./img/rp2.jpg" alt="">
<span><i></i> 见证版本历史</span>
</li>
<li class="rp">
<img src="./img/rp3.jpg" alt="">
<span><i></i> 年度品牌展示</span>
</li>
<li class="rb">
<div class="media">
<i class="icon-left"></i>
合作媒体
<span class="arrow-media"></span>
<i class="icon-right"></i>
</div>
<div class="rb-ul-wraper">
<ul>
<li><a href="">兔玩</a></li>
<li><a href="">特玩</a></li>
<li><a href="">T-rex</a></li>
<li><a href="">大电竞</a></li>
<li><a href="">虎扑电竞</a></li>
<li><a href="">大咖</a></li>
<li><a href="">多玩</a></li>
<li><a href="">玩加电竞</a></li>
<li><a href="">伐木累</a></li>
<li><a href="">捞月狗</a></li>
<li><a href="">飞熊TV</a></li>
<li><a href="">游戏魅</a></li>
<li><a href="">电竞虎</a></li>
<li><a href="">掌游宝</a></li>
<li><a href="">u9</a></li>
<li><a href="">爱拍</a></li>
<li><a href="">木木不哭</a></li>
<li><a href="">BGA</a></li>
<li><a href="">178</a></li>
<li><a href="">锐派</a></li>
<li><a href="">17173</a></li>
<li><a href="">15W</a></li>
<li><a href="">PentaQ</a></li>
<li><a href="">斗鱼</a></li>
<li><a href="">虎牙</a></li>
<li><a href="">神之梯</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- 结尾 -->
<footer class="tenc">
<div class="tenc-wrap">
<div class="tenc-left">
<span class="footlogo"></span>
<span class="riotlogo"></span>
</div>
<div class="tenc-right">
<ul>
<li>
<a href="">腾讯互动娱乐</a>
<i>|</i>
<a href="">服务条款</a>
<i>|</i>
<a href="">腾讯游戏隐私保护指引</a>
<i>|</i>
<a href="">腾讯游戏招聘</a>
<i>|</i>
<a href="">腾讯游戏客服</a>
<i>|</i>
<a href="">游戏地图</a>
<i>|</i>
<a href="">商务合作</a>
<i>|</i>
<a href="">腾讯网</a>
<i>|</i>
<a href="">网站导航</a>
</li>
<li><a href="">腾讯公司版权所有</a></li>
<li>COPYRIGHT © 1998 - 2021 TENCENT. ALL RIGHTS RESERVED.</li>
<li>COPYRIGHT © 2012 Riot Games,Inc. ALL RIGHTS RESERVED.</li>
<li>本网络游戏适合18+岁的用户使用；为了您的健康，请合理控制游戏时间。</li>
<li>
<a href="">粤网文[2017]6138-1456号</a>
<i>|</i>
<a href="">（总）网出证（粤）字第057号</a>
</li>
<li>批准文号：新出审字[2011]310号 |文网进字[2011] 004号 | 出版物号：ISBN 978-7-89989-145-2|全国文化市场统一举报电话：12318</li>
</ul>
</div>
</div>
</footer>
<!-- 侧边栏 -->
<div class="nav-bar">
<ul>
<li>
<a href="#activity">
<span><i></i></span>
热门活动
</a>
</li>
<li>
<a href="#video">
<span><i></i></span>
视频中心
</a>
</li>
<li>
<a href="#champion">
<span><i></i></span>
赛事中心
</a>
</li>
<li>
<a href="#heros">
<span><i></i></span>
英雄资料
</a>
</li>
<li>
<a href="#fanart">
<span><i></i></span>
FANART
</a>
</li>
<li>
<a href="#">
<span><i></i></span>
顶部
</a>
</li>
</ul>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
body{
font:12px/1.5 tahoma,'\5FAE\8F6F\96C5\9ED1',sans-serif;
color: #424242;
height: 2000px;
background: #eee;
}
/* 头部信息 */
.head{
width: 100%;
height: 720px;
position: relative;
background: url(../img/bgc-b.jpg) center center no-repeat;
transition: background 0.85s;
}
.head .head-wrapper{
height: 100%;
max-width: 1358px;
min-width: 1230px;
margin: 0 auto;
position: relative;
}
.head .mask{
width: 100%;
height: 131px;
position: absolute;
background: url(../img/dark.png) repeat center top;
z-index: 1;
}
.head .mask-all{
position: absolute;
width: 100%;
height: 350px;
background: url(../img/dark2.png) repeat;
box-sizing: border-box;
padding-top: 88px;
z-index: 9;
overflow: hidden;
display: none;
}
.head .mask-all .menu-wrapper{
max-width: 1358px;
min-width: 1230px;
margin: 0 auto;
position: relative;
}
.head .mask-all ul{
float: left;
margin-right: 42px;
}
.head .mask-all ul:first-child{
margin-left: 180px;
}
.head .mask-all ul .hot{
display: inline-block;
border-radius: 50%;
background: url(../img/topfoot-spr.png) -376px -113px no-repeat;
width: 14px;
height: 14px;
position: relative;
top: 2px;
margin-right: 2px;
}
.head .mask-all ul li{
width: 107px;
}
.head .mask-all ul li .new{
display: inline-block;
border-radius: 50%;
background: url(../img/topfoot-spr.png) -357px -113px no-repeat;
width: 14px;
height: 14px;
position: relative;
top: 2px;
margin-right: 2px;
}
.head .mask-all li a{
display: block;
width: auto;
height: 29px;
overflow: hidden;
line-height: 29px;
color: #e1e1e1;
font-size: 14px;
text-align: center;
}
.head .mask-all li a:hover{
color: #f5d185;
}
.head .head-nav{
width: 100%;
height: 78px;
z-index: 10;
position: absolute;
}
.head .left ul{
width: 880px;
height: 78px;
display:inline-flex;
justify-content:flex-start;
align-items: center;
float: left;
}
.head .left li{
width: auto;
padding-top: 0px;
height: 46px;
margin-right: 70px;
display: inline-block;
text-align: center;
}
.head .left li:first-child{
padding-top: 0;
height: 49px;
margin-right: 65px;
margin-bottom: 1px;
}
.head .left li:last-child{
margin-right: 0;
}
.head .left li .c{
font-size: 18px;
letter-spacing: 1px;
color: #ffffff;
}
.head .left li .e{
color: #aeaeae;
font-size: 11px;
margin-top: -1px;
letter-spacing: 1px;
}
.head .right{
width: 380px;
height: 100%;
position: absolute;
right: 0;
display: inline-flex;
justify-content: flex-end;
align-items:center;
z-index: 10;
}
.head .right .search,.phone{
width: 24px;
height: 24px;
padding: 8px;
margin-right: 11px;
}
.head .right .phone{
margin-right: 26px;
position: relative;
}
.head .right .search a{
width: 24px;
height: 24px;
background: url(../img/topfoot-spr.png) -380px -39px no-repeat;
display: inline-block;
}
.head .right .phone a{
width: 24px;
height: 24px;
background: url(../img/topfoot-spr.png) -352px -84px no-repeat;
display: inline-block;
}
.head .right .phone .QRC{
position: absolute;
width: 211px;
height: 178px;
background: url(../img/topfoot-spr.png) 0 0 no-repeat;
top: 49px;
left:-85px;
text-align: center;
display: none;
}
.head .right .phone .QRC .qrc-wrapper{
display: block;
width: 120px;
height: 120px;
text-align: center;
line-height: 117px;
background-color: #fff;
margin: 22px auto 0 auto;
border-radius: 10px;
padding-top: 5px;
box-sizing: border-box;
}
.head .right .phone .QRC .qrc-wrapper img{
width: 110px;
height: 110px;
}
.head .right .phone .QRC p{
color: #cdbe91;
font-size: 12px;
width: 100%;
margin-top: 10px;
text-align: center;
}
.head .right .phone .QRC .polo img{
width: 50px;
height: 50px;
display: block;
position: absolute;
right: -8px;
bottom: -2px;
}
.head .right .login{
width: 250px;
height: 78px;
vertical-align: center;
z-index: 10;
}
.head .right .login>a{
width: 48px;
height: 48px;
background-image: url(../img/topfoot-spr.png);
background-size: 405px 178px;
background-repeat: no-repeat;
background-position: -304px -84px;
display: inline-block;
text-align: center;
overflow: hidden;
margin-top: 14px;
margin-left: 6px;
}
.head .right .login>a img{
width: 36px;
height: 36px;
border-radius: 50%;
margin-top: 6px;
}
.head .right .login>span{
width: 176px;
height: 78px;
line-height: 78px;
color: #fefefe;
font-size: 16px;
float: right;
margin-right: 10px;
}
.head .right .login>span a{
color: #fff3d0;
text-decoration: none;
}
.head .right .login-mask{
position: absolute;
display: block;
right: -38px;
width: 310px;
height: auto;
overflow: hidden;
background: url(../img/dark1.png) repeat;
padding-top: 270px;
text-align: center;
display: none;
}
.head .right .login-mask p{
margin-bottom: 14px;
font-size: 12px;
color: #848383;
}
.head .right .login-mask .go{
display: block;
width: 100%;
height: 44px;
line-height: 44px;
text-align: center;
color: #fff;
font-size: 16px;
background-color: #000;
margin-top: 20px
}
.head .right .login-mask .go span{
background: url(../img/icon.png);
background-position: -301px -96px;
width: 15px;
height: 9px;
display: inline-block;
margin-left: 4px;
position: relative;
}
.head .detail{
width: 158px;
height: 38px;
position: absolute;
z-index: 1;
left: 50%;
margin-left: -77px;
bottom: 91px;
background-color:rgba(23, 23, 23, 0.69);
text-align: center;
border: 1px solid rgb(120, 90, 38);
}
.head .detail a{
font-size: 14px;
color:rgb(200, 155, 57);
line-height: 40px;
}
.head .detail a:hover{
filter:brightness(1.15);
}
.head .version{
position: absolute;
z-index: 2;
right: 0;
bottom: 28px;
}
.head .version a{
font-size: 14px;
color: #888787;
}
.head .version em{
color: #f5d185;
margin-right: 10px;
font-style: normal;
}
.head .version span{
display: inline-block;
padding: 0 15px;
height: 22px;
border: 2px solid #f5d185;
text-align: center;
line-height: 22px;
background: rgba(0,0,0,0.65);
font-size: 12px;
color: #f5d185;
}
.head .version span:hover{
background: rgba(0,0,0,1);
filter:brightness(1.15);
}
.show{
animation: topin 0.3s;
display: block !important;
}
/* 头部信息 */
/* 轮播信息 */
.wrap{
width: 1358px;
padding: 40px 0 0 0;
margin: 0 auto;
height: auto;
}
.wrap .promo{
width: 820px;
height: 380px;
float: left;
}
.wrap .promo .pic-wrapper{
width: 820px;
height: 340px;
position: relative;
overflow: hidden;
}
.wrap .promo .pic-wrapper ul{
width: 4920px;
height: 340px;
position: absolute;
}
.wrap .promo .pic-wrapper ul li a{
width: 820px;
height: 340px;
float: left;
}
.wrap .promo .pic-wrapper ul img{
width: 820px;
height: 340px;
}
.wrap .promo .promo-li{
width: 100%;
height: 40px;
}
.wrap .promo .promo-li li{
list-style: none;
float: left;
width: 164px;
height: 40px;
box-sizing: border-box;
background-color: #e3e2e2;
font-size: 14px;
text-align: center;
line-height: 40px;
color: #424242;
letter-spacing: 1px;
}
.wrap .promo .promo-li li.current{
color: #ab8e66;
background-color: #f7f6f6;
border-bottom: 2px #cea861 solid;
}
/* 轮播信息 */
/* 信息发布 */
.info{
width: 496px;
height: 380px;
float: right;
position: relative;
}
.info .info-head{
width: 100%;
height: 35px;
}
.info .info-head ul{
width: 100%;
height: 100%;
box-sizing: border-box;
border-bottom: 1px #e0e2e2 solid;
display: flex;
justify-content: space-between;
align-items: center;
}
.info .info-head li{
font-size: 18px;
line-height: 28px;
position: relative;
cursor: pointer;
width: auto;
min-width: 40px;
height: 39px;
color: #676767;
letter-spacing: 1px;
text-align: center;
overflow: hidden;
}
.info .info-head li:after{
background: url(../img/icon.png) -193px 0 no-repeat;
position: absolute;
bottom: 0;
width: 200px;
height: 7px;
margin-left: -100px;
display: none;
left: 50%;
content:""
}
.info .info-head li.current{
font-weight: 700;
color: #1da6ba;
}
.info .info-head li.current:after{
display: block;
}
.info .info-head li:hover{
font-weight: 700;
color: #1da6ba;
}
.info .info-head li:hover:after{
display: block;
}
.info .info-content {
position: relative;
}
.info .info-content ul{
position: absolute;
display: none;
}
.info .info-content .title{
background: url(../img/index-spr.png) 0 -458px no-repeat;
height: 59px;
width: 100%;
text-align: center;
line-height: 59px;
}
.info .info-content .title a{
color: #0da0b4;
font-size: 22px;
font-weight: 700;
}
.info .info-content .content{
list-style: none;
width: 496px;
height: 40px;
line-height: 39px;
overflow: hidden;
box-sizing: border-box;
border-top: 1px #e0e2e2 solid;
text-align: left;
font-size: 0;
}
.info .info-content .content a{
width: 370px;
height: 39px;
overflow: hidden;
margin-left: 20px;
color: #424242;
font-size: 14px;
letter-spacing: 1px;
text-overflow: ellipsis;
white-space: nowrap;
margin-left: 20px;
float: left;
}
.info .info-content .content span:last-child{
float: right;
font-size: 14px;
letter-spacing: 1px;
color: #9d9d9d;
margin-left: 18px;
padding-right: 2px;
}
.info .info-content .content span:first-child{
float: left;
width: 36px;
height: 20px;
box-sizing: border-box;
font-size: 12px;
line-height: 18px;
text-align: center;
margin-top: 10px;
}
.info .info-content .content span.ss{
color: #6388c5;
border: 1px #97afc5 solid;
}
.info .info-content .content span.sp{
color: #e9852d;
border: 1px #e9852d solid;
}
.info .info-content .content span.yl{
border: 1px #69c5d2 solid;
color: #1da6ba;
}
.info .info-content .content span.xw{
color: #bb9a6c;
border: 1px #c5ab86 solid;
}
.info .info-content .content span.gg{
color: #bb9a6c;
border: 1px #c5ab86 solid;
}
.info .info-content .content span.jx{
color: #4ba36a;
border: 1px #4ba36a solid;
}
.info .info-content .content span.lt{
color: #bb9a6c;
border: 1px #c5ab86 solid;
}
.info .info-footer{
display: block;
width: 496px;
height: 40px;
background-color: #e3e2e2;
line-height: 40px;
text-align: center;
position: absolute;
bottom: 0;
cursor: pointer;
}
.info .info-footer span:first-child{
font-size: 14px;
color: #676767;
}
.info .info-footer span:nth-child(2){
font-size: 14px;
color: #7ea1a6;
}
.arrow{
background: url(../img/icon.png);
background-position: -301px -96px;
width: 15px;
height: 9px;
display: inline-block;
margin-left: 4px;
position: relative;
}
.info .info-footer:hover{
background-color: #dad8d8;
border-radius: 4px;
}
.info .info-footer:hover .arrow{
animation: arrow 1.2s linear infinite;
}
/* 信息发布 */
/* 热门活动 */
.activity{
width: 820px;
height: 335px;
margin-top: 50px;
float: left;
}
.activity .top{
width: 100%;
height: 35px;
}
.activity .top h2{
float: left;
color: #0b0b0b;
font-size: 24px;
line-height: 38px;
font-weight: 400;
position: relative;
text-indent: 6px;
}
.activity .top h2::before{
position: absolute;
content: "";
display: inline-block;
width: 4px;
height: 28px;
background-color: #1da6ba;
left: -4px;
top: 5px;
}
.activity .top .top-right{
float: right;
width: 692px;
height: 100%;
border-bottom: 1px solid #e0e2e2;
box-sizing: border-box;
}
.activity .top .top-right li{
float: left;
margin-right: 40px;
min-width: 40px;
height: 37px;
font-size: 16px;
letter-spacing: 1px;
line-height: 35px;
text-align: center;
position: relative;
overflow: hidden;
}
.activity .top .top-right li:after{
background: url(../img/icon.png) -193px 0 no-repeat;
position: absolute;
bottom:0;
width: 200px;
height: 7px;
margin-left: -100px;
display: none;
left: 50%;
content:""
}
.activity .top .top-right li.selected{
font-weight: 700;
color: #1da6ba;
}
.activity .top .top-right li.selected:after{
display: block;
}
.activity .top .top-right>div{
float: right;
}
.activity .top .top-right>div a{
color: #7ea1a6;
line-height: 35px;
z-index: 1;
}
.activity .top .top-right>div a:hover{
text-decoration: underline;
color: #1da6ba;
font-weight: 700;
}
.activity .top .top-right>div a:hover span{
animation: arrow 1.2s linear infinite;
}
.activity .down{
margin-top: 21px;
width: 820px;
height: 278px;
position: relative;
}
.activity .down>ul{
width: 820px;
height: 278px;
position: absolute;
display: none;
top: 0;
left: 0;
}
.activity .down>ul.selected{
display: block;
}
.activity .down>ul>li{
width: 193px;
height: 278px;
margin-right: 16px;
position: relative;
background: #fff;
float: left;
transition: transform 0.3s;
cursor: pointer;
}
.activity .down>ul>li:last-of-type{
margin-right: 0;
}
.activity .down>ul>li:hover{
transform: translateY(-10px)
}
.activity .down>ul>li:hover .mask{
display: block;
}
.activity .down>ul>li .mask{
position: absolute;
background: rgba(0,0,0,0.65);
width: 193px;
height: 207px;
display: none;
}
.activity .down>ul>li .mask .inner-mask{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 188px;
height: 200px;
margin: 4px auto;
}
.activity .down>ul>li .mask .mask-box{
width: 188px;
height: 200px;
position: absolute;
background: url(../img/icon.png) 0 0 no-repeat;
}
.activity .down>ul>li .mask .inner-mask h4{
font-size: 16px;
font-weight: 400;
color: #cdbe91;
width: 193px;
text-align: center;
}
.activity .down>ul>li .mask .inner-mask p{
font-size: 12px;
color: #9d9c9c;
max-height: 73px;
overflow: hidden;
text-align: center;
line-height: 1.5;
width: 168px;
}
.activity .down>ul>li .pic img{
width: 193px;
height: 207px;
}
.activity .down>ul>li>p:first-of-type{
width: 100%;
box-sizing: border-box;
padding: 6px 10px 4px 10px;
font-size: 14px;
color: #424242;
line-height: 18px;
text-align: left;
}
.activity .down>ul>li>p:last-of-type{
position: absolute;
font-size: 12px;
color: #1da6ba;
left: 10px;
bottom: 6px;
}
/* 热门活动 */
/* 游戏下载 */
.download{
width: 496px;
height: 335px;
margin-top: 50px;
float: right;
}
.download ul{
width: 100%;
height: 100%;
}
.download ul li{
float: left;
}
.download ul .download-game{
width: 366px;
height: 168px;
}
.download ul .download-game:hover{
filter:brightness(1.15)
}
.download ul .p1{
width: 118px;
height: 76px;
margin-left: 12px;
background: url(../img/index-spr.png) -193px -316px no-repeat;
line-height: 76px;
text-align: center;
transition: all 0.3s;
position: relative;
}
.download ul .p1 .guide{
position: absolute;
top: 0;
left: 0;
width: 120px;
height: 76px;
display: none;
}
.download ul .p1 .guide a{
width: 60px;
height: 76px;
float: left;
box-sizing: border-box;
border-right: 1px #eee solid;
color: #424242;
font-size: 12px;
line-height: 30px;
background: #fff;
}
.download ul .p1 .guide a span{
background: url(../img/icon.png) no-repeat;
background-position: -193px -96px;
display: block;
width: 19px;
height: 21px;
margin: 18px auto 0;
}
.download ul .p1 .guide div:last-child span{
background-position: -217px -96px;
}
.download ul .p1 a{
color: #fff;
font-size: 14px;
font-weight: 700;
text-align: center;
}
.download ul .p1:nth-child(2):hover>a{
display: none;
}
.download ul .p1:nth-child(2):hover .guide{
display: block;
}
.download ul .p1 .guide a:hover span{
animation: scale1 ease 1s 1;
}
.download ul .p1:nth-child(3):hover{
filter:brightness(1.15)
}
.download ul li:nth-child(3){
margin-top: 16px;
}
.download ul li:nth-child(7){
margin-right: 0;
}
.download ul li:nth-child(10){
margin-right: 0;
}
.download ul .p2{
margin: 15px 16px 0 0;
width: 112px;
height: 68px;
text-align: center;
line-height: 68px;
background-color: #fefefe;
transition: all 0.3s;
}
.download ul .p2:hover{
border-radius: 4px;
box-shadow: 0 0 10px #ccc;
}
.download ul .p2:hover a{
color: #0da0b4;
}
.download ul .p2:hover span{
animation: scale1 ease 1s 1
}
.download ul .p3:hover a{
color: #0da0b4;
}
.download ul .p3:hover span{
animation: scale1 ease 1s 1
}
.download ul .p2 a{
color: #424242;
width: 100%;
height: 100%;
display: block;
position: relative;
}
.download ul .p3{
margin: 15px 16px 0 0;
width: 240px;
height: 68px;
text-align: center;
line-height: 68px;
background-color: #fefefe;
transition: all 0.3s;
}
.download ul .p3:hover{
border-radius: 4px;
box-shadow: 0 0 10px #ccc;
}
.download ul .p3:hover a{
color: #0da0b4;
}
.download ul .p3 a{
color: #424242;
width: 100%;
height: 100%;
display: block;
}
.download ul li span {
background: url(../img/icon.png) no-repeat;
display: inline-block;
}
.download ul li:nth-child(4) span{
width: 25px;
height: 19px;
background-position: -318px -12px;
position: relative;
top:4px;
right: 4px;
}
.download ul li:nth-child(5) span{
width: 20px;
height: 20px;
background-position: -193px -71px;
position: relative;
top:5px;
right: 4px;
}
.download ul li:nth-child(6) span{
width: 20px;
height: 20px;
background-position: -218px -71px;
position: relative;
top:5px;
right: 4px;
}
.download ul li:nth-child(7) span{
width: 20px;
height: 20px;
background-position: -264px -12px;
position: relative;
top:5px;
right: 4px;
}
.download ul li:nth-child(8) div{
background: url(../img/icon.png) -247px -46px no-repeat;
width: 29px;
height: 14px;
position: relative;
top: 2px;
left: 5px;
display: inline-block;
}
.download ul li:nth-child(8) span{
width: 28px;
height: 24px;
background-position: -231px -12px;
position: relative;
top:8px;
right: 4px;
}.download ul li:nth-child(9) span{
width: 23px;
height: 17px;
background-position: -319px -71px;
position: relative;
top:5px;
right: 4px;
}.download ul li:nth-child(10) span{
width: 18px;
height: 18px;
background-position: -375px -12px;
position: relative;
top:3px;
right: 4px;
}
/* 游戏下载 */
/* 版本更新 */
.update-info {
width: 1358px;
float: left;
padding:51px 0 80px;
}
.update-info .hero,.skin{
width: 402px;
height: 254px;
margin-right: 16px;
float: left;
position: relative;
}
.update-info .hero .hero-update{
width: 100%;
height: 100%;
}
.update-info .hero .hero-update span{
position: absolute;
display: block;
left: 9px;
top: 9px;
width: auto;
height: 20px;
padding: 0 6px;
border-radius: 2px;
font-size: 12px;
text-align: center;
color: #cdbe91;
line-height: 19px;
background-color: #000;
}
.update-info .hero .hero-update p:first-of-type{
width: 100%;
padding: 0 17px;
box-sizing: border-box;
position: absolute;
left: 0;
bottom: 33px;
font-size: 16px;
font-weight: 700;
color: #cdbe91;
}
.update-info .hero .hero-update p:last-of-type{
width: 100%;
padding-left: 17px;
box-sizing: border-box;
position: absolute;
left: 0;
bottom: 12px;
font-size: 14px;
color:#fff;
}
.update-info .hero .hero-mask{
width: 100%;
height: 100%;
position: absolute;
background: rgba(0,0,0,0.65);
top: 0px;
left: 0px;
visibility: hidden;
}
.update-info .hero:hover .hero-mask{
visibility: visible;
animation: bottom1 ease 0.2s 1;
}
.update-info .hero .hero-mask .mask{
display: block;
position: absolute;
left: 3px;
top: 3px;
background: url(../img/index-spr.png) 0 0 no-repeat;
width: 396px;
height: 248px;
}
.update-info .hero .hero-mask p{
color: #cdbe91;
font-size: 18px;
position: absolute;
left: 27px;
top: 20px;
}
.update-info .hero .hero-mask ul{
width: 450px;
height: auto;
overflow: hidden;
padding-left: 27px;
box-sizing: border-box;
margin-top: 58px;
}
.update-info .hero .hero-mask li{
font-size: 14px;
color: #fff;
text-align: left;
width: 175px;
height: 30px;
line-height: 30px;
list-style: none;
float: left;
margin: 0 32px 9px 0;
}
.update-info .hero .hero-mask .p1 span{
display: inline-block;
width: 34px;
height: 4px;
background-color: #fff;
margin-right: 3px;
}
.update-info .hero .hero-mask .p2>span{
display: inline-block;
vertical-align: middle;
width: 80px;
height: 4px;
background-color: #6c6c6c;
}
.update-info .hero .hero-mask .p2>span>span{
width: 60%;
height: 100%;
background-color: #fff;
float: left;
}
.update-info .hero .hero-mask a{
position: absolute;
left: 25px;
bottom: 18px;
display: block;
background: url(../img/index-spr.png) -401px -179px no-repeat;
width: 154px;
height: 42px;
color: #ffdb8b;
font-size: 14px;
text-align: center;
line-height: 42px;
}
.update-info .hero .hero-mask a:hover .arrow{
animation: arrow ease 1s infinite;
}
.update-info .skin .skin-update{
width: 100%;
height: 100%;
position: relative;
}
.update-info .more-skin li:hover img{
transform: scale(1.2)
}
.update-info .skin .skin-update span{
position: absolute;
display: block;
left: 9px;
top: 9px;
width: auto;
height: 20px;
padding: 0 6px;
border-radius: 2px;
font-size: 12px;
text-align: center;
color: #cdbe91;
line-height: 19px;
background-color: #000;
}
.update-info .skin .skin-update p:first-of-type{
width: 100%;
padding: 0 17px;
box-sizing: border-box;
position: absolute;
left: 0;
bottom: 33px;
font-size: 16px;
font-weight: 700;
color: #cdbe91;
}
.update-info .skin .skin-update p:last-of-type{
width: 100%;
padding-left: 17px;
box-sizing: border-box;
position: absolute;
left: 0;
bottom: 12px;
font-size: 14px;
color:#fff;
}
.update-info .version{
width: 496px;
height: 254px;
float: right;
}
.update-info .version div.version97,div.sell{
float: left;
width: 240px;
height: 120px;
margin-bottom: 14px;
}
.update-info .version div.xiaopao{
float: right;
width: 242px;
height: 180px;
margin-bottom: 16px;
position: relative;
}
.update-info .version div.xiaopao:hover>div{
display: flex;
animation: bottom1 0.2s ease;
}
.update-info .version div.xiaopao>div{
width: 100%;
height: 100%;
position: absolute;
top:0;
left: 0;
background: rgba(0,0,0,0.65);
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
}
.update-info .version div.xiaopao>div .version-mask{
width: 237px;
height: 174px;
margin: 1px auto;
background: url(../img/index-spr.png) -401px 0 no-repeat;
position: absolute;
}
.update-info .version div.xiaopao>div h6{
font-size: 16px;
font-weight: 400;
color: #cdbe91;
margin-bottom: 2px;
max-width: 222px;
text-align: center;
}
.update-info .version div.xiaopao>div p{
overflow: hidden;
font-size: 12px;
color: #9d9c9c;
}
.update-info .version .sell a{
width: 240px;
height: 120px;
background: url("../img/version2.jpeg");
transition: background 0.5s;
display: block;
}
.update-info .version .sell a:hover{
background: url("../img/version3.jpeg");
}
.update-info .version div.weekfree{
float: right;
width: 239px;
height: 58px;
background: url(../img/index-spr.png) -193px -253px no-repeat;
line-height: 58px;
font-size: 16px;
color: #fff;
text-align: center;
position: relative;
}
.update-info .version div.weekfree:hover{
filter:brightness(1.15)
}
.update-info .version div.weekfree:hover .arrow{
animation: arrow ease 1.2s infinite;
}
.update-info .version div.weekfree .left{
width: 20px;
height: 9px;
background: url(../img/index-spr.png) -531px -226px no-repeat;
display: inline-block;
margin-right: 7px;
}
.update-info .version div.weekfree .right{
width: 15px;
height: 9px;
background: url(../img/index-spr.png) -506px -226px no-repeat;
display: inline-block;
margin-left: 7px;
}
.update-info .version div.weekfree:hover .weekfree-list{
display: block;
animation: topin ease 1s 1;
}
.update-info .version .weekfree-list{
background-color: #fff;
position: absolute;
top: 72px;
box-shadow: 0 0 12px #bbb;
padding: 6px 5px 10px 5px;
z-index: 2;
right: 0;
display: none;
}
.update-info .version .weekfree-list span{
background: url("../img/index-spr.png") -556px -226px no-repeat;
display: block;
width: 14px;
height: 7px;
position: absolute;
top: -7px;
right: 114px
}
.update-info .version .weekfree-list ul{
width: 420px;
overflow: hidden;
margin: 0 auto;
}
.update-info .version .weekfree-list ul li{
overflow: hidden;
float: left;
list-style: none;
margin: 7px 5px 0 5px;
position: relative;
}
.update-info .version .weekfree-list ul li a{
width: 46px;
height: 46px;
border: 2px #bb9a6c solid;
border-radius: 50%;
display: block;
overflow: hidden;
}
.update-info .version .weekfree-list ul li a img{
width: 46px;
height: 46px;
}
.update-info .more-skin{
width: 1368px;
height: 117px;
margin-top: 42px;
float: left;
overflow: hidden;
display: none;
}
.update-info .more-skin ul{
width: 1380px;
overflow: hidden;
}
.update-info .more-skin ul li{
width: 185px;
height: 117px;
overflow: hidden;
float: left;
margin-right: 12px;
position: relative;
}
.update-info .more-skin ul li img{
width: 185px;
transition: transform 0.5s;
}
.update-info .more-skin ul li p{
position: absolute;
width: 185px;
text-align: center;
bottom: 0;
line-height: 30px;
font-size: 14px;
text-align: center;
height: 30px;
background-color: rgba(0,0,0,0.65);
color: #cdbe91;
}
.wrap:after{
content:" ";
clear: both;
height: 0;
width: 0;
display: block;
overflow: hidden;
}
/* 版本更新 */
/* 视频区 */
.video-wrap{
width: 100%;
min-width: 1358px;
background-color: #e3e2e2;
padding: 64px 0 66px 0;
}
.video-wrap .wrap{
width: 1358px;
margin: 0 auto;
}
.video{
width: 820px;
height: 463px;
float: left;
}
.video .top{
width: 100%;
height: 35px;
}
.video .top h2{
float: left;
color: #0b0b0b;
font-size: 24px;
line-height: 38px;
font-weight: 400;
position: relative;
text-indent: 6px;
}
.video .top h2::before{
position: absolute;
content: "";
display: inline-block;
width: 4px;
height: 28px;
background-color: #1da6ba;
left: -4px;
top: 5px;
}
.video .top .top-right{
float: right;
width: 692px;
height: 100%;
border-bottom: 1px solid #d6d7d8;
box-sizing: border-box;
}
.video .top .top-right li{
float: left;
margin-right: 40px;
min-width: 40px;
height: 37px;
font-size: 16px;
letter-spacing: 1px;
line-height: 35px;
text-align: center;
position: relative;
overflow: hidden;
}
.video .top .top-right li:after{
background: url(../img/icon.png) -193px 0 no-repeat;
position: absolute;
bottom:0;
width: 200px;
height: 7px;
margin-left: -100px;
display: none;
left: 50%;
content:""
}
.video .top .top-right li.selected{
font-weight: 700;
color: #1da6ba;
}
.video .top .top-right li.selected:after{
display: block;
}
.video .top .top-right>div{
float: right;
}
.video .top .top-right>div a{
color: #7ea1a6;
line-height: 35px;
z-index: 1;
}
.video .top .top-right>div a:hover{
text-decoration: underline;
color: #1da6ba;
font-weight: 700;
}
.video .top .top-right>div a:hover span{
animation: arrow 1.2s linear infinite;
}
.video .down ul{
width: 840px;
height: auto;
min-height: 130px;
position: relative;
margin-top: 32px;
overflow: hidden;
}
.video .down ul li{
list-style: none;
float: left;
width: 193px;
height: 185px;
overflow: hidden;
margin: 0 16px 16px 0;
position: relative;
}
.video .down li .video-pic{
width: 193px;
height: 107px;
position: relative;
cursor: pointer;
}
.video .down li .video-pic img{
width: 193px;
}
.video .down li .video-pic>span{
position: absolute;
right: 10px;
top: 85px;
color: #fff;
font-size: 12px
}
.video .down li>p{
position: absolute;
left: 0;
top: 118px;
width: 100%;
height: 42px;
overflow: hidden;
padding: 0 10px;
box-sizing: border-box;
font-size: 14px;
line-height: 21px;
color: #424242;
}
.video .down li .click{
position: absolute;
left: 9px;
bottom: 4px;
font-size: 12px;
color: #919091;
}
.video .down li .time{
position: absolute;
right: 9px;
bottom: 4px;
font-size: 12px;
color: #919091;
}
.alblum{
width: 496px;
height: 454px;
float: right;
}
.alblum .top{
width: 100%;
height: 35px;
}
.alblum .top h2{
float: left;
color: #0b0b0b;
font-size: 24px;
line-height: 38px;
font-weight: 400;
position: relative;
text-indent: 6px;
}
.alblum .top h2::before{
position: absolute;
content: "";
display: inline-block;
width: 4px;
height: 28px;
background-color: #1da6ba;
left: -4px;
top: 5px;
}
.alblum .top .top-right{
float: right;
width: 378px;
height: 100%;
border-bottom: 1px solid #d6d7d8;
box-sizing: border-box;
}
.alblum .top .top-right li{
float: left;
margin-right: 14px;
min-width: 40px;
height: 37px;
font-size: 16px;
letter-spacing: 1px;
line-height: 35px;
text-align: center;
position: relative;
overflow: hidden;
}
.alblum .top .top-right li:after{
background: url(../img/icon.png) -193px 0 no-repeat;
position: absolute;
bottom:0;
width: 200px;
height: 7px;
margin-left: -100px;
display: none;
left: 50%;
content:""
}
.alblum .top .top-right li.selected{
font-weight: 700;
color: #1da6ba;
}
.alblum .top .top-right li.selected:after{
display: block;
}
.alblum .down{
background: url("../img/index-spr.png") 0 -522px no-repeat;
width: 506px;
height: 50px;
font-size: 16px;
color: #ab8e66;
text-align: center;
line-height: 50px;
margin-left: -5px;
cursor: pointer;
}
.alblum .down:hover{
filter: brightness(1.08);
}
.alblum .down:hover .arrow{
animation: arrow 1.2s linear infinite;
}
.alblum .middle{
width: 496px;
height: 337px;
overflow: visible;
margin-top: 32px;
position: relative;
}
.alblum .middle .middle-wrap{
width: 496px;
height: 337px;
position: relative;
overflow: hidden;
}
.alblum .middle .middle-wrap ul{
position: absolute;
top: 0;
left: 0;
visibility: hidden;
}
.alblum .middle .middle-wrap ul.alblum-selected{
visibility: visible;
}
.alblum .middle .middle-wrap ul .alblum-selected{
display: block;
}
.alblum .middle .middle-wrap ul li{
width: 156px;
height: 337px;
margin-right: 15px;
float: left;
position: relative;
}
.alblum .middle .middle-wrap ul li .alblum-pic{
position: absolute;
width: 156px;
height: 212px;
}
.alblum .middle .middle-wrap ul li .alblum-pic img{
width: 156px;
}
.alblum .middle li .alblum-pic .word p:first-child{
font-size: 16px;
font-weight: 700;
text-align: center;
color: #fff;
width: 100%;
height: 30px;
line-height: 30px;
overflow: hidden;
position: absolute;
left: 0;
top: 140px;
}
.alblum .middle li .alblum-pic .word p:last-child{
font-size: 12px;
text-align: center;
color: #fff;
width: 100%;
height: 36px;
line-height: 18px;
overflow: hidden;
position: absolute;
left: 0;
top: 169px;
box-sizing: border-box;
padding: 0 7px;
}
.alblum .middle li>p{
font-size: 14px;
text-align: left;
color: #919091;
width: 100%;
height: 42px;
line-height: 21px;
overflow: hidden;
position: absolute;
left: 0;
width: 156px;
top: 224px;
box-sizing: border-box;
padding: 0 7px;
}
.alblum .middle .alblum-author{
display: block;
width: 100%;
height: 30px;
line-height: 30px;
box-sizing: border-box;
padding-left: 4px;
color: #919091;
font-size: 12px;
position: absolute;
left: 0;
top: 280px;
}
.alblum .middle .alblum-author>span{
display: inline-block;
vertical-align: middle;
border-radius: 50%;
width: 30px;
height: 30px;
margin: -2px 2px 0 0;
overflow: hidden;
}
.alblum .middle .alblum-author>span img{
width: 100%;
height: 100%;
}
.alblum .middle .left-btn{
background: url(../img/index-spr.png) -221px -397px no-repeat;
position: absolute;
left: -29px;
top: 89px;
width: 23px;
height: 51px;
}
.alblum .middle .right-btn{
background: url(../img/index-spr.png) -193px -397px no-repeat;
position: absolute;
right: -29px;
top: 89px;
width: 23px;
height: 51px;
}
/* 视频区 */
/* 赛事中心 */
.champion {
width: 1358px;
height: auto;
margin: 0 auto;
padding: 64px 0 80px 0;
}
.champion .champion-wrap{
width: 100%;
}
.champion .champion-wrap .champion-head{
width: 100%;
}
.champion .champion-wrap .top{
width: 100%;
height: 35px;
}
.champion .champion-wrap .top h2{
float: left;
color: #0b0b0b;
font-size: 24px;
line-height: 38px;
font-weight: 400;
position: relative;
text-indent: 6px;
}
.champion .champion-wrap .top h2::before{
position: absolute;
content: "";
display: inline-block;
width: 4px;
height: 28px;
background-color: #1da6ba;
left: -4px;
top: 5px;
}
.champion .champion-wrap .top .top-right{
float: right;
width: 1230px;
height: 100%;
border-bottom: 1px solid #e0e2e2;
box-sizing: border-box;
}
.champion .champion-wrap .top .top-right li{
float: left;
margin-right: 40px;
min-width: 40px;
height: 37px;
font-size: 16px;
letter-spacing: 1px;
line-height: 35px;
text-align: center;
position: relative;
overflow: hidden;
}
.champion .champion-wrap .top .top-right li:after{
background: url(../img/icon.png) -193px 0 no-repeat;
position: absolute;
bottom:0;
width: 200px;
height: 7px;
margin-left: -100px;
display: none;
left: 50%;
content:""
}
.champion .champion-wrap .top .top-right li.selected{
font-weight: 700;
color: #1da6ba;
}
.champion .champion-wrap .top .top-right li.selected:after{
display: block;
}
.champion .champion-wrap .top .top-right>div{
float: right;
}
.champion .champion-wrap .top .top-right>div a{
color: #7ea1a6;
line-height: 35px;
z-index: 1;
}
.champion .champion-wrap .top .top-right>div a:hover{
text-decoration: underline;
color: #1da6ba;
font-weight: 700;
}
.champion .champion-wrap .top .top-right>div a:hover span{
animation: arrow 1.2s linear infinite;
}
.champion .champion-wrap .top .top-right>a{
float: right;
text-decoration: none;
font-size: 16px;
font-weight: 700;
color: #676767;
line-height: 35px;
overflow: hidden;
height: 35px;
margin-right:14px;
}
.champion .champion-wrap .top .top-right>a:hover{
text-decoration: underline;
}
.champion .champion-wrap .top .top-right>a span{
height: 25px;
width: 25px;
display: inline-block;
background: url(../img/LPL.png);
margin: -2px 4px 0 0;
vertical-align: middle;
}
.champion .content{
width: 1358px;
height: auto;
padding: 26px 0 0;
float: left;
}
.champion .content .champion-content{
width: 100%;
height: 549px;
position: relative;
animation: topin 0.5s;
}
.champion .champion-content .contestant{
width: 1375px;
height: 198px;
position: relative;
}
.champion .champion-content .contestant .ul-wraper{
width: 1358px;
height: 198px;
overflow: hidden;
position: relative;
}
.champion .champion-content .contestant ul{
width: 3000px;
height: 198px;
position: absolute;
}
.champion .champion-content .contestant ul li{
width: 259px;
height: 198px;
float: left;
margin-right: 16px;
position: relative;
background-color: #fff;
}
.champion .contestant li .game-status{
width: 100%;
font-size: 16px;
color: #fff;
line-height: 28px;
height: 28px;
background: rgb(175,175,175) url(../img/gamelist-top-ware.png) repeat-x;
}
.champion .contestant li .game-status p:nth-child(1){
float: left;
margin-left: 12px;
}
.champion .contestant li .game-status p:nth-child(2){
float: right;
margin-right: 12px;
}
.champion .contestant li .game-status p:nth-child(3){
float: right;
margin-right: 14px;
}
.champion .contestant li .compete-wrap{
width: 100%;
height: 105px;
background-color: #fff;
position: relative;
}
.champion .contestant li .compete-wrap .competeA{
position: absolute;
width: 85px;
height: 85px;
left: 6px;
top: 10px;
text-align: center;
}
.champion .contestant li .compete-wrap .competeA span{
width: 50px;
height: 50px;
display: block;
margin: 8px auto;
}
.champion .contestant li .compete-wrap .competeA span img{
width: 50px;
height: 50px;
}
.champion .contestant li .compete-wrap .competeA p{
text-align: center;
color: #385155;
font-size: 18px;
line-height: 20px;
}
.champion .contestant li .compete-wrap .competeB{
position: absolute;
width: 85px;
height: 85px;
right: 6px;
top: 10px;
}
.champion .contestant li .compete-wrap .competeB span{
width: 50px;
height: 50px;
display: block;
margin: 8px auto;
}
.champion .contestant li .compete-wrap .competeB span img{
width: 50px;
height: 50px;
}
.champion .contestant li .compete-wrap .competeB p{
text-align: center;
color: #385155;
font-size: 18px;
line-height: 20px;
}
.champion .contestant li .compete-wrap .score{
display: block;
width: 86px;
height: 40px;
color: #171717;
font-weight: 700;
text-align: center;
line-height: 40px;
position: absolute;
top: 24px;
left: 50%;
margin-left: -43px;
font-size: 34px;
}
.champion .contestant li .compete-wrap .video-back{
width: 86px;
height: 29px;
line-height: 29px;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -43px;
box-sizing: border-box;
border: 1px #727272 solid;
text-align: center;
color: #727272;
}
.champion .contestant li>p{
margin-top: 12px;
line-height: 1.5;
font-size: 12px;
text-align: center;
color: #727272;
}
.champion .contestant .left-btn{
display: block;
position: absolute;
bottom: 74px;
z-index: 1;
background: url(../img/index-spr.png) -221px -397px no-repeat;
position: absolute;
width: 23px;
height: 51px;
left: -29px;
}
.champion .contestant .right-btn{
display: block;
position: absolute;
bottom: 74px;
z-index: 1;
background: url(../img/index-spr.png) -193px -397px no-repeat;
position: absolute;
width: 23px;
height: 51px;
right: -12px;
}
.match{
float: left;
width: 820px;
height: 313px;
margin-top: 38px;
}
.match .match-top{
width: 100%;
height: 35px;
}
.match .match-top h6{
float: left;
color: #0b0b0b;
font-size: 18px;
line-height: 38px;
font-weight: 400;
position: relative;
text-indent: 6px;
}
.match .match-top .top-right{
float: right;
width: 723px;
height: 100%;
border-bottom: 1px solid #e0e2e2;
box-sizing: border-box;
}
.match .match-top .top-right li{
float: left;
margin-right: 50px;
min-width: 40px;
height: 37px;
font-size: 16px;
letter-spacing: 1px;
line-height: 35px;
text-align: center;
position: relative;
overflow: hidden;
}
.match .match-top .top-right li:after{
background: url(../img/icon.png) -193px 0 no-repeat;
position: absolute;
bottom:0;
width: 200px;
height: 7px;
margin-left: -100px;
display: none;
left: 50%;
content:""
}
.match .match-top .top-right li.selected{
font-weight: 700;
color: #1da6ba;
}
.match .match-top .top-right li.selected:after{
display: block;
}
.match .match-bottom .match-wrap{
width: 840px;
height: 257px;
margin-top: 21px;
position: relative;
}
.match .match-bottom .match-wrap ul{
width: 100%;
height: 100%;
display: block;
position: absolute;
overflow: hidden;
}
.match .match-bottom ul li{
list-style: none;
float: left;
width: 151px;
height: 257px;
margin-right: 16px;
background-color: #fefefe;
transform: translateX(850px);
transition: transform 0.2s;
}
.match .match-bottom ul li.none{
transform: translateX(850px);
}
.match .match-bottom ul li.shows{
transform: translateX(0px);
}
.match .match-bottom ul li:nth-child(1){
transition: transform 0.3s;
}
.match .match-bottom ul li:nth-child(2){
transition: transform 0.3s 0.2s;
}
.match .match-bottom ul li:nth-child(3){
transition: transform 0.3s 0.4s;
}
.match .match-bottom ul li:nth-child(4){
transition: transform 0.3s 0.6s;
}
.match .match-bottom ul li:nth-child(5){
transition: transform 0.3s 0.8s;
}
.match .match-bottom ul li:nth-child(6){
transition: transform 0.3s 1s;
}
.match .match-bottom ul li .pics{
width: 151px;
height: 203px;
position: relative;
background-color: #fefefe;
background: -webkit-linear-gradient(top,#fefefe,#fefefe,#8a8a8a)
}
.match .match-bottom ul li .pics>img{
width: 151px;
height: 151px;
position: absolute;
bottom: 0;
}
.match .match-bottom ul li .pics p{
position: absolute;
left: 10px;
top: 10px;
text-align: center;
line-height: 1;
font-family: tttgbnumber,sans-serif;
font-size: 24px;
color: #7b7b7b;
}
.match .match-bottom ul li .pics>span{
width: 30px;
height: 30px;
position: absolute;
top: 8px;
right: 9px;
display: block;
}
.match .match-bottom ul li .pics>span>img{
width: 30px;
height: 30px;
}
.match .match-bottom ul li .name{
color: #424242;
font-size: 14px;
width: 100%;
height: 20px;
line-height: 20px;
padding-left: 10px;
box-sizing: border-box;
margin-top: 7px;
letter-spacing: 1px;
}
.match .match-bottom ul li .des{
color: #7ea1a6;
font-size: 14px;
width: 100%;
height: 20px;
overflow: hidden;
line-height: 20px;
padding-left: 10px;
box-sizing: border-box;
margin-top: 3px;
}
.champion .champion-content>.score{
width: 496px;
height: auto;
margin-top: 38px;
float:right;
}
.champion .champion-content>.score .score-rank{
width: 100%;
position: relative;
}
.champion .champion-content>.score .score-rank>p{
position: absolute;
width: auto;
height: 28px;
top: 5px;
left: -6px;
box-sizing: border-box;
color: #0b0b0b;
font-size: 24px;
line-height: 28px;
font-weight: 400;
}
.champion .champion-content>.score .score-rank>.score-head{
position: absolute;
top: 56px;
width: 496px;
height: 32px;
line-height: 32px;
box-sizing: border-box;
padding: 0 18px;
color: #151517;
font-size: 16px;
font-weight: 400;
background-color: #e0e0e0;
}
.champion .champion-content>.score .score-rank>.score-head p:nth-child(1){
width: 44px;
float: left;
}
.champion .champion-content>.score .score-rank>.score-head p:nth-child(2){
width: 124px;
margin-left: 69px;
float: left;
}
.champion .champion-content>.score .score-rank>.score-head p:nth-child(3){
width: 100px;
text-align: center;
margin-left: 45px;
float: left;
}
.champion .champion-content>.score .score-rank>.score-head p:nth-child(4){
width: 124px;
float: right;
width: 44px;
}
.champion .champion-content>.score .score-rank .rank{
width: 496px;
background-color: #fefefe;
overflow-y: scroll;
overflow-x: hidden;
position: absolute;
height: 225px;
top:88px;
}
.champion .champion-content>.score .score-rank ul{
width: 496px;
height: auto;
box-sizing: border-box;
padding: 0 18px;
}
.champion .champion-content>.score .score-rank ul li{
width: 460px;
height: 46px;
line-height: 46px;
overflow: hidden;
list-style: none;
box-sizing: border-box;
border-bottom: 1px #e0e2e2 solid;
}
.champion .champion-content>.score .score-rank ul li p:nth-of-type(1){
float: left;
width: 44px;
height: 46px;
text-align: center;
font-family: tttgbnumber,sans-serif;
font-size: 18px;
color: #7b7b7b;
}
.champion .champion-content>.score .score-rank ul li span:nth-of-type(1){
float: left;
width: 124px;
margin-left: 69px;
font-size: 16px;
color: #151517;
}
.champion .champion-content>.score .score-rank ul li span:nth-of-type(1)>img{
display: inline-block;
vertical-align: middle;
width: 25px;
height: auto;
margin: -2px 12px 0 0;
}
.champion .champion-content>.score .score-rank ul li p:nth-of-type(2){
float: left;
width: 100px;
text-align: center;
margin-left: 45px;
font-size: 16px;
color: #5f8d94;
}
.champion .champion-content>.score .score-rank ul li p:nth-of-type(3){
float: right;
width: 44px;
text-align: center;
font-size: 16px;
color: #5f8d94;
}
.champion .content .game{
width: 100%;
height: 418px;
min-height: 300px;
position: relative;
padding-top: 26px;
animation: topin 0.5s;
}
.champion .content .game .list-col1{
float: left;
height: auto;
width: 268px;
overflow: hidden;
}
.champion .content .game .list-col1 .list-head{
width: 100%;
height: 35px;
line-height: 35px;
text-align: left;
color: #29a2b4;
font-size: 16px;
font-weight: 700;
box-sizing: border-box;
padding-left: 1px;
}
.champion .content .game .list-col1 .vs{
margin-bottom: 39px;
}
.champion .content .game .list-col1 .vs .info{
width: 100%;
height: 20px;
overflow: hidden;
margin-bottom: 7px;
}
.champion .list-col1 .vs .info span:nth-of-type(1){
float: left;
height: 15px;
line-height: 15px;
padding: 0 2px;
font-size: 12px;
color: #fff;
border-radius: 2px;
margin-top: 3px;
background-color: #bcbcbc;
}
.champion .list-col1 .vs .info span:nth-of-type(2){
float: left;
margin-left: 10px;
height: 15px;
line-height: 15px;
color: #676767;
font-size: 12px;
margin-top: 3px;
}
.champion .list-col1 .vs .info a:nth-of-type(1){
border-color: #bb9a6c;
color: #bb9a6c;
float: right;
padding: 0 6px;
box-sizing: border-box;
border: 1px solid;
font-size: 14px;
height: 20px;
line-height: 18px;
margin-left: 10px;
}
.champion .list-col1 .vs .info a:nth-of-type(2){
border-color: #7ea1a6;
color: #7ea1a6;
float: right;
padding: 0 6px;
box-sizing: border-box;
border: 1px solid;
font-size: 14px;
height: 20px;
line-height: 18px;
margin-left: 10px;
}
.champion .content .game .list-col1 .vs .vsA{
width: 100%;
height: 44px;
overflow: hidden;
position: relative;
background-color: #f7f6f6;
margin-bottom: 1px;
}
.champion .content .game .list-col1 .vs .logo{
float: left;
width: 40px;
height: 44px;
text-align: center;
line-height: 41px;
margin-left: 6px;
position: relative;
}
.champion .content .game .list-col1 .vs .logo img{
display: inline-block;
vertical-align: middle;
width: 30px;
height: 30px;
}
.champion .content .game .list-col1 .vs .logo-name{
position: relative;
float: left;
font-size: 16px;
height: 44px;
line-height: 44px;
color: #676767;
margin-left: 8px;
}
.champion .content .game .list-col1 .vs .A{
float: right;
width: 23px;
height: 44px;
text-align: center;
line-height: 44px;
color: #fff;
background-color: #bcbcbc;
font-size: 16px;
font-family: tttgbnumber,sans-serif;
}
.champion .content .game .list-col1 .vs .B{
float: right;
width: 23px;
height: 44px;
text-align: center;
line-height: 44px;
color: #fff;
background-color: #86a2ad;
font-size: 16px;
font-family: tttgbnumber,sans-serif;
}
.champion .content .game .list-col1 .vs .vsB{
width: 100%;
height: 44px;
overflow: hidden;
position: relative;
background-color: #f7f6f6;
}
/* ss */
.champion .content .game .list-col2{
float: left;
height: auto;
width: 268px;
overflow: hidden;
}
.champion .content .game .list-col2 .list-head{
width: 100%;
height: 35px;
line-height: 35px;
text-align: left;
color: #29a2b4;
font-size: 16px;
font-weight: 700;
box-sizing: border-box;
padding-left: 1px;
}
.champion .content .game .list-col2 .vs{
margin-bottom: 39px;
}
.champion .content .game .list-col2 .vs .info{
width: 100%;
height: 20px;
overflow: hidden;
margin-bottom: 7px;
}
.champion .list-col2 .vs .info span:nth-of-type(1){
float: left;
height: 15px;
line-height: 15px;
padding: 0 2px;
font-size: 12px;
color: #fff;
border-radius: 2px;
margin-top: 3px;
background-color: #e68f21;
}
.champion .list-col2 .vs .info span:nth-of-type(2){
float: left;
margin-left: 10px;
height: 15px;
line-height: 15px;
color: #676767;
font-size: 12px;
margin-top: 3px;
}
.champion .list-col2 .vs .info a:nth-of-type(1){
border-color: #bb9a6c;
color: #bb9a6c;
float: right;
padding: 0 6px;
box-sizing: border-box;
border: 1px solid;
font-size: 14px;
height: 20px;
line-height: 18px;
margin-left: 10px;
}
.champion .content .game .list-col2 .vs .vsA{
width: 100%;
height: 44px;
overflow: hidden;
position: relative;
background-color: #faf6ec;
margin-bottom: 1px;
}
.champion .content .game .list-col2 .vs .logo{
float: left;
width: 40px;
height: 44px;
text-align: center;
line-height: 41px;
margin-left: 6px;
position: relative;
}
.champion .content .game .list-col2 .vs .logo img{
display: inline-block;
vertical-align: middle;
width: 30px;
height: 30px;
}
.champion .content .game .list-col2 .vs .logo-name{
position: relative;
float: left;
font-size: 16px;
height: 44px;
line-height: 44px;
color: #676767;
margin-left: 8px;
}
.champion .content .game .list-col2 .vs .A{
float: right;
width: 23px;
height: 44px;
text-align: center;
line-height: 44px;
color: #fff;
background-color: #d1a662;
font-size: 16px;
font-family: tttgbnumber,sans-serif;
}
.champion .content .game .link{
float: left;
display: block;
width: 85px;
height: 156px;
box-sizing: border-box;
border-top: 1px #c2c2c2 solid;
border-bottom: 1px #c2c2c2 solid;
margin-top: 106px;
}
.champion .content .game .link1{
float: left;
display: block;
margin-top: 106px;
background-position: 0 -452px;
width: 110px;
height: 155px;
background: url(../img/events-spr.png) 0 -452px no-repeat
}
.champion .content .game .col3{
margin-top: 75px;
}
.champion .content .game .list-col2.col3>.vs:last-child {
margin-bottom: 0;
}
.champion .champion-wrap:after{
content:"";
clear: both;
height: 0;
display: block;
}
/* 赛事中心 */
/* 英雄资料 */
.heros{
width: 100%;
padding: 66px 0;
background-color: #e3e2e2;
min-width: 1358px;
}
.heros .hero-wrap{
width: 1358px;
height: auto;
margin: 0 auto;
}
.heros .hero-wrap .hero-head{
width: 100%;
height: 35px;
position: relative;
}
.heros .hero-head h4{
float: left;
color: #0b0b0b;
font-size: 24px;
line-height: 40px;
font-weight: 400;
text-indent: 4px;
}
.heros .hero-head h4:before{
position: absolute;
content: "";
display: inline-block;
width: 4px;
height: 28px;
background-color: #1da6ba;
left: -6px;
top: 6px;
}
.heros .hero-head ul{
float: left;
width: 800px;
margin-left: 40px;
}
.heros .hero-head ul li{
float: left;
line-height: 42px;
margin-right: 40px;
color: #676767;
font-size: 16px;
letter-spacing: 1px;
transition: all 0.1s;
}
.heros .hero-head ul li.selected{
font-weight: 700;
color: #1da6ba;
}
.heros .hero-head ul li>span{
width: 20px;
height: 19px;
display: inline-block;
background: url(../img/index-spr.png) -406px -316px no-repeat;
margin-right: 9px;
vertical-align: -3px;
}
.heros .hero-head ul li:hover{
font-weight: 700;
color: #1da6ba;
}
.heros .hero-head ul li:hover>span{
background: url(../img/index-spr.png) -431px -316px no-repeat;
}
.heros .hero-head ul li.selected>span{
background: url(../img/index-spr.png) -431px -316px no-repeat;
}
.heros .hero-head>div{
float: right;
width: auto;
height: 35px;
font-size: 12px;
color: #7ea1a6;
line-height: 35px;
margin-right: 3px;
}
.heros .hero-head>div:hover{
color: #1da6ba;
font-weight: 700;
text-decoration: underline;
}
.heros .hero-head>div:hover span{
animation: arrow 1.5s ease infinite;
}
.heros .hero-content{
margin-top: 21px;
width: 100%;
height: auto;
}
.heros .hero-content .hero-content-wrap{
width: 1395px;
height: 438px;
overflow-y: scroll;
}
.heros .hero-content .hero-content-wrap ul{
widows: 100%;
height: 1232px;
}
.heros .hero-content .hero-content-wrap ul li{
width: 90px;
height: 100px;
margin: 0 16px 12px 0;
position: relative;
cursor: pointer;
overflow: hidden;
float: left;
}
.heros .hero-content ul li img{
width: 66px;
height: 66px;
margin: 0 auto;
display: block;
}
.heros .hero-content ul li p{
line-height: 30px;
text-align: center;
font-size: 12px;
color: #333;
width: 90px;
}
.heros .hero-content ul li .hero-mask{
position: absolute;
width: 66px;
height: 66px;
top: 0;
left: 12px;
background-color: rgba(0,0,0,0.65);
display: none;
}
.heros .hero-content ul li .hero-mask span{
background: url(../img/index-spr.png) -401px -226px no-repeat;
width: 22px;
height: 21px;
display: block;
margin: 24px auto 0 auto;
}
.heros .hero-content .hero-content-wrap ul li:hover .hero-mask{
display: block;
}
.heros .hero-content .hero-content-wrap ul li:hover p{
color: #1da6ba;
}
/* 英雄资料 */
/* FANART创作馆 */
.fanart{
width: 100%;
height: auto;
}
.fanart .fanart-wrap{
width: 1358px;
height: 572px;
padding: 66px 0 82px 0;
margin: 0 auto;
box-sizing: border-box;
}
.fanart .fanart-wrap .fanart-left{
float: left;
width: 820px;
height: 424px;
}
.fanart .fanart-left .fanart-left-top{
width: 100%;
height: 35px;
position: relative;
}
.fanart .fanart-left .fanart-left-top h4{
float: left;
color: #0b0b0b;
font-size: 24px;
line-height: 35px;
font-weight: 400;
text-indent: 4px;
}
.fanart .fanart-left .fanart-left-top h4:before{
position: absolute;
content: "";
display: inline-block;
width: 4px;
height: 28px;
background-color: #1da6ba;
left: -6px;
top: 6px;
}
.fanart .fanart-left .fanart-left-top>div{
float: right;
width: auto;
height: 35px;
font-size: 12px;
color: #7ea1a6;
line-height: 35px;
margin-right: 3px;
}
.fanart .fanart-left .fanart-left-top>div:hover{
color: #1da6ba;
font-weight: 700;
text-decoration: underline;
}
.fanart .fanart-left .fanart-left-top>div:hover span{
animation: arrow 1.5s ease infinite;
}
.fanart .fanart-left .fanart-left-bottom{
width: 100%;
height: 368px;
margin-top: 21px;
}
.fanart .fanart-left .fanart-left-bottom ul{
width: 840px;
height: 100%;
}
.fanart .fanart-left .fanart-left-bottom ul li{
width: 192px;
height: 176px;
margin: 0 17px 17px 0;
position: relative;
overflow: hidden;
float: left;
}
.fanart .fanart-left .fanart-left-bottom ul li>a>img{
width: 192px;
height: 192px;
transition: transform 0.3s;
}
.fanart .fanart-left .fanart-left-bottom ul li:hover .fanart-des{
transform: translateY(0)
}
.fanart .fanart-left-bottom li .fanart-des{
width: 100%;
position: absolute;
bottom: 0px;
background-color: rgba(0,0,0,0.55);
padding: 0 8px 6px 10px;
transform: translateY(90px);
transition: transform 0.3s;
}
.fanart .fanart-left-bottom li .fanart-des>a{
line-height: 24px;
font-weight: bold;
text-align: left;
box-sizing: border-box;
color: #fff;
display: block;
padding: 8px 0 8px 2px;
width: 174px;
}
.fanart .fanart-left-bottom li:hover>a img{
transform: scale(1.3);
}
.fanart .fanart-left-bottom li .fanart-des .down-des{
width: 174px;
height: 21px;
}
.fanart .fanart-left-bottom li .fanart-des .down-des .a{
float: left;
text-decoration: none;
color: #b2b2b2;
font-size: 14px;
margin-left: 2px;
}
.fanart .fanart-left-bottom li .fanart-des .down-des .a>img{
width: 22px;
height: 22px;
display: inline-block;
vertical-align: middle;
margin-top: -6px;
margin-right: 4px;
border-radius: 50%;
}
.fanart .fanart-left-bottom li .fanart-des .down-des .b{
float: right;
text-decoration: none;
color: #b2b2b2;
font-size: 14px;
}
.fanart .fanart-left-bottom li .fanart-des .down-des .b .riot{
display: inline-block;
margin-right: -2px;
background: url(../img/index-spr.png) -456px -226px no-repeat;
width: 23px;
height: 17px;
vertical-align: -3px;
}
.fanart-right{
width: 496px;
height: 424px;
float: right;
position: relative;
}
.fanart-right ul{
width: 100%;
bottom: 0;
}
.fanart-right li.lp{
width: 241px;
height: 411px;
float: left;
margin-top: 13px;
position: relative;
}
.fanart-right li.lp:hover{
transform: translateY(-10px);
filter:brightness(1.08);
transition: transform,filfer 0.5s,0.5s
}
.fanart-right li.lp img{
width: 241px;
height: 411px;
}
.fanart-right li.rp{
width: 240px;
height: 87px;
margin-bottom: 16px;
float: right;
position: relative;
}
.fanart-right li.rp img{
width: 240px;
height: 87px;
}
.fanart-right li.rp span{
position: absolute;
color: #fff;
font-size: 16px;
line-height: 87px;
width: 100%;
height: 100%;
display: block;
top: 0;
left: 0;
}
.fanart-right .rp span>i{
width: 17px;
height: 17px;
background: url(../img/index-spr.png) -484px -226px no-repeat;
display: inline-block;
vertical-align: middle;
margin: 0 10px;
}
.fanart-right>ul>li.rp:hover{
filter:brightness(1.2);
transition: filter 0.5s
}
.fanart-right>ul>li:nth-child(2){
margin-top: 55px;
}
.fanart-right li.rb{
width: 239px;
height: 58px;
float: right;
background: url(../img/index-spr.png) -193px -253px no-repeat;
position: relative;
margin-top: 2px;
}
.fanart-right li.rb:hover .arrow-media{
animation: arrow 1.1s ease infinite;
}
.fanart-right li.rb:hover .rb-ul-wraper{
height: 266px;
transition: all 0.5s
}
.fanart-right li.rb .media{
width: 100%;
height: 100%;
font-size: 16px;
display: inline-block;
text-align: center;
color: #fff;
line-height: 58px;
}
.fanart-right li.rb .media .icon-left{
width: 20px;
height: 9px;
background: url(../img/index-spr.png) -531px -226px no-repeat;
display: inline-block;
margin-right: 12px;
}
.fanart-right li.rb .media .arrow-media{
width: 15px;
height: 9px;
display: inline-block;
background: url(../img/comm-spr.png) -361px -46px no-repeat;
position: relative;
}
.fanart-right li.rb .media .icon-right{
width: 20px;
height: 9px;
background: url(../img/index-spr.png) -506px -226px no-repeat;
display: inline-block;
margin-left: 12px;
}
.fanart-right li.rb .rb-ul-wraper{
width: 239px;
height: 0;
overflow: hidden;
position: absolute;
left: 0;
top: 58px;
z-index: 1;
}
.fanart-right li.rb .rb-ul-wraper ul{
width: 239px;
height: 266px;
padding: 6px 0;
background-color: #fff;
overflow-y: scroll;
}
.fanart-right li.rb .rb-ul-wraper ul li{
width: 239px;
height: 19px;
padding-left: 12px;
box-sizing: border-box;
margin: 8px 0;
}
.fanart-right li.rb .rb-ul-wraper ul li:hover{
background-color: #eee;
}
.fanart-right li.rb .rb-ul-wraper ul li a{
width: 100%;
height: 19px;
font-size: 12px;
line-height: 19px;
color: #676767;
display: inline-block;
}
.tenc{
width: 100%;
min-width: 1230px;
padding: 45px 0;
background-color: #e3e2e2;
color: #9f9378;
font-size: 12px;
line-height: 24px;
}
.tenc .tenc-wrap{
width: 1358px;
height: 175px;
padding: 15px 20px;
position: relative;
margin: 0 auto;
}
.tenc .tenc-wrap .tenc-left{
width: 336px;
height: 100px;
float: left;
position: absolute;
top:50%;
margin-left: 20px;
margin-top: -50px;
line-height: 100px;
}
.tenc .tenc-wrap .tenc-left .footlogo{
display: inline-block;
width: 198px;
height: 34px;
margin: 0 24px 0 8px;
background: url(../img/topfoot-spr.png) -216px 0 no-repeat;
vertical-align: middle;
}
.tenc .tenc-wrap .tenc-left .riotlogo{
background: url(../img/topfoot-spr.png) -216px -84px no-repeat;
display: inline-block;
width: 83px;
height: 56px;
vertical-align: middle;
margin: 0 0 0 8px;
}
.tenc .tenc-wrap .tenc-right{
float: right;
width: auto;
margin-right: 69px;
}
.tenc .tenc-wrap .tenc-right li>a{
color: #9f9378;
}
.tenc .tenc-wrap .tenc-right li>i{
font-style: normal;
}
/* FANART创作馆 */
/* 侧边栏 */
.nav-bar{
position: fixed;
right: 0;
bottom: 18%;
background-color: #fff;
border-radius: 9px 0 0 9px;
width: 70px;
height: auto;
}
.nav-bar ul{
width: 66px;
margin-left: 4px;
}
.nav-bar ul li{
width: 66px;
height: 53px;
margin-bottom: 6px;
}
.nav-bar ul li a{
width: 100%;
height: 100%;
text-align: center;
color: #92a8ab;
font-size: 12px;
display: block;
}
.nav-bar ul li a span{
display: inline-block;
width: 66px;
height: 35px;
line-height: 35px;
}
.nav-bar ul li a span>i{
width: 20px;
height: 20px;
vertical-align: middle;
display: inline-block;
background: url(../img/comm-spr.png) no-repeat;
}
.nav-bar ul li:nth-child(1) a span>i{
background-position: -243px -71px;
}
.nav-bar ul li:nth-child(2) a span>i{
background-position:-315px -46px;
}
.nav-bar ul li:nth-child(3) a span>i{
background-position: -291px -12px;
width: 22px;
}
.nav-bar ul li:nth-child(4) a span>i{
background-position: -260px -96px;
}
.nav-bar ul li:nth-child(5) a span>i{
background-position: -220px -46px;
width: 22px;
}
.nav-bar ul li:nth-child(6 ) a span>i{
background-position: -193px -12px;
width: 33px;
height: 29px;
}
.nav-bar ul li:hover a{
color: #309cac;
font-weight: 700;
}
.nav-bar ul li:hover a i{
animation: jump 1.2s 1
}
/* 侧边栏 */
/* 特别动画 */
@keyframes topin{
from {
transform: translateY(-10px);
opacity: 0;
}
to{
transform: translateY(0px);
opacity: 1;
}
}
@keyframes topin_reverse{
from {
transform: translateY(0px);
opacity: 1;
}
to{
transform: translateY(-10px);
opacity: 0;
display: none;
}
}
@-webkit-keyframes topin{
from {
transform: translateY(-10px);
opacity: 0;
}
to{
transform: translateY(0px);
opacity: 1;
}
}
@keyframes arrow{
0%{
left: 0px;
}
25%{
left: 8px;
}
50%{
left: 0px;
}
65%{
left: 6px;
}
80%{
left: 0px;
}
100%{
left: 0px;
}
}
@-webkit-keyframes arrow{
0%{
margin-left: 4px;
}
25%{
margin-left: 12px;
}
50%{
margin-left: 4px;
}
75%{
margin-left: 8px;
}
100%{
margin-left: 4px;
}
}
@keyframes scale1 {
0%{
transform: scale(0.7);
}
35%{
transform: scale(1.2);
}
50%{
transform: scale(0.8);
}
75%{
transform: scale(1.1);
}
85%{
transform: scale(1);
}
100%{
transform: scale(1);
}
}
@keyframes bottom1 {
0%{
top: 10px;
opacity: 0.4
}
100%{
top: 0px;
opacity: 1
}
}
@keyframes jump{
25%{
transform: translateY(-10px) rotate(10deg)
}
50%{
transform: translateY(0) rotate(0deg)
}
75%{
transform: translateY(-5px) rotate(-3deg)
}
}
/* 特别动画 */
window.onload = function (){
// 1、滚动时切换小图
window.onscroll = function(){
var head = document.getElementsByClassName('head')[0];
var detail = document.getElementsByClassName("detail")[0];
if(head.style.height != "360px"){
detail.style.bottom = "32px";
startMove(head,{ "height":360,});
head.style.backgroundImage= "url('img/bgc.jpeg')"
}
}
// 2、顶部mouseenter时显示，mouseleave时消失
var menuUl = document.getElementById("menu_left");
var MaskAll = document.getElementById("mask_all");
var right = document.getElementsByClassName("right")[0];
var phone = document.getElementsByClassName("phone")[0];
var QRC = document.getElementById("QRC");
var login = document.getElementsByClassName("login")[0];
var loginMask = document.getElementById("login_mask");
var arrowAll = document.getElementsByClassName("arrow");
var AllMenuLi = menuUl.getElementsByTagName('li');
for (var i = 1 ; i < AllMenuLi.length; i ++){
AllMenuLi[i].onmouseenter = function(){
MaskAll.className = "mask-all show"
}
}
MaskAll.onmouseleave = function(){
MaskAll.className = "mask-all"
}
right.onmouseenter = function(){
MaskAll.className = "mask-all"
}
phone.onmouseenter = function(){
loginMask.className = "login-mask";
QRC.className = "QRC show";
phone.onmouseleave = function(){
QRC.className = "QRC"
}
}
login.onmouseenter = function(){
QRC.className = "QRC"
loginMask.className = "login-mask show"
login.onmouseleave= function(){
loginMask.className = "login-mask"
}
loginMask.onmouseenter = function(){
loginMask.className = "login-mask show"
}
loginMask.onmouseleave = function(){
loginMask.className = "login-mask"
}
}
var arrow = arrowAll[0]
arrow.onmouseenter = function(){
arrow.style.animation= "arrow 1.2s linear infinite"
}
arrow.onmouseleave = function(){
arrow.style.animation = ""
}
// 3、轮播图效果
var promo = document.getElementsByClassName('promo')[0];
var proPic = document.getElementsByClassName('promo-pic')[0];
var proPics = proPic.getElementsByTagName('li');
var proLi = document.getElementsByClassName('promo-li') [0];
var proLis = proLi.getElementsByTagName('li');
// 3.1自动播放
var iNow = 0;
var index = 0;
clearInterval(timer);
var timer = setInterval(function(){
var width = 820;
if (iNow == proPics.length - 1){iNow = 0;}
startMove(proPic,{
"left": - width * iNow,
})
for(var j = 0; j < proLis.length; j ++){
proLis[j].className = "";
}
proLis[iNow].className = "current";
iNow ++;
},1000)
// 3.2 进入暂停播放
promo.onmouseenter = function(){
clearInterval(timer);
}
promo.onmouseleave = function(){
timer = setInterval(function(){
var width = 820;
if (iNow == proPics.length - 1) iNow = 0;
startMove(proPic,{
"left": - width * iNow,
})
for(var j = 0; j < proLis.length; j ++){
proLis[j].className = "";
}
proLis[iNow].className = "current";
iNow ++;
},1000)
}
// 3.3 Li控制播放
for (var i = 0; i < proLis.length; i ++){
proLis[i][index] = i;
proLis[i].onmouseenter = function(){
for(var j = 0; j < proLis.length; j ++){
proLis[j].className = "";
}
this.className = "current";
var width = 820;
startMove(proPic,{
"left": - width * this[index],
})
iNow = this[index];
}
}
// 4、公告栏效果
var infoHead = document.getElementsByClassName("info-head")[0];
var infoAllLis = infoHead.getElementsByTagName("li");
var infoContent = document.getElementsByClassName("info-content")[0];
var infoAllUls = infoContent.getElementsByTagName("ul");
for (var i = 0; i < infoAllLis.length; i ++){
(function(i){
var infoUl = infoAllUls[i];
infoAllLis[i].onmouseenter = function(){
for (var j = 0; j < infoAllLis.length; j ++){
infoAllLis[j].className = "";
infoAllUls[j].style.display = "none";
}
this.className = "current";
infoUl.style.display = "block"
}
}(i))
}
// 5、活动栏效果
var activityTop = document.getElementById("activity_top");
var activityDown = document.getElementById("activity_down");
var activityTopLis = activityTop.getElementsByTagName("li");
var activityDownUls = activityDown.getElementsByTagName("ul");
for (var i = 0; i < activityTopLis.length; i++ ){
var activityLi = activityTopLis[i];
activityLi.index = i;
activityLi.onmouseenter = function(){
for (var j = 0; j < activityTopLis.length; j ++ ){
activityTopLis[j].className = "";
activityDownUls[j].className = "";
}
this.className = "selected"
var activityUl = activityDownUls[this.index]
activityUl.className = "selected"
}
// 6、更多皮肤显示效果
}
var skin = document.getElementsByClassName("skin")[0]
var moreSkin = document.getElementsByClassName("more-skin")[0];
skin.onmouseenter = function(){
moreSkin.style.display = "block";
moreSkin.style.animation = "topin ease 1.3s 1";
}
var time1;
skin.onmouseleave = function(){
timer1 = setTimeout(function(){
moreSkin.style.animation = "topin_reverse ease 1.3s 1";
moreSkin.style.display = "none";
},300)
}
moreSkin.onmouseenter = function(){
clearTimeout(timer1);
moreSkin.style.display = "block";
}
moreSkin.onmouseleave = function(){
moreSkin.style.animation = "topin_reverse ease 1.3s 1";
moreSkin.style.display = "none";
}
// 7、给每个小标题的下面装饰添加鼠标滚动效果
headDecoration("video");
headDecoration("alblum");
// 8.1、专辑页的换屏效果
var alblumMiddle = document.getElementById("alblum_middle");
var alblunUls = alblumMiddle.getElementsByTagName("ul");
// 8.2、专辑页的滚动效果
var alblum = document.getElementById("alblum");
var alblunUl = alblum.getElementsByClassName("alblum-selected")[0];
var alblumLis = alblunUl.getElementsByTagName("li");
var leftBtn = alblum.getElementsByClassName("left-btn")[0];
var rightBtn = alblum.getElementsByClassName("right-btn")[0];
var alblumLiWidth = 171;
var albInow = 1;
var gx = Math.floor((alblumLis.length -3)/3);
alblunUl.style.width = alblumLiWidth * ( alblumLis.length + 1) +"px";
rightBtn.onclick = function(){
if(albInow > gx + 1) {
albInow = 1;
alblunUl.style.left = "0";
}
if(albInow <= gx){
startMove(alblunUl,{
"left" : - (albInow * 3 * alblumLiWidth),
});
}else if(albInow == gx + 1 ){
startMove(alblunUl,{
"left" : - ((albInow-1) * 3 * alblumLiWidth) - ((alblumLis.length % 3) * alblumLiWidth),
});
}
albInow ++;
}
leftBtn.onclick = function(){
if(albInow == 1){
albInow = 4 ;
alblunUl.style.left = - (alblumLis.length -3 ) * alblumLiWidth+ "px";
}
if(albInow == 2){
startMove(alblunUl,{
"left" : 0
});
}else if (albInow == 3){
startMove(alblunUl,{
"left" : - (3 * alblumLiWidth),
});
}else{
startMove(alblunUl,{
"left" : - (6 * alblumLiWidth),
});
}
albInow --;
}
// 8.3、专辑页的自动滚动效果
var albTimer = setInterval(function(){
if(albInow > gx + 1) {
albInow = 1;
alblunUl.style.left = "0";
}
if(albInow <= gx){
startMove(alblunUl,{
"left" : - (albInow * 3 * alblumLiWidth),
});
}else if(albInow == gx + 1 ){
startMove(alblunUl,{
"left" : - ((albInow-1) * 3 * alblumLiWidth) - ((alblumLis.length % 3) * alblumLiWidth),
});
}
albInow ++;
},2000)
alblunUl.onmouseenter = function(){
clearInterval(albTimer);
}
leftBtn.onmouseenter = function(){
clearInterval(albTimer);
}
rightBtn.onmouseenter = function(){
clearInterval(albTimer);
}
alblunUl.onmouseleave = function(){
alblumMove();
}
leftBtn.onmouseleave = function(){
alblumMove();
}
rightBtn.onmouseleave = function(){
alblumMove();
}
// 9、赛事中心翻屏效果
var championContent = document.getElementById("champion_content");
var chLeftBtn = championContent.getElementsByClassName("left-btn")[0];
var chRightBtn = championContent.getElementsByClassName("right-btn")[0];
var championUl = championContent.getElementsByTagName("ul")[0];
var championLis = championUl.getElementsByTagName("li");
var champNow = 1;
var maxChampNow = parseInt(championLis.length/5)
championUl.style.width = championLis.length *275 + "px";
chRightBtn.onclick = function(){
if(champNow >= maxChampNow){return}
startMove(championUl,{
"left": - champNow * 5 * 275,
})
champNow ++;
}
chLeftBtn.onclick = function(){
if(champNow <= 1){return}
startMove(championUl,{
"left": - (champNow-2) * 5 * 275 ,
})
champNow --;
}
// 10、选手滚动效果
var playerList;
var matchTop = document.getElementById("match_top");
var matchLis = matchTop.getElementsByTagName("li");
var matchBottom = document.getElementById("match_bottom");
var player,matchLi,oneLi;
for (var i = 0; i < matchLis.length; i++){
matchLi = matchLis[i];
matchLi.setAttribute("index",i)
matchLi.onmouseenter = function(){
var playerLists = matchBottom.getElementsByTagName('ul');
var playerList = playerLists[this.getAttribute("index")];
var allLis = matchBottom.getElementsByTagName('li')
var players = playerList.getElementsByTagName("li");
for(var j = 0; j<playerLists.length;j ++){
playerLists[j].style.visibility = "hidden";
matchLis[j].className = "none"
}
for(var j = 0; j<allLis.length;j ++){
oneLi = allLis[j];
oneLi.className = "none";
}
playerList.style.visibility = "visible";
this.className = "selected"
for(var i = 0; i < players.length; i ++){
player = players[i];
player.className = "shows";
}
}
}
// 11、赛事中心切换
var champHead = document.getElementById("champion_top")
var champHeadLis = champHead.getElementsByTagName("li")
var champ1 = document.getElementById("champion_content")
var champ2 = document.getElementById("game")
champHeadLis[0].onmouseenter = function(){
champ1.style.display = "block";
champ2.style.display = "none";
this.className = "selected"
champHeadLis[1].className = "none"
}
champHeadLis[1].onmouseenter = function(){
champ2.style.display = "block";
champ1.style.display = "none"
this.className = "selected"
champHeadLis[0].className = "none"
}
// 12、动态添加英雄图片
var jsonHero = {
"暗裔剑魔":"Aatrox",
"九尾妖狐":"Ahri",
"暗影之拳":"Akali",
"牛头酋长":"Alistar",
"殇之木乃伊":"Amumu",
"冰晶凤凰":"Anivia",
"黑暗之女":"Annie",
"寒冰射手":"Ashe",
"铸星龙王":"AurelionSol",
"沙漠皇帝":"Azir",
"星界游神":"Bard",
"蒸汽机器人":"Blitzcrank",
"复仇焰魂":"Brand",
"弗雷尔卓德之心":"Braum",
"皮城女警":"Caitlyn",
"魔蛇之拥":"Cassiopeia",
"虚空恐惧":"ChoGath",
"英勇投弹手":"Corki",
"诺克萨斯之手":"Darius",
"皎月女神":"Diana",
"祖安狂人":"DrMundo",
"荣耀行刑官":"Draven",
"时间刺客":"Ekko",
"蜘蛛女皇":"Elise",
"寡妇制造者":"Evelynn",
"探险家":"Ezreal",
"末日使者":"Fiddlesticks",
"无双剑姬":"Fiora",
"潮汐海灵":"Fizz",
"哨兵之殇":"Galio",
"海洋之灾":"Gangplank",
"德玛西亚之力":"Garen",
"迷失之牙":"Gnar",
"酒桶":"Gragas",
"法外狂徒":"Graves",
"战争之影":"Hecarim",
"大发明家":"Heimerdinger",
"海兽祭司":"Illaoi",
"刀锋意志":"Irelia",
"翠神":"Ivern",
"风暴之怒":"Janna",
"德玛西亚皇子":"JarvanIV",
"武器大师":"Jax",
"未来守护者":"Jayce",
"戏命师":"Jhin",
"暴走萝莉":"Jinx",
"复仇之矛":"Kalista",
"天启者":"Karma",
"死亡颂唱者":"Karthus",
"虚空行者":"Kassadin",
"不祥之刃":"Katarina",
"审判天使":"Kayle",
"狂暴之心":"Kennen",
"虚空掠夺者":"Khazix",
"永猎双子":"Kindred",
"暴怒骑士":"Kled",
"深渊巨口":"KogMaw",
"诡术妖姬":"LeBlanc",
"盲僧":"LeeSin",
"曙光女神":"Leona",
"冰霜女巫":"Lissandra",
"圣枪游侠":"Lucian",
"仙灵女巫":"Lulu",
"光辉女郎":"Lux",
"熔岩巨兽":"Malphite",
"虚空先知":"Malzahar",
"扭曲树精":"Maokai",
"无极剑圣":"MasterYi",
"赏金猎人":"MissFortune",
"金属大师":"Mordekaiser",
"堕落天使":"Morgana",
"唤潮鲛姬":"Nami",
"沙漠死神":"Nasus",
"深海泰坦":"Nautilus",
"狂野女猎手":"Nidalee",
"永恒梦魇":"Nocturne",
"雪人骑士":"Nunu",
"狂战士":"Olaf",
"发条魔灵":"Orianna",
"战争之王":"Pantheon",
"钢铁大使":"Poppy",
"德玛西亚之翼":"Quinn",
"披甲龙龟":"Rammus",
"虚空遁地兽":"RekSai",
"荒漠屠夫":"Renekton",
"傲之追猎者":"Rengar",
"放逐之刃":"Riven",
"机械公敌":"Rumble",
"流浪法师":"Ryze",
"凛冬之怒":"Sejuani",
"恶魔小丑":"Shaco",
"暮光之眼":"Shen",
"龙血武姬":"Shyvana",
"炼金术士":"Singed",
"亡灵勇士":"Sion",
"战争女神":"Sivir",
"水晶先锋":"Skarner",
"琴瑟仙女":"Sona",
"众星之子":"Soraka",
"策士统领":"Swain",
"暗黑元首":"Syndra",
"岩雀":"Taliyah",
"刀锋之影":"Talon",
"河流之王":"TahmKench",
"宝石骑士":"Taric",
"迅捷斥候":"Teemo",
"魂锁典狱长":"Thresh",
"麦林炮手":"Tristana",
"巨魔之王":"Trundle",
"蛮族之王":"Tryndamere",
"卡牌大师":"TwistedFate",
"瘟疫之源":"Twitch",
"兽灵行者":"Udyr",
"首领之傲":"Urgot",
"惩戒之箭":"Varus",
"暗夜猎手":"Vayne",
"邪恶小法师":"Veigar",
"虚空之眼":"VelKoz",
"皮城执法官":"Vi",
"机械先驱":"Viktor",
"猩红收割者":"Vladimir",
"雷霆咆哮":"Volibear",
"嗜血猎手":"Warwick",
"齐天大圣":"MonkeyKing",
"远古巫灵":"Xerath",
"德邦总管":"XinZhao",
"疾风剑豪":"Yasuo",
"掘墓者":"Yorick",
"生化魔人":"Zac",
"影流之主":"Zed",
"爆破鬼才":"Ziggs",
"时光守护者":"Zilean",
"荆棘之兴":"Zyra",}
var heroUl = document.getElementById("hero-ul")
for (var attr in jsonHero){
var newHeroLi = document.createElement("li");
newHeroLi.innerHTML = "<img src='./img/hero1/" + jsonHero[attr] + ".png' alt=''>" +
"<p>" + attr + "</p>" +
" <div class='hero-mask'><span></span></div>"
heroUl.appendChild(newHeroLi)
}
// 12.1 图片上方点击效果
// 函数
function headDecoration(id){
var allTop = document.getElementById(id);
var oneTop = allTop.getElementsByClassName("top")[0];
var allTopLis = oneTop.getElementsByTagName("li");
var oneTopLi;
for (var i = 0; i < allTopLis.length; i ++ ){
oneTopLi = allTopLis[i];
oneTopLi.onmouseenter = function(){
for (var k = 0; k < allTopLis.length; k ++){
allTopLis[k].className = "";
}
this.className = "selected";
}
}
}
function alblumMove(){
clearInterval(albTimer);
albTimer = setInterval(function(){
if(albInow > gx + 1) {
albInow = 1;
alblunUl.style.left = "0";
}
if(albInow <= gx){
startMove(alblunUl,{
"left" : - (albInow * 3 * alblumLiWidth),
});
}else if(albInow == gx + 1 ){
startMove(alblunUl,{
"left" : - ((albInow-1) * 3 * alblumLiWidth) - ((alblumLis.length % 3) * alblumLiWidth),
})
}
albInow ++;
},2000);
}
}
function startMove(obj, json, fnEnd){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var bStop = true;
for (var attr in json){
var cur = 0;
if (attr == "opacity"){
cur = Math.round(parseFloat(getStyle(obj,attr))*100);
}
else{
cur = parseInt(getStyle(obj,attr));
}
var speed = (json[attr]-cur)/4
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (cur != json[attr]) bStop =false;
if (attr == 'opacity'){
obj.style.filter ="alpha(opacity = " + (cur +speed )+")";
obj.style.opacity = (cur + speed )/100;
}
else{
obj.style[attr] = cur + speed +"px";
}
}
if (bStop){
clearInterval(obj.timer);
if(fnEnd) fnEnd();
}
},30)
}
function getStyle(obj, attr){
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr];
}
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
