<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<link rel="stylesheet" type="text/css" href="css/swiper-3.3.1.min.css"/>
<link rel="stylesheet" type="text/css" href="css/animate.min.css"/>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<script src="js/rem.js"></script>
</head>
<body>
<audio id="audio" src="js/music.mp3" autoplay></audio>
<div class="music addMus">
<div class='zeo'>♪</div>
<div class='one'>♪</div>
<div class='two'>♪</div>
<div class='thre'>♪</div>
</div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide first">
<div class="first1">
<img class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s" src="images/1.png"/>
</div>
<div class="first2">
<img class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s" src="images/2.png"/>
</div>
<div class="first3">
<img class="ani" swiper-animate-effect="shake" swiper-animate-duration="1s" swiper-animate-delay="0.8s" src="images/3.png"/>
</div>
<div class="first4">
<img class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s" swiper-animate-delay="1s" src="images/4.png"/>
</div>
<div class="first5">
<img class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="1.2s" src="images/5.png"/>
</div>
<div class="first6">
<img class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s" src="images/6.png"/>
</div>
<div class="first7">
<img src="images/7.png"/>
</div>
<div class="arrow">
<img src="images/19.png">
</div>
</div>
<div class="swiper-slide sec">
<div class="sec1">
<img class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s" src="images/8.png"/>
</div>
<div class="sec2">
<img class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s" src="images/9.png"/>
</div>
<div class="sec3">
<img class="ani" swiper-animate-effect="flash" swiper-animate-duration="0.5s" swiper-animate-delay="0.8s" src="images/10.png"/>
</div>
<div class="sec4">
<img class="ani" swiper-animate-effect="flipInY" swiper-animate-duration="0.5s" swiper-animate-delay="1s" src="images/11.png"/>
</div>
<div class="sec5">
<img class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="1.3s" src="images/12.png"/>
</div>
<div class="sec6">
<img src="images/7.png"/>
</div>
<div class="arrow">
<img src="images/19.png">
</div>
</div>
<div class="swiper-slide thr">
<div class="thr1">
<img class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s" src="images/14.png"/>
</div>
<div class="thr2">
<img class="ani" swiper-animate-effect="bounceInDown" swiper-animate-duration="0.7s" swiper-animate-delay="0.5" src="images/15.png"/>
</div>
<div class="thr3">
<img class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.8s" swiper-animate-delay="1s" src="images/16.png"/>
</div>
<div class="thr4">
<img class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="1.3s" src="images/18.png"/>
</div>
<div class="thr5">
<img class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1.5s" src="images/7.png"/>
</div>
<div class="zf1">
<p class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1.7s">感谢你们一直的陪伴，圣诞节快乐，愿一切安好。</p>
</div>
<div class="zf2">
<span class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="2s">--XXX</span>
</div>
<div class="arrow">
<img src="images/19.png">
</div>
</div>
</div>
<div class="swiper-pagination"></div>
<div id="swiper-pagination"></div>
</div>
</body>
<script src="js/zepto.js"></script>
<script src="js/swiper-3.3.1.min.js"></script>
<script src="js/swiper.animate1.0.2.min.js"></script>
<script type="text/javascript">
var mySwiper = new Swiper ('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
direction: 'vertical',
loop:true,
autoplayDisableOnInteraction:false,
grabCursor:true,
onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
swiperAnimateCache(swiper); //隐藏动画元素
swiperAnimate(swiper); //初始化完成开始动画
},
onSlideChangeEnd: function(swiper){
swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
}
})
$(".music").click(function(){
if(audio.paused){
audio.play();
$(".music").addClass("addMus");
$(".music div").eq(0).siblings().show();
}else{
audio.pause();
$(".music").removeClass("addMus");
$(".music div").eq(0).siblings().hide();
}
})
</script>
</html>
Christmas.zip （29个子文件） 
js 
rem.js 2KB swiper-3.3.1.min.js 76KB zepto.js 26KB swiper.animate1.0.2.min.js 2KB swiper.animate-twice.min.js 8KB music.mp3 4.73MB css swiper-3.3.1.min.css 17KB animate.min.css 60KB index.css 4KB swiper.min.css 14KB
index.html 6KB images 
19.png 319B 10.png 82KB 9.png 71KB 3.png 131KB 12.png 74KB 15.png 20KB 1.png 20KB 13png.png 37KB 11.png 109KB 6.png 81KB 5.png 78KB 4.png 35KB 8.png 31KB 16.png 16KB 7.png 37KB 18.png 88KB 2.png 19KB 14.png 168KB资源评论
XYsawyer
- 粉丝: 1077
- 资源: 17
最新资源
- Defender Control-禁止工具,一键永久关闭windows系统杀毒软件
- echarts中国省份数据.json
- DISC-Law-SFT-Triplet-released-Qwen
- ReduceMemory-windows内存释放工具（使用前建议将当前数据保存好）
- 清华大学 大学数学实验 实验内容及参考答案
- 音频人声分离，合成工具Audacity ，多轨音频编辑器
- Centos8.x通过RPM包升级OpenSSH9.6最新版 升级有风险,前务必做好快照，以免升级后出现异常影响业务
- Centos7.x通过RPM包升级OpenSSH9.6最新版 升级有风险,前务必做好快照，以免升级后出现异常影响业务
- Centos7.x通过RPM包升级OpenSSH9.9最新版 升级有风险,前务必做好快照，以免升级后出现异常影响业务
- Centos7.x通过RPM包升级OpenSSH9.8最新版 升级有风险,前务必做好快照，以免升级后出现异常影响业务
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
