效果图
实现代码
<!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>
