<!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 style="text-align:center;clear:both;">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
<div class="gallery">
<a href="#" data-caption="素材1"><img src="img/1.jpg"></a>
<a href="#" data-caption="素材2"><img src="img/2.jpg"></a>
<a href="#" data-caption="素材3"><img src="img/3.jpg"></a>
<a href="#" data-caption="素材4"><img src="img/4.jpg"></a>
<a href="#" data-caption="素材5"><img src="img/5.jpg"></a>
<a href="#" data-caption="素材6"><img src="img/1.jpg"></a>
<a href="#" data-caption="素材7"><img src="img/2.jpg"></a>
<a href="#" data-caption="素材8"></a>
<a href="#" data-caption="素材9"><img src="img/4.jpg"></a>
<a href="#" data-caption="素材10"><img src="img/5.jpg"></a>
</div>
<div class="navigation">
<a href="#" class="btn prev">上一张</a>
<a href="#" class="btn next">下一张</a>
</div>
</div>
</body>
</html>
用jQuery和CSS3实现的鼠标点击爆开炸效果
版权申诉
134 浏览量
2022-06-28
14:50:12
上传
评论
收藏 501KB ZIP 举报
2312232.zip （11个子文件） 
2312232 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 index.html.bak 7KB资源评论
GZM888888
- 粉丝: 203
- 资源: 2968
最新资源
- IMG_20240618_233326.jpg
- 小程序版基于人工智能的卷积网络训练识别书法字体分类-不含数据集图片-含逐行注释和说明文档.zip
- 小程序版CNN图像分类识别面食分类-不含数据集图片-含逐行注释和说明文档.zip
- 小程序版基于深度学习识别厨余垃圾-不含数据集图片-含逐行注释和说明文档.zip
- 小程序版基于卷积神经网络识别季节性水果分类-不含数据集图片-含逐行注释和说明文档.zip
- 小程序版基于卷积神经网络识别食物类别-不含数据集图片-含逐行注释和说明文档.zip
- 小程序版基于深度学习识别4种水果-不含数据集图片-含逐行注释和说明文档.zip
- 小程序版图像分类算法对珠宝首饰分类识别-不含数据集图片-含逐行注释和说明文档.zip
- 小程序版通过CNN训练识别家具-不含数据集图片-含逐行注释和说明文档.zip
- 小程序版通过CNN训练识别衣物纹样分类-不含数据集图片-含逐行注释和说明文档.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
