<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3D图片上下翻牌切换效果 - 网页模板</title>
<link href='css/flipping_gallery.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.flipping_gallery.js"></script>
<style>
html {
height: 100%;
}
body {
background: url(img/background.png);
padding: 0;
text-align: center;
font-family: 'open sans';
position: relative;
margin: 0;
height: 100%;
}
.wrapper {
height: auto !important;
height: 100%;
margin: 0 auto;
overflow: hidden;
}
a {
text-decoration: none;
}
h1, h2 {
width: 100%;
float: left;
}
h1 {
margin-top: 100px;
color: #00B0FF;
margin-bottom: 5px;
font-size: 70px;
letter-spacing: -4px;
}
h2 {
letter-spacing: 0px;
color: rgba(255,255,255,0.65);
font-weight: 100;
margin-top: 10px;
margin-bottom: 10px;
}
.pointer {
color: #00B0FF;
font-family: 'Pacifico';
font-size: 24px;
margin-top: 15px;
position: absolute;
top: 130px;
right: -40px;
}
.pointer2 {
color: #00B0FF;
font-family: 'Pacifico';
font-size: 24px;
margin-top: 15px;
position: absolute;
top: 130px;
left: -40px;
}
pre {
margin: 80px auto;
}
pre code {
padding: 35px;
border-radius: 5px;
font-size: 15px;
background: rgba(0,0,0,0.1);
border: rgba(0,0,0,0.05) 5px solid;
max-width: 500px;
}
.main {
float: left;
width: 100%;
margin: 0 auto;
}
.main h1 {
padding:20px 50px 10px;
float: left;
width: 100%;
font-size: 60px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
font-weight: 100;
margin: 0;
padding-top: 25px;
font-family: 'Noto Serif';
font-style: italic;
letter-spacing: 2px;
text-transform: capitalize;
}
.main h1.demo1 {
background: #1ABC9C;
}
.reload.bell {
font-size: 12px;
padding: 20px;
width: 45px;
text-align: center;
height: 47px;
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
}
.reload.bell #notification {
font-size: 25px;
line-height: 140%;
}
.reload, .btn{
display: inline-block;
border: 4px solid #A2261E;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: #CC3126;
display: inline-block;
line-height: 100%;
padding: 0.7em;
text-decoration: none;
color: #0D2633;
width: 100px;
line-height: 140%;
font-size: 17px;
font-family: open sans;
font-weight: bold;
}
.reload:hover{
background: #A2261E;
}
.btn {
width: 200px;
color: #0D2633;
border: none;
margin-left: 10px;
background: #00B0FF;
}
.clear {
width: auto;
}
.btn:hover, .btn:hover {
background: #00CDFF;
}
.btns {
width: 410px;
margin: 50px auto;
}
.credit {
font-family: "noto serif";
font-style: italic;
text-align: center;
color: #3D5455;
color: rgba(255,255,255,0.35);
padding: 10px;
margin: 0 0 40px 0;
float: left;
width: 100%;
letter-spacing: 1px;
}
.credit a {
text-decoration: none;
font-weight: bold;
color: rgba(255,255,255,0.55);
}
.back {
position: absolute;
top: 0;
left: 0;
text-align: center;
display: block;
padding: 7px;
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
background: rgba(0,0,0,0.25);
font-weight: bold;
font-size: 13px;
color: rgba(255,255,255,0.5);
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
.back:hover {
background: rgba(0,0,0,0.5);
}
.page-container {
max-width: 700px;
margin: auto;
position: relative;
}
.page-container p{
font-size: 21px;
font-weight: 100;
line-height: 180%;
}
.page-container h3 {
font-family: "noto serif";
font-size: 23px;
}
.gallery {
width: 500px;
height: 333px;
margin: 150px auto 60px;
}
.navigation {
margin-bottom: 150px;
}
.fg-card, .fg-card > img {
border-radius: 3px;
}
.fg-caption {
color: white;
font-family:'microsoft yahei';
font-size: 24px;
}
</style>
<script>
$(document).ready( function() {
$(".gallery").flipping_gallery({
enableScroll: true,
autoplay: 2000
});
$(".next").click(function() {
$(".gallery").flipForward();
return false;
});
$(".prev").click(function() {
$(".gallery").flipBackward();
return false;
});
});
</script>
</head>
<body>
<div class="gallery">
<a href="#" data-caption="网页模板1 - www.moobnn.com"><img src="img/1.jpg"></a>
<a href="#" data-caption="网页模板2 - www.moobnn.com"><img src="img/2.jpg"></a>
<a href="#" data-caption="网页模板3 - www.moobnn.com"><img src="img/3.jpg"></a>
<a href="#" data-caption="网页模板4 - www.moobnn.com"><img src="img/4.jpg"></a>
<a href="#" data-caption="网页模板5 - www.moobnn.com"><img src="img/5.jpg"></a>
<a href="#" data-caption="网页模板6 - www.moobnn.com"><img src="img/1.jpg"></a>
<a href="#" data-caption="网页模板7 - www.moobnn.com"><img src="img/2.jpg"></a>
<a href="#" data-caption="网页模板8 - www.moobnn.com"></a>
<a href="#" data-caption="网页模板9 - www.moobnn.com"><img src="img/4.jpg"></a>
<a href="#" data-caption="网页模板10 - www.moobnn.com"><img src="img/5.jpg"></a>
</div>
<div class="navigation">
<a href="#" class="btn prev">上一张</a>
<a href="#" class="btn next">下一张</a>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
3D图片上下翻牌切换效果.zip
版权申诉
191 浏览量
2022-11-16
21:20:53
上传
评论
收藏 596KB ZIP 举报
3D图片上下翻牌切换效果.zip （11个子文件） 
3D图片上下翻牌切换效果 jiaoben2161 css 
flipping_gallery.css 2KB img 
2.jpg 75KB 1.jpg 82KB
background.png 24KB 3.jpg 101KB 5.jpg 75KB 4.jpg 66KB
index.html 7KB js jquery.js 262KB jquery.flipping_gallery.js 5KB 3D图片上下翻牌切换效果.jpg 106KB资源评论
