效果图
实现代码
<!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">
<script
type="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"><img
src="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" webkitallowfullscreen
mozallowfullscreen 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>