极盗者-带你领略八项极限挑战(含代码)
<!-- HTML代码片段中请勿添加<body>标签 //-->
<div id="container">
</div>
<!-- 推荐开源CDN来选取需引用的外部JS //-->
<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>
<!--
Please note, that you can apply .m--global-blending-active to .fnc-slider
to enable blend-mode for all background-images or apply .m--blend-bg-active
to some specific slides (.fnc-slide). It's disabled by default in this demo,
because it requires specific images, where more than 50% of bg is transparent or monotone
-->
<div class="demo-cont">
<!-- slider start -->
<div class="fnc-slider example-slider">
<div class="fnc-slider__slides">
<!-- slide start -->
<div class="fnc-slide m--blend-green m--active-slide">
<div class="fnc-slide__inner">
<div class="fnc-slide__mask">
<div class="fnc-slide__mask-inner"></div>
</div>
<div class="fnc-slide__content">
<h2 class="fnc-slide__heading">
<div class="fnc-slide__heading-line">
<span>1</span>
</div>
<div class="fnc-slide__heading-line">
<span>山地越野</span>
</div>
</h2>
<button type="button" class="fnc-slide__action-btn">
更多极限
<span data-text="Credits">更多极限</span>
</button>
</div>
</div>
</div>
<!-- slide end -->
<!-- slide start -->
<div class="fnc-slide m--blend-dark">
<div class="fnc-slide__inner">
<div class="fnc-slide__mask">
<div class="fnc-slide__mask-inner"></div>
</div>
<div class="fnc-slide__content">
<h2 class="fnc-slide__heading">
<div class="fnc-slide__heading-line">
<span>2</span>
</div>
<div class="fnc-slide__heading-line">
<span>翼装飞行</span>
</div>
</h2>
<button type="button" class="fnc-slide__action-btn">
更多极限
<span data-text="Credits">更多极限</span>
</button>
</div>
</div>
</div>
<!-- slide end -->
<!-- slide start -->
<div class="fnc-slide m--blend-red">
<div class="fnc-slide__inner">
<div class="fnc-slide__mask">
<div class="fnc-slide__mask-inner"></div>
</div>
<div class="fnc-slide__content">
<h2 class="fnc-slide__heading">
<div class="fnc-slide__heading-line">
<span>3</span>
</div>
<div class="fnc-slide__heading-line">
<span>高山滑雪</span>
</div>
</h2>
<button type="button" class="fnc-slide__action-btn">
更多极限
<span data-text="Credits">更多极限</span>
</button>
</div>
</div>
</div>
<!-- slide end -->
<!-- slide start -->
<div class="fnc-slide m--blend-blue">
<div class="fnc-slide__inner">
<div class="fnc-slide__mask">
<div class="fnc-slide__mask-inner"></div>
</div>
<div class="fnc-slide__content">
<h2 class="fnc-slide__heading">
<div class="fnc-slide__heading-line">
<span>4</span>
</div>
<div class="fnc-slide__heading-line">
<span>徒手攀岩</span>
</div>
</h2>
<button type="button" class="fnc-slide__action-btn">
更多极限
<span data-text="Credits">更多极限</span>
</button>
</div>
</div>
</div>
<!-- slide end -->
</div>
<nav class="fnc-nav">
<div class="fnc-nav__bgs">
<div class="fnc-nav__bg m--navbg-green m--active-nav-bg"></div>
<div class="fnc-nav__bg m--navbg-dark"></div>
<div class="fnc-nav__bg m--navbg-red"></div>
<div class="fnc-nav__bg m--navbg-blue"></div>
</div>
<div class="fnc-nav__controls">
<button class="fnc-nav__control">
山之永住
<span class="fnc-nav__control-progress"></span>
</button>
<button class="fnc-nav__control">
风之永动
<span class="fnc-nav__control-progress"></span>
</button>
<button class="fnc-nav__control">
冰之固结
<span class="fnc-nav__control-progress"></span>
</button>
<button class="fnc-nav__control">
生命主宰
<span class="fnc-nav__control-progress"></span>
</button>
</div>
</nav>
</div>
<!-- slider end -->
<div class="demo-cont__credits">
<div class="demo-cont__credits-close"></div>
<h3 class="demo-cont__credits-heading">尾崎八项挑战</h3>
<h4>地之觉醒(天坑着陆)</h4>
<h4>水之生灵(自然冲浪)</h4>
<h4>风之永动(翼装飞行)</h4>
<h4>冰之固结(高山滑雪)</h4>
<h4> 山之永固(山地越野)</h4>
<h4>生命主宰(徒手攀岩)</h4>
<h4>绝对信任(信念之跳) </h4>
</div>
</div>
更多代码:http://www.gbtags.com/gb/rtreplayerpreview/2421.htm
转载于:https://www.cnblogs.com/gbtagscom/p/5057913.html
极盗者-带你领略八项极限挑战(含代码)相关推荐
- 八维计算机学校宿迁,带您领略八维宿迁校区的大美风光(上)
带您领略八维宿迁校区的大美风光(上) 来源:北京八维教育| 2020-05-08| 阅读量:1779 "天共水,水远与天连.天净水平寒月漾,水光月色两相兼.月映水中天. 人与景,人景古难全. ...
- 买入股票后必须遵守的八项原则
买入股票以后,如果你有时间盯盘,选择的又是短线投资方式,那么,在遵守三大纪律的前提下,注意掌握运用好以下八项注意,可助你投资过程更加完美. 一要注意波段操作,追求利润更大化.掌握一种应手的指标,紧盯手 ...
- 设计师:设计师之家装材料知识之家装八项(吊顶材料、门窗材料、五金材料、墙面材料、地面材料、胶粘材料、油漆材料、水电材料等)之详细攻略
设计师:设计师之家装材料知识之家装八项(吊顶材料.门窗材料.五金材料.墙面材料.地面材料.胶粘材料.油漆材料.水电材料等)之详细攻略 目录 家装八项 吊顶材料 门窗材料 五金材料 墙面材料 地面材料 ...
- 一名合格的IT项目经理 这八项核心技能不能缺
优秀的IT项目管理者决定着业务举措的最终成败,但真正的顶尖人才还需要具备独特的综合性技能储备--既包括硬技术水平.又拥有软技能素养.在今天的文章中,我们将一同了解招募项目管理专家时需要关注的八项核心技 ...
- “网络相亲”三大纪律八项注意
一.三大纪律 1.见面前一定要互换照片 这并不是说我们那么在乎对方的相貌,而是因为人对于容貌有一个适应和接受的过程,就是再其貌不扬的人,看得久了,有心理承受能力了,也能接受.但是如果没有经过这 ...
- 单反相机镜头的ldquo;三大纪律,八项注意rdquo;
(转至:http://www.xcar.com.cn/bbs/viewthread.php?tid=11995281&extra=page%3D1&showthread=&pa ...
- 博客园客户端UAP开发随笔 -- App UI设计的三大纪律八项注意
前言 每一个页面都是这个App的门面,尤其是主页面,看上去干净整洁清爽宜人容易操作,那么你的App就成功了一半.这也反映出了你这个开发团队的基本审美素质和设计理念.如果你不是一个团队,而是一个个人开发 ...
- 电子杂志制作软件:iebook超级精灵2008金牌版 八项全球首创•八大领先技术
八项全球首创•八大领先技术 iebook超级精灵2008八项全球首创: 1.全球首创•自定义杂志制作尺寸大小,根据需求任意更改尺寸,适合版面创意效果: 2.全球首创•自定义杂志皮肤任意更换,超多模版皮 ...
- 攒机的“三大忌律 八项注意”
对于那些想攒机且又对电脑初来乍到的朋友来说,最应该防范的就是传统观念的惯性和奸商的忽悠.我们怎么样才能造就一身反忽悠的本领呢?那就听我总结一下攒机的"三大'忌'律 八项注意"吧. ...
最新文章
- LeetCode(7.整数反转)JAVA
- mfc对话框在不同计算机上显示不全
- 前台一键备份数据库+PHP实现方式
- 使用jquery版本的viewer.js图片更新的问题
- 小米集团本周再回购1920万港元股票
- webstorm plugins emmet
- PhpSpreadsheet如何读取excel文件
- 【转】ASP.NET AJAX入门系列(9):使用ScriptManager控件
- 绘制Linux/Android设备的内存动态变化趋势图
- 按键精灵java_Java 按键精灵
- JAVA实现 - 问题 G: 超大型 LED 显示屏
- 博饼程序-Java实验
- ACL 2022 | PLATO-LTM:具有长期记忆机制的对话生成框架
- vue有纵向和横向表头表格
- 开机所有网卡全部down掉解决方法,ens33 down
- 玻色量子CEO文凯受邀出席首经贸金融学院系列讲座
- CSS:颜色、背景和剪切
- DNA: 人类的终极U盘
- 查看表之间的关系 需要在eas中的商业分析-扩展报表中心-报表平台下的语义层方案管理...
- php正则表达式替换字符,php正则表达式如何替换字符
热门文章
- 缓存解释(一级缓存,二级缓存)
- 电脑端无需下载软件制作动图教程
- 【下载查询资料】资料链接_liangchaoxi的IT博客_新浪博客
- 高尔夫launch monitor
- android--emo的来源
- Ubuntu14下制作绿色版MariaDB_20160601_七侠镇莫尛貝
- 初次组装台式机-618自营-装机配置单-3000价位中上普通家用型主机
- Unity单例模式写法
- 【翻译】PCI Express –信号完整性和EMI
- python解析xml文件最好选用的模块_用Python解析XML文件