!DOCTYPE html
html lang=zh-CN
head
meta charset=UTF-8
meta name=viewport content=width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no
title诚挚邀请 · 李雷 & 韩梅梅title

meta property=ogtitle content=李雷❤韩梅梅的婚礼邀请
meta property=ogdescription content=点击查看我们的婚礼邀请函
meta property=ogimage content=httpshanshi.love-invite.cnshare-shouzhang.jpg

link rel=stylesheet href=JSswiper-bundle.min.css
style
 ============ 引入手写字体（如果你有本地字体，可以替换掉这个） ============ 
@import url('httpsfonts.googleapis.comcss2family=Caveatwght@400;700&family=Zhi+Mang+Xing&display=swap');

 { margin0; padding0; box-sizingborder-box; -webkit-tap-highlight-colortransparent; }

html, body {
  height100%; overflowhidden;
   字体优先使用手写体 
  font-familyZhi Mang Xing, Caveat, PingFang SC, Microsoft YaHei, cursive, serif;
  color#333; background#fcfaf5;
}

 ============ 通用 ============ 
.swiper-container { width100%; height100%; }
.swiper-slide {
  width100%; height100%;
  displayflex; flex-directioncolumn; justify-contentcenter; align-itemscenter;
  text-aligncenter;
   纸张纹理背景 
  background url('imagespaper.jpg') centercover no-repeat, #fcfaf5; 
  positionrelative; overflowhidden;
}

 ============ 第1页：封面 ============ 
.page-cover { padding 40px 20px; }
.cover-img-box {
  position relative;
  width 70%; max-width 280px;
  background #fff;
  padding 12px 12px 40px 12px;  拍立得留白 
  box-shadow 3px 5px 15px rgba(0,0,0,0.1);
  transform rotate(-3deg);  稍微倾斜，手账感 
  margin-bottom 30px;
  border 1px solid #eee;
}
.cover-img-box img { width 100%; display block; }
.cover-title {
  font-size 2.2rem; color #d9534f;  手绘红 
  transform rotate(-2deg);
  letter-spacing 2px;
}
.cover-sub {
  font-size 1.2rem; color #4a7c9d;  手绘蓝 
  margin-top 15px;
}
.date-circle {
  display inline-block;
  margin-top 20px;
  padding 10px 20px;
  border 2px solid #d9534f;
  border-radius 50% 40% 60% 30%  40% 50% 40% 60%;  不规则圆圈 
  transform rotate(5deg);
  font-size 1rem; color #d9534f;
}

 ============ 第2页：照片日记 ============ 
.page-diary { padding 40px 20px; justify-content flex-start; }
.diary-title {
  font-size 1.5rem; color #4a7c9d;
  margin-bottom 20px;
  border-bottom 2px dashed #4a7c9d;
  padding-bottom 5px;
  transform rotate(-2deg);
}
.photo-stack {
  position relative;
  width 100%;
  max-width 300px;
  margin-bottom 30px;
}
.polaroid {
  background #fff;
  padding 10px 10px 30px 10px;
  box-shadow 2px 4px 12px rgba(0,0,0,0.15);
  position absolute;
  width 75%;
  border 1px solid #eee;
}
.polaroid img { width 100%; display block; }
.polaroid.p1 { top 0; left 0; transform rotate(-5deg); z-index 2; }
.polaroid.p2 { top 40px; right 0; transform rotate(4deg); z-index 1; }
.diary-text {
  font-size 1.1rem; color #333; line-height 1.8;
  margin-top 180px;  避开照片 
  padding 0 10px;
  text-align left;
}

 ============ 第3页：涂鸦日历 ============ 
.page-calendar { padding 40px 20px; }
.tape {
  position absolute; top 10%; left 10%;
  width 80px; height 25px;
  background rgba(200, 200, 200, 0.4);
  transform rotate(-10deg);
  z-index 10;
}
.calendar-box {
  background #fff;
  border 2px solid #d9534f;
  border-radius 10px;
  padding 20px;
  transform rotate(2deg);
  box-shadow 4px 4px 0 rgba(217, 83, 79, 0.2);
  width 90%; max-width 320px;
}
.calendar-box h2 { font-size 2.5rem; color #d9534f; margin-bottom 10px; }
.calendar-box p { font-size 1rem; color #4a7c9d; }

 ============ 第4页：照片展示 ============ 
.page-photo { padding 30px 20px; }
.photo-frame {
  width 85%; max-width 320px;
  background #fff; padding 10px;
  border 3px solid #4a7c9d;
  transform rotate(-3deg);
  box-shadow 5px 5px 0 #4a7c9d;
  margin-bottom 20px;
}
.photo-frame img { width 100%; display block; }
.quote {
  font-size 1.2rem; color #d9534f;
  writing-mode vertical-rl;  文字竖排 
  text-orientation upright;
  height 150px; margin-top 10px;
}

 ============ 底部按钮弹幕表单占位 ============ 
.form-btn {
  background #d9534f; color #fff;
  padding 10px 30px; border-radius 30px;
  font-size 1.2rem; border none;
  margin-top 20px;
  box-shadow 2px 2px 0 #a94442;
  font-family inherit;
}
style
head
body

!-- 背景音乐 --
audio id=bgm loop preload=auto
  source src=musicbgm.mp3 type=audiompeg
audio

div class=swiper-container
  div class=swiper-wrapper

    !-- 第1页：封面（手账拍立得） --
    div class=swiper-slide page-cover
      div class=cover-img-box ani swiper-animate-effect=fadeInDown swiper-animate-duration=1.5s
        !-- 手绘相机涂鸦可以贴在这里 --
        img src=imagescover.jpg alt=封面
        !-- 假装是拍立得底部的写字区 --
        div style=font-family 'Caveat', cursive; font-size 1.5rem; color #555; margin-top 15px;Our Wedding Partydiv
      div
      
      h1 class=cover-title ani swiper-animate-effect=zoomIn swiper-animate-duration=1.2s swiper-animate-delay=0.5s
        林鑫意 & 易慈
      h1
      
      p class=cover-sub ani swiper-animate-effect=fadeIn swiper-animate-duration=1s swiper-animate-delay=1s
        诚邀你的光临
      p

      div class=date-circle ani swiper-animate-effect=bounceIn swiper-animate-duration=1.2s swiper-animate-delay=1.5s
        2026.10.03
      div
    div

    !-- 第2页：照片日记（拍立得叠加） --
    div class=swiper-slide page-diary
      h2 class=diary-title ani swiper-animate-effect=fadeInLeft swiper-animate-duration=1s关于我们 about ush2
      
      div class=photo-stack
        div class=polaroid p1 ani swiper-animate-effect=rotateInDownLeft swiper-animate-duration=1.2s
          img src=imagesphoto1.jpg alt=照片1
        div
        div class=polaroid p2 ani swiper-animate-effect=rotateInUpRight swiper-animate-duration=1.2s swiper-animate-delay=0.3s
          img src=imagesphoto2.jpg alt=照片2
        div
      div

      p class=diary-text ani swiper-animate-effect=fadeInUp swiper-animate-duration=1s swiper-animate-delay=0.6s
        你看，这么多人，这么大的世界br
        我遇到了你，你也遇到了我br
        真好。
      p
    div

    !-- 第3页：涂鸦日历（时间地点） --
    div class=swiper-slide page-calendar
      div class=tapediv
      
      div class=calendar-box ani swiper-animate-effect=zoomIn swiper-animate-duration=1s
        h210  03h2
        p style=margin-bottom 15px;2026年10月3日 星期六p
        p style=font-size 1.2rem; color #d9534f; margin-top 20px;
          span style=font-size 1.5rem;📍span 涵碧楼酒店
        p
        div style=margin-top 15px;
          span style=border 1px solid #4a7c9d; padding 5px 15px; color #4a7c9d; border-radius 20px; font-size 0.9rem;
            Save The Date
          span
        div
      div

      button class=form-btn ani swiper-animate-effect=fadeInUp swiper-animate-duration=1s swiper-animate-delay=0.5s
        👉 点击导航
      button
    div

    !-- 第4页：照片展示 + 竖排文字 --
    div class=swiper-slide page-photo
      div class=photo-frame ani swiper-animate-effect=fadeInDown swiper-animate-duration=1s
        img src=imagesphoto3.jpg alt=照片3
      div
      
      div class=quote ani swiper-animate-effect=fadeInRight swiper-animate-duration=1.5s swiper-animate-delay=0.5s
        你是我平凡日子里最壮丽的风景
      div
    div

  div
  div class=swiper-paginationdiv
div

script src=JSswiper-bundle.min.jsscript
script
(function(){
  function swiperAnimateCache(swiper){
    var slides = swiper.slides;
    for(var i=0;islides.length;i++){
      var items = slides[i].querySelectorAll('.ani');
      for(var j=0;jitems.length;j++){
        var el = items[j];
        var effect = el.getAttribute('swiper-animate-effect');
        var duration = el.getAttribute('swiper-animate-duration')  '1s';
        var delay = el.getAttribute('swiper-animate-delay')  '0s';
        if(effect){
          el.style.opacity = '';
          el.setAttribute('data-ani-effect', effect);
          el.setAttribute('data-ani-duration', duration);
          el.setAttribute('data-ani-delay', delay);
        }
      }
    }
  }
  function swiperAnimate(swiper){
    var slide = swiper.slides[swiper.activeIndex];
    if(!slide) return;
    var items = slide.querySelectorAll('.ani');
    for(var i=0;iitems.length;i++){
      var el = items[i];
      var effect = el.getAttribute('data-ani-effect');
      var duration = el.getAttribute('data-ani-duration')  '1s';
      var delay = el.getAttribute('data-ani-delay')  '0s';
      if(effect){
        el.style.animation = 'none';
        el.offsetHeight;
        el.style.animation = effect + ' ' + duration + ' ' + delay + ' both';
      }
    }
  }
  window.swiperAnimateCache = swiperAnimateCache;
  window.swiperAnimate = swiperAnimate;
})();
script
script
var mySwiper = new Swiper('.swiper-container', {
  direction 'vertical',
  loop false,
  speed 800,
  mousewheel true,
  pagination { el '.swiper-pagination', clickable true },
  autoplay { delay 5000, disableOnInteraction false },
  on {
    init function () { swiperAnimateCache(this); swiperAnimate(this); },
    slideChangeTransitionEnd function () { swiperAnimate(this); }
  }
});

 自动播放音乐（带微信防拦截逻辑）
document.addEventListener('touchstart', function playMusic() {
  var bgm = document.getElementById('bgm');
  if(bgm) bgm.play();
  document.removeEventListener('touchstart', playMusic);
}, { once true });
script
body
html