HTML 播放器效果

效果图

实现代码

<!DOCTYPE HTML>
<html><head><title>爱看动漫社区 | 首页 </title><link href="css/bootstrap.css" rel='stylesheet' type='text/css' /><!-- jQuery  --><script src="js/jquery-1.11.0.min.js"></script><!-- 自定义样式 --><link href="css/style.css" rel='stylesheet' type='text/css' /><!-- 自定义样式 --><meta name="viewport" content="width=device-width, initial-scale=1"><scripttype="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script><script type="text/javascript" src="js/jquery.mixitup.min.js"></script><script type="text/javascript">$(function () {var filterList = {init: function () {// MixItUp插件$('#portfoliolist').mixitup({targetSelector: '.portfolio',filterSelector: '.filter',effects: ['fade'],easing: 'snap',onMixEnd: filterList.hoverEffect()});},hoverEffect: function () {$('#portfoliolist .portfolio').hover(function () {$(this).find('.label').stop().animate({ bottom: 0 }, 200, 'easeOutQuad');$(this).find('img').stop().animate({ top: -30 }, 500, 'easeOutQuad');},function () {$(this).find('.label').stop().animate({ bottom: -40 }, 200, 'easeInQuad');$(this).find('img').stop().animate({ top: 0 }, 300, 'easeOutQuad');});}};filterList.init();});	</script>
</head><body><!-- 头部 Starts --><div class="header"><div class="container"><div class="logo"><a href="index.html"><img style="height: 120px;" src="images/logo.png" alt=""></a></div><span class="menu"></span><div class="navigation"><ul class="navig cl-effect-3"><li><a href="index.html">首页</a></li><li><a href="anime.html">动漫</a></li><li><a href="blog.html">博客</a></li><li><a href="features.html">特色</a></li><li><a href="contact.html">联系我们</a></li></ul><div class="search-bar"><input type="text" placeholder="查找" required="" value="" /><input type="submit" value="" /></div><div class="clearfix"></div><script>$("span.menu").click(function () {$(".navigation").slideToggle("slow", function () {});});</script></div><div class="clearfix"></div></div></div><!-- <div class="banner"></div> --><!-- 头部 Ends --><div class="banner-bot"><div class="container"><h2>欢迎来到动漫的世界</h2><p>在这里,你将会探索无限的想象力和奇幻。动漫是一门独特的艺术形式,融合了绚丽的画面、扣人心弦的故事和丰富的角色。它不仅是一种娱乐方式,更是一种文化的表达。我们为您精心准备了各种精彩纷呈的动漫作品,让您置身于一个充满激情和创造力的世界。无论您是喜欢浪漫的爱情故事、惊险的冒险旅程还是激烈的战斗场面,我们都有适合您的选择。通过观看动漫,您可以找到自己的角色模板,感受到人物的成长和奋斗,甚至获得启发和引导。动漫不仅仅是一种娱乐,它也是我们思考问题、面对挑战并寻找自我认同的窗口。</p><p>我们希望通过这个平台,与您分享我们钟爱的动漫作品,并为您提供一个交流与热爱动漫的社区。在这里,您可以结识志同道合的朋友,一起讨论剧情、分享心得,交流对动漫的热爱与理解。现在,让我们一同探索动漫的魅力吧!欢迎来到我们的世界,动漫迷们的天堂!</p><!-- <nav class="cl-effect-3"><a href="#">More</a></nav> --></div></div><!-- 画布 Starts --><div class="gallery"><div class="container"><h3>热门推荐</h3><div class="gallery-top"><!-- <ul id="filters" class="clearfix"><li><span class="filter active" data-filter="app card icon logo web">1</span></li><li><span class="filter" data-filter="app">2</span></li><li><span class="filter" data-filter="card">3</span></li><li><span class="filter" data-filter="icon">4</span></li></ul> --><div id="portfoliolist"><div class="portfolio app mix_all" data-cat="app" style="display: inline-block; opacity: 1;"><div class="portfolio-wrapper"><a href="single.html" class="b-link-stripe b-animate-go  thickbox"><img src="images/pic1.jpg" /><div class="b-wrapper"><h2 class="b-animate b-from-left    b-delay03 "> </h2></div></a></div></div><div class="portfolio icon mix_all" data-cat="icon" style="display: inline-block; opacity: 1;"><div class="portfolio-wrapper"><a href="single.html" class="b-link-stripe b-animate-go  thickbox"><img src="images/pic2.jpg" /><div class="b-wrapper"><h2 class="b-animate b-from-left    b-delay03 "> </h2></div></a></div></div><div class="portfolio card mix_all" data-cat="card" style="display: inline-block; opacity: 1;"><div class="portfolio-wrapper"><a href="single.html" class="b-link-stripe b-animate-go  thickbox"><img src="images/pic3.jpg" /><div class="b-wrapper"><h2 class="b-animate b-from-left    b-delay03 "> </h2></div></a></div></div><div class="portfolio logos mix_all" data-cat="logo" style="display: inline-block; opacity: 1;"><div class="portfolio-wrapper"><a href="single.html" class="b-link-stripe b-animate-go  thickbox"><img src="images/pic4.jpg" /><div class="b-wrapper"><h2 class="b-animate b-from-left    b-delay03 "> </h2></div></a></div></div><div class="portfolio card mix_all" data-cat="card" style="display: inline-block; opacity: 1;"><div class="portfolio-wrapper"><a href="single.html" class="b-link-stripe b-animate-go  thickbox"><img src="images/pic5.jpg" /><div class="b-wrapper"><h2 class="b-animate b-from-left    b-delay03 "> </h2></div></a></div></div></div></div></div></div><!-- 画布 Ends Here --><!-- Video Part starts Here --><div class="video-serch"><div class="container"><div class="col-md-6 vid-col"><p>飞跃次元:探索动漫的奇幻世界,畅享无限想象和激情</p><p>《飞跃次元:探索动漫的奇幻世界,畅享无限想象和激情!》是一个引人入胜的动漫作品。故事发生在一个充满神秘和魔法的平行宇宙中,讲述了一群年轻的英雄们的冒险旅程。主人公们身负使命,踏上了探索未知的征程。他们将穿越不同的次元,与各种魔法生物和强大的敌人展开激烈的战斗。同时,他们也会遇到各种挑战、困难和考验,需要勇气、智慧和团队合作来克服。这个动漫作品通过精美绝伦的画面、扣人心弦的剧情和丰富多样的角色,带领观众进入一个充满奇幻和创造力的世界。在这里,您将会体验到带有浓厚日本文化特色的动漫风格,感受到情感的震撼和成长的力量。</p></div><div class="col-md-6 vid-coll"><img src="images/vid-img.jpg" alt=""><div class="play-but"><a href="#small-dialog5" class="thickbox play-icon popup-with-zoom-anim"><imgsrc="images/vid-play.png" alt="" /></a></div><!--pop-up-box--><script type="text/javascript" src="js/modernizr.custom.53451.js"></script><link href="css/popuo-box.css" rel="stylesheet" type="text/css" media="all" /><script src="js/jquery.magnific-popup.js" type="text/javascript"></script><!--pop-up-box--><div id="small-dialog5" class="mfp-hide"><iframe src="video/dm.mp4" frameborder="0" webkitallowfullscreenmozallowfullscreen allowfullscreen> </iframe></div><script>$(document).ready(function () {$('.popup-with-zoom-anim').magnificPopup({type: 'inline',fixedContentPos: false,fixedBgPos: true,overflowY: 'auto',closeBtnInside: true,preloader: false,midClick: true,removalDelay: 300,mainClass: 'my-mfp-zoom-in'});});</script></div><div class="clearfix"></div></div></div><!-- Video Part Ends Here --><!-- Footer Starts Here --><div class="footer"><div class="container"><ul class="social"><li><i class="fa"></i></li><li><i class="fb"></i></li><li><i class="fc"></i></li></ul><p>版权信息显示区域</p></div></div><!-- Footer Ends Here -->
</body></html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/61148.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Django主要特点

Django 是一个开源的 Python Web 开发框架&#xff0c;它提供了一系列的工具和功能&#xff0c;帮助开发人员快速、高效地构建 Web 应用程序。 以下是 Django 的一些主要特点&#xff1a; 1. 强大的 ORM&#xff08;对象关系映射&#xff09;&#xff1a; Django 提供了一个…

可拖拽编辑的流程图X6

先上图 //index.html&#xff0c;有时候可能加载失败&#xff0c;那就再找一个别的cdn 或者npm下载&#xff0c;如果npm下载&#xff0c; //那么需要全局引入或者局部引入&#xff0c;代码里面写法也会不同&#xff0c;详细的可以看示例<script src"https://cdn.jsdeli…

C++对C的扩展

文章目录 C对C的扩展::作用域运算符代码示例 namespace 命名空间代码示例命名空间的使用注意无名命名空间和命名空间别名using声明 语法的增强struct的增强 bool 类型三目运算符const 关键字C语言Cconst 替换define 引用引用作用于数组引用作为函数参数引用作为函数返回值例1&a…

c ++ 学习 之函数重载

在C中&#xff0c;函数重载&#xff08;Function Overloading&#xff09;是一种允许你定义多个同名函数&#xff0c;但它们在参数数量、类型或顺序上有所不同。编译器会根据函数调用时提供的参数信息&#xff0c;自动选择调用匹配的重载函数。函数重载可以使代码更具灵活性&am…

白嫖idea

白嫖idea 地址 https://www.jetbrains.com/toolbox-app/

每日一题:leetcode 1267 统计参与通信的服务器

这里有一幅服务器分布图&#xff0c;服务器的位置标识在 m * n 的整数矩阵网格 grid 中&#xff0c;1 表示单元格上有服务器&#xff0c;0 表示没有。 如果两台服务器位于同一行或者同一列&#xff0c;我们就认为它们之间可以进行通信。 请你统计并返回能够与至少一台其他服务…

jmeter性能测试步骤实战教程

1. Jmeter是什么&#xff1f; 2. Jmeter安装 2.1 JDK安装 由于Jmeter是基于java开发&#xff0c;首先需要下载安装JDK &#xff08;目前JMeter只支持到Java 8&#xff0c;尚不支持 Java 9&#xff09; 1. 官网下载地址&#xff1a; http://www.oracle.com/technetwork/java/…

【java安全】FastJson反序列化漏洞浅析

文章目录 【java安全】FastJson反序列化漏洞浅析0x00.前言0x01.FastJson概述0x02.FastJson使用序列化与反序列化 0x03.反序列化漏洞0x04.漏洞触发条件0x05.漏洞攻击方式JdbcRowSetImpl利用链TemplatesImpl利用链**漏洞版本**POC漏洞分析 【java安全】FastJson反序列化漏洞浅析 …

QT基础 关于QT延迟

目录 QT提供延时 1.自定义延时 2.使用QElapsedTimer 3.使用事件循环 4.跨平台延时 QT提供延时 这里提供四种方法&#xff1a; 1、多线程程序使用QThread::sleep()或者QThread::msleep()或QThread::usleep()或QThread::wait()进行延时处理。 Sleep不会释放对象锁&#x…

Ubuntu20.04安装ROS

Ubuntu20.04安装ROS Excerpt ubuntu安装方式有两种&#xff0c;一种是安装ubuntu系统&#xff0c;另一种是在windows下安装虚拟机&#xff0c;在虚拟机里安装ubuntu。下面为双系统安装ubuntu&#xff08;用虚拟机装ubuntu会很卡&#xff0c;bug很多&#xff0c;除非电脑配置极好…

java八股文面试[多线程]——Happens-Before规则

TODO 知识来源&#xff1a; 【23版面试突击】你知道什么是 happens-before 原则吗&#xff1f;_哔哩哔哩_bilibili 【2023年面试】Happens-Before规则是什么_哔哩哔哩_bilibili

八、MySQL(DML)如何修改表中的数据?

1、修改表数据 &#xff08;1&#xff09;基础语法&#xff1a; update 表名 SET 字段名1数值1,字段名2数值2&#xff0c;…… [where 条件]; &#xff08;2&#xff09; 操作实例&#xff1a; 第一步&#xff1a; 先准备一张表 insert into things values (10086,18,0x12…

【前端代码规范】

前端代码规范 vue3版本:【Vue&React】版本TS版本&#xff1a;【TS&JS】版本vite版本&#xff1a;【Webpack&Vite】版本Eslint版本:命名规则:【见名识意】项目命名&#xff1a;目录命名&#xff1a;JS/VUE文件CSS/SCSS文件命名&#xff1a;HTML文件命名&#xff1a;…

本地电脑搭建Plex私人影音云盘教程,内网穿透实现远程访问

文章目录 1.前言2. Plex网站搭建2.1 Plex下载和安装2.2 Plex网页测试2.3 cpolar的安装和注册 3. 本地网页发布3.1 Cpolar云端设置3.2 Cpolar本地设置 4. 公网访问测试5. 结语6 总结 1.前言 用手机或者平板电脑看视频&#xff0c;已经算是生活中稀松平常的场景了&#xff0c;特…

三组学联合→HiC+Meta+Virome

病毒在微生物死亡率、多样性和生物地球化学循环中发挥着重要作用。地下水是全球最大的淡水&#xff0c;也是地球上最贫营养的水生系统之一&#xff0c;但在这个特殊的栖息地中微生物和病毒群落是如何形成的尚未被探索。本次经典文献分享给大家带来&#xff0c;宏基因组宏病毒组…

RTE_Driver驱动框架和Keil下开发需要支持的xxx_DFP软件包分析

1.RTE_Driver驱动框架 RTE_Driver代表"Run-Time Environment Driver"&#xff0c;是Keil MDK&#xff08;Microcontroller Development Kit&#xff09;中的一个概念。Keil MDK是一种用于嵌入式系统开发的集成开发环境&#xff0c;提供了开发、编译、调试等一系列工具…

绿色能源迎来跨越式增长新时代

当今世界&#xff0c;百年未有之大变局加速演进&#xff0c;新一轮科技革命和产业变革深入发展&#xff0c;全球气候治理呈现新局面&#xff0c;新能源和信息技术紧密融合&#xff0c;生产生活方式加快转向低碳化、智能化&#xff0c;能源体系和发展模式正在进入非化石能源主导…

Briefings in Bioinformatics投稿经验分享

期刊名: BRIEFINGS IN BIOINFORMATICS期刊名缩写:BRIEF BIOINFORM期刊ISSN:1467-5463E-ISSN:1477-40542023年影响因子/JCR分区:9.5/Q1latex模板:http://static.primary.prod.gcms.the-infra.com/static/site/journals/document/oup-authoring-template.zip?node=7987de4…

gcd,辗转相减法,线段树,246. 区间最大公约数

246. 区间最大公约数 246. 区间最大公约数 - AcWing题库 给定一个长度为 N 的数列 A&#xff0c;以及 M 条指令&#xff0c;每条指令可能是以下两种之一&#xff1a; C l r d&#xff0c;表示把 A[l],A[l1],… 都加上 d。Q l r&#xff0c;表示询问 A[l],A[l1],… 的最大公约…

java八股文面试[多线程]——线程间通信方式

多个线程在并发执行的时候&#xff0c;他们在CPU中是随机切换执行的&#xff0c;这个时候我们想多个线程一起来完成一件任务&#xff0c;这个时候我们就需要线程之间的通信了&#xff0c;多个线程一起来完成一个任务&#xff0c;线程通信一般有4种方式&#xff1a; 通过 volat…