<!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实现的鼠标点击爆炸效果，主要还是用jQuery实现，爆炸物的倾斜效果是利用CSS3实现的.zip
版权申诉
201 浏览量
2023-12-27
16:04:48
上传
评论
收藏 1005KB ZIP 举报
用jQuery和CSS3实现的鼠标点击爆炸效果，主要还是用jQuery实现，爆炸物的倾斜效果是利用CSS3实现的.zip （22个子文件） 
Y-123 用jQuery和CSS3实现的鼠标点击爆炸效果，主要还是用jQuery实现，爆炸物的倾斜效果是利用CSS3实现的 2312232 jiaoben2161 js 
jquery.flipping_gallery.js 5KB jquery.js 262KB index.html.bak 7KB img 
2.jpg 75KB 1.jpg 82KB 5.jpg 75KB
background.png 24KB 3.jpg 101KB 4.jpg 66KB css flipping_gallery.css 2KB
index.html 7KB 2312232 jiaoben2161 js jquery.flipping_gallery.js 5KB jquery.js 262KB index.html.bak 7KB img 2.jpg 75KB 1.jpg 82KB 5.jpg 75KB background.png 24KB 3.jpg 101KB 4.jpg 66KB css flipping_gallery.css 2KB index.html 7KB资源评论
m0_74456535
- 粉丝: 89
- 资源: 706
最新资源
- 基于python的机械设计实用计算器，可计算电动机，传动装置，V带轮，齿轮，轴，轴承的几何或者力，运动学参数数值+源码+开发文档
- 基于HTML +JavaScript的元旦倒计时代码.docx
- 【Unity资源免费分享】孩子益智小游戏unity 5x系列Baby Doll House Cleaning
- 【资源免费分享】集市游戏(uniyt案例)
- 数据整理结果 2023-12-7 192544 6.dta
- 5.22前端基础（2）
- 糖尿病风险因素分析数据
- matlab项目源码基于matlab的声源定位广义互相关算法的实现.zip
- 基于Go的Dory-Engine应用上云引擎命令行客户端设计源码
- dotnet-core-uninstall-1.7.521001 github上下载下来，从github下载不下来时，可以使用这
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
