feat 幸福相册

app.json

@@ -11,6 +11,22 @@
     "pages/video/video",
     "pages/video/detail"
   ],
+  "subPackages": [
+    {
+      "root": "happyphoto",
+      "pages": [
+        "yujianqiutian2023/yujianqiutian2023",
+        "material202304/material202304",
+        "qingrenjie2020/qingrenjie2020",
+        "rose/rose",
+        "qiangwei/qiangwei",
+        "yujiandongtian2022/yujiandongtian2022",
+        "qingren17/qingren17",
+        "moon/moon",
+        "sgjh2018/sgjh2018"
+      ]
+    }
+  ],
   "window": {
     "navigationStyle": "custom",
     "backgroundColor": "#f6f6f6",

config/config.js

@@ -386,7 +386,7 @@ const appInfoObj = {
 };
 
 // @config 确定使用的小程序appid
-const current_appid = 'wxd40b677f35319eea';
+const current_appid = 'wx04b705205757217b';
 export const apple = {
     ...appInfoObj[current_appid],
     appKey: '49TBR8Z1rA7PyqD30FV0v48AU',

config/config.js_bak

@@ -271,7 +271,7 @@ const appInfoObj = {
 };
 
 // @config 确定使用的小程序appid
-const appid = 'wx3f464072571c1fd3';
+const appid = 'wx04b705205757217b';
 export const apple = {
     ...appInfoObj[appid],
     appKey: '49TBR8Z1rA7PyqD30FV0v48AU',

happyphoto/index.js

@@ -0,0 +1 @@
+console.log('temp1 subpackage load')

happyphoto/material202304/material202304.js

@@ -0,0 +1,192 @@
+// temp1/material202304/material202304.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    // 背景音乐
+    bgmusic: {
+      music: null,
+      playing: false
+    },
+    ads: null,
+    hasLoadAdConfig: false,
+    photoIndex: 0,
+    templateName: 'material202304',
+    examplePhotos: [
+      'ac_333419147r8707.jpeg',
+      'ac_333325160r3903.jpeg',
+      'ac_333325162r3557.jpeg',
+      'ac_333325164r6315.jpeg',
+      'ac_333325168r7970.jpeg',
+      'ac_333325169r4334.jpeg',
+      'ac_333325171r8327.jpeg',
+      'ac_333325175r9064.jpeg',
+      'ac_333325177r1710.jpeg',
+      'ac_333325180r4835.jpeg',
+      'ac_333325183r4484.jpeg',
+    ],
+    imageWidths: [],
+    imageHeights: [],
+    imageStyles: [],
+    page1BlockStyle: '',
+    page1ImageStyle: ``,
+    page2BlockStyle: '',
+    page2ImageStyle: ``,
+    photoLoadStyle: '',
+    textbgBoxStyle: '',
+    pagetitleStyle: '',
+    titlecontentStyle: '',
+    timeouts: []
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+    this.initAnimation()
+  },
+
+  initAnimation() {
+    const _this = this
+    this.setData({
+      photoIndex: 0
+    })
+    this.data.timeouts.push(setTimeout(function () {
+      _this.setData({
+        photoLoadStyle: 'animation: fadeOut 0.5s linear both',
+        textbgBoxStyle: 'animation: textbgBox_an1 3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both',
+        pagetitleStyle: 'animation: pagetitle_an 1.5s 2s linear both',
+        titlecontentStyle: 'animation: titlecontent_an 1.5s 3.5s ease-in-out infinite both',
+      })
+      _this.data.timeouts.push(setTimeout(function () {
+        _this.setData({
+          textbgBoxStyle: 'animation: textbgBox_an2 2s linear both',
+        })
+      }, 4000))
+      _this.data.timeouts.push(setTimeout(function () {
+        _this.setData({
+          textbgBoxStyle: 'animation: textbgBox_an2 1.2s linear both',
+        })
+        _this.showPage()
+      }, 6300))
+    }, 1000))
+  },
+
+  showPage() {
+    const _this = this
+    if (this.data.photoIndex === this.data.examplePhotos.length - 1) {
+      // 图片轮询完重新开始
+      this.setData({
+        'photoIndex': 0
+      })
+    }
+    const pageIndex = this.data.photoIndex % 2 + 1
+    const imageURL = `https://novel-video.hongdes.cn/kawaalbum/${this.data.templateName}/example/${this.data.examplePhotos[this.data.photoIndex]}`
+    wx.getImageInfo({
+      src: imageURL,
+      success(res) {
+        const imageWidth = res.width
+        const imageHeight = res.height
+        let blockStyle = ''
+        if (imageWidth > imageHeight) {
+          //  横版图片
+          blockStyle = 'top:30%;'
+        } else {
+          // 竖版图片
+          blockStyle = 'top:10%;'
+        }
+        _this.setData({
+          [`page${pageIndex}BlockStyle`]: `${blockStyle}animation: showimg_an1 1.5s linear both;`,
+          [`page${pageIndex}ImageStyle`]: imageURL,
+        })
+
+        _this.data.timeouts.push(setTimeout(() => {
+          _this.setData({
+            [`page${pageIndex}BlockStyle`]: `${blockStyle}animation: showimg_an2 1.5s linear both`,
+            'photoIndex': _this.data.photoIndex + 1
+          })
+          _this.showPage();
+        }, 4800));
+        _this.data.timeouts.push(setTimeout(() => {
+          _this.setData({
+            [`page${pageIndex}BlockStyle`]: ``,
+          })
+        }, 7000));
+      }
+    })
+  },
+
+  /**
+ * 播放音乐
+ */
+  initBgMusic() {
+    let _this = this
+    if (!app.globalData.audioContext) {
+      app.globalData.audioContext = wx.createInnerAudioContext()
+    }
+    // obeyMuteSwitch（仅在 iOS 生效）是否遵循静音开关，设置为 false 之后，即使是在静音模式下，也能播放声音
+    wx.setInnerAudioOption({
+      obeyMuteSwitch: false
+    })
+    // 设置音乐循环
+    app.globalData.audioContext.loop = true
+    // 监听音乐播放
+    app.globalData.audioContext.onPlay(() => {
+      _this.setData({
+        'bgmusic.playing': true
+      })
+      console.log('music play', _this.data.bgmusic.playing)
+    })
+    // 监听音乐暂停
+    app.globalData.audioContext.onPause(() => {
+      console.log('music pause')
+      _this.setData({
+        'bgmusic.playing': false
+      })
+    })
+    app.globalData.audioContext.src = this.data.bgmusic.music.url
+    app.globalData.audioContext.play()
+  },
+
+  /**
+   * 音乐播放按钮
+   */
+  musicPlayTap() {
+    app.globalData.audioContext.paused ? app.globalData.audioContext.play() : app.globalData.audioContext.pause()
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+    this.clearTimeoutTask()
+  },
+
+  // 清除定时任务
+  clearTimeoutTask() {
+    this.data.timeouts.forEach(timeout => clearTimeout(timeout));
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

happyphoto/material202304/material202304.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

happyphoto/material202304/material202304.wxml

@@ -0,0 +1,41 @@
+<view id="container">
+  <navigator open-type="navigateBack" style="position: fixed;top: 60rpx; left: 30rpx;color:#ffffff;z-index: 999">
+    <image src="/assets/images/icons/icon-back-white.png" style="width: 50rpx;height: 50rpx;"></image>
+  </navigator>
+  <view id="bg"></view>
+  <view class="leftTop"></view>
+  <view class="foreground"></view>
+
+  <view class="spot light1" style="top: 1%; left: 36%;"></view>
+  <view class="spot light2" style="top: 21%; left: 90%;"></view>
+  <view class="spot light3" style="top: 51%; left: 44%;"></view>
+
+  <view class="spot light1" style="top: 75%; left: 99%;"></view>
+  <view class="spot light2" style="top: 1%; left: 85%;"></view>
+  <view class="spot light3" style="top: 67%; left: 27%;"></view>
+
+  <view class="spot light1" style="top: 9%; left: 63%;"></view>
+  <view class="spot light2" style="top: 89%; left: 80%;"></view>
+  <view class="spot light3" style="top: 91%; left: 13%;"></view>
+
+  <view id="textbgBox" style="{{textbgBoxStyle}}">
+    <image src="https://s1.kagirl.cn/pic/material202304/textBorder.png" id="textbg"></image>
+    <view id="pagetitle" style="{{pagetitleStyle}}">
+      <view id="titlecontent" style="{{titlecontentStyle}}">
+        《人生相册》太漂亮了，送给亲爱的朋友们!句句经典!</view>
+    </view>
+  </view>
+
+  <view class="page_block" id="page1_block" style="{{page1BlockStyle}};">
+    <image class="page" id="page1" mode="widthFix" src="{{page1ImageStyle}}"></image>
+  </view>
+
+  <view class="page_block" id="page2_block" style="{{page2BlockStyle}}">
+    <image class="page" id="page2" mode="widthFix" src="{{page2ImageStyle}}"></image>
+  </view>
+
+  <view id="photo_load" class="po" style="{{photoLoadStyle}}">
+    <view class="photo_load_1"></view>
+    <view class="photo_load_2" id="photoLoadPre">正在加载100%</view>
+  </view>
+</view>

happyphoto/material202304/material202304.wxss

@@ -0,0 +1,814 @@
+/* temp1/material202304/material202304.wxss */
+#container view,
+#container image {
+  position: absolute
+}
+
+#container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden
+}
+
+.block {
+  position: absolute;
+  opacity: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden
+}
+
+.page_block {
+  opacity: 0;
+  width: 80%;
+  height: 100%;
+  left: 10%;
+  top: 10%;
+}
+
+.page {
+  width: 100%;
+  height: 100%;
+  border: 8px solid #fff;
+  animation: heart 3s linear infinite;
+  border-radius: 5px;
+}
+
+.wordspan {
+  font-size: 26px;
+  color: #fff;
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin: auto;
+  width: 80%;
+  vertical-align: middle;
+  line-height: 35px;
+  text-align: center;
+  letter-spacing: 2px;
+  bottom: 12%;
+  text-shadow: 0 0 5px #a6cf2f, 0 0 10px #a6cf2f, 0 0 10px #a6cf2f
+}
+
+@-webkit-keyframes fadeIn {
+  0% {
+    opacity: 0
+  }
+
+  100% {
+    opacity: 1
+  }
+}
+
+@-webkit-keyframes fadeOut {
+  0% {
+    opacity: 1
+  }
+
+  100% {
+    opacity: 0
+  }
+}
+
+#photo_load {
+  margin: auto;
+  width: 170px;
+  height: 120px;
+  border-radius: 6px;
+  background: rgba(0, 0, 0, .75);
+  top: 0;
+  bottom: 50px;
+  left: 0;
+  right: 0
+}
+
+.photo_load_1 {
+  margin-top: 25px;
+  width: 100%;
+  height: 30px;
+  background: url(https://s2.kagirl.cn/template/pic/public/loading.gif) no-repeat center center;
+  background-size: 30px 30px
+}
+
+.photo_load_2 {
+  color: #fff;
+  font-family: Arial;
+  font-size: 18px;
+  text-align: center;
+  opacity: .75;
+  width: 100%;
+  top: 70px
+}
+
+.falling-petal {
+  position: absolute;
+  top: -2.5rem;
+  background-image: url(./img/love.png);
+  background-repeat: no-repeat;
+  background-size: auto 100%;
+  border-radius: 50%;
+  animation: fall 5s linear forwards
+}
+
+@keyframes fall {
+  0% {
+    transform: translateY(-2.5rem);
+    opacity: 0
+  }
+
+  20% {
+    opacity: .3
+  }
+
+  59% {
+    opacity: 1
+  }
+
+  100% {
+    transform: translateY(50rem);
+    opacity: 0
+  }
+}
+
+.heart {
+  animation: heart 3s linear infinite
+}
+
+@keyframes heart {
+  0% {
+    transform: scale(1)
+  }
+
+  25% {
+    transform: scale(.95)
+  }
+
+  50% {
+    transform: scale(1)
+  }
+
+  75% {
+    transform: scale(.95)
+  }
+
+  100% {
+    transform: scale(1)
+  }
+}
+
+.hearts {
+  animation: heart 3s linear infinite;
+  display: block
+}
+
+@keyframes hearts {
+  0% {
+    transform: scale(1)
+  }
+
+  25% {
+    transform: scale(.95)
+  }
+
+  50% {
+    transform: scale(1)
+  }
+
+  75% {
+    transform: scale(.95)
+  }
+
+  100% {
+    transform: scale(1)
+  }
+}
+
+#bg {
+  width: 100%;
+  height: 100%;
+  background-image: url(https://s1.kagirl.cn/pic/material202304/background.png);
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center
+}
+
+#textbgBox {
+  width: 353px;
+  height: 483px;
+  left: 65px;
+  top: 25%;
+  opacity: 0
+}
+
+#textbg {
+  width: 353px;
+  height: 483px
+}
+
+@keyframes textbgBox_an1 {
+  0% {
+    transform: translateY(50%);
+    opacity: 0
+  }
+
+  100% {
+    transform: translateY(0);
+    opacity: 1
+  }
+}
+
+@keyframes textbgBox_an2 {
+  0% {
+    opacity: 1;
+    transform: scale(1)
+  }
+
+  25% {
+    transform: scale(.95)
+  }
+
+  50% {
+    transform: scale(1)
+  }
+
+  75% {
+    transform: scale(.95)
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(0)
+  }
+}
+
+@keyframes up {
+  0% {
+    transform: translateY(50%);
+    opacity: 0
+  }
+
+  100% {
+    transform: translateY(0);
+    opacity: 1
+  }
+}
+
+@keyframes disappear {
+  0% {
+    transform: scale(1)
+  }
+
+  25% {
+    transform: scale(.95)
+  }
+
+  50% {
+    transform: scale(1)
+  }
+
+  75% {
+    transform: scale(.95)
+  }
+
+  100% {
+    transform: scale(0)
+  }
+}
+
+#pagetitle {
+  display: table;
+  text-align: center;
+  width: 300px;
+  height: 177px;
+  left: 26.5px;
+  top: 153px;
+  box-sizing: border-box
+}
+
+@-webkit-keyframes pagetitle_an {
+  0% {
+    opacity: 0;
+    transform: scale(0)
+  }
+
+  25% {
+    opacity: .25;
+    transform: scale(.25)
+  }
+
+  50% {
+    opacity: .5;
+    transform: scale(.5)
+  }
+
+  75% {
+    opacity: .75;
+    transform: scale(.75)
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1)
+  }
+}
+
+@keyframes textShow {
+  0% {
+    opacity: 0;
+    transform: scale(0)
+  }
+
+  25% {
+    opacity: .25;
+    transform: scale(.25)
+  }
+
+  50% {
+    opacity: .5;
+    transform: scale(.5)
+  }
+
+  75% {
+    opacity: .75;
+    transform: scale(.75)
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1)
+  }
+}
+
+#titlecontent {
+  vertical-align: middle;
+  display: table-cell;
+  text-align: center;
+  word-break: break-all;
+  position: relative !important;
+  overflow: hidden;
+  font-size: 28px;
+  font-weight: 700;
+  width: 267px;
+  height: 106px;
+  color: #fff;
+  text-shadow: 0 0 5px #a6cf2f, 0 0 10px #a6cf2f, 0 0 10px #a6cf2f
+}
+
+@keyframes showimg_an1 {
+  0% {
+    opacity: 0;
+    transform: translate3d(0, -150%, 0) scale(.2)
+  }
+
+  10% {
+    opacity: 1
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateZ(0)
+  }
+}
+
+@-webkit-keyframes showimg_an2 {
+  0% {
+    transform: translateZ(0);
+    opacity: 1
+  }
+
+  100% {
+    transform: translate3d(0, 150%, 0) scale(.2);
+    opacity: 0
+  }
+}
+
+@keyframes hearts {
+  0% {
+    transform: scale(1)
+  }
+
+  25% {
+    transform: scale(.95)
+  }
+
+  50% {
+    transform: scale(1)
+  }
+
+  75% {
+    transform: scale(.95)
+  }
+
+  100% {
+    transform: scale(1)
+  }
+}
+
+.container {
+  width: 100vw;
+  height: 100vh;
+  overflow: auto;
+  display: flex;
+  justify-content: center
+}
+
+.wallpaper-bg {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  background: url('https://s1.kagirl.cn/pic/material202304/background.png') no-repeat center/cover;
+  overflow: hidden
+}
+
+.leftTop {
+  width: 208px;
+  height: 197px;
+  position: absolute;
+  top: -2rem;
+  left: -2.9rem;
+  z-index: 1;
+  background: url(https://s1.kagirl.cn/pic/material202304/branch.png) center center/cover;
+  animation: do 5s linear infinite;
+  transform-origin: left;
+  z-index: 20
+}
+
+.foreground {
+  position: absolute;
+  width: 100vw;
+  height: 17.64rem;
+  background: url('https://s1.kagirl.cn/pic/material202304/foreground.png') no-repeat center/cover;
+  z-index: 20;
+  bottom: -20px
+}
+
+.textBorder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 14.12rem;
+  height: 19.32rem;
+  background: url('https://s1.kagirl.cn/pic/material202304/textBorder.png') no-repeat center/cover;
+  animation: up 2s linear 1, disappear 2.5s 4s linear 1;
+  animation-fill-mode: forwards;
+  z-index: 5
+}
+
+.butterfly1 {
+  position: absolute;
+  width: 2.8rem;
+  height: 2.8rem;
+  animation: fly 1s steps(2) infinite;
+  transition: all 4s;
+  transform: translate(-20rem, 35rem);
+  top: 0;
+  z-index: 50
+}
+
+.butterfly2 {
+  position: absolute;
+  width: 2.8rem;
+  height: 2.8rem;
+  animation: fly2 1s steps(2) infinite;
+  transition: all 4s;
+  transform: translate(20rem, 20rem);
+  top: 0;
+  z-index: 50
+}
+
+.light1 {
+  top: 77%;
+  left: 22%;
+  z-index: 30;
+  width: 53px;
+  height: 39px;
+  background: url(https://s1.kagirl.cn/pic/material202304/light1.png);
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  opacity: 0
+}
+
+.light2 {
+  top: 6%;
+  left: 35%;
+  z-index: 30;
+  width: 25px;
+  height: 19px;
+  background: url(https://s1.kagirl.cn/pic/material202304/light2.png);
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  opacity: 0
+}
+
+.light3 {
+  top: 28%;
+  left: 40%;
+  z-index: 30;
+  width: 35px;
+  height: 26px;
+  background: url(https://s1.kagirl.cn/pic/material202304/light3.png);
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  opacity: 0
+}
+
+.container .spot {
+  position: absolute;
+  animation: light 5s 5s linear infinite
+}
+
+@keyframes light {
+  0% {
+    opacity: 0
+  }
+
+  25% {
+    opacity: .5
+  }
+
+  50% {
+    opacity: 1
+  }
+
+  75% {
+    opacity: .5
+  }
+
+  100% {
+    opacity: 0
+  }
+}
+
+@keyframes textShow {
+  0% {
+    opacity: 0;
+    transform: scale(0)
+  }
+
+  25% {
+    opacity: .25;
+    transform: scale(.25)
+  }
+
+  50% {
+    opacity: .5;
+    transform: scale(.5)
+  }
+
+  75% {
+    opacity: .75;
+    transform: scale(.75)
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1)
+  }
+}
+
+@keyframes up {
+  0% {
+    transform: translateY(50%);
+    opacity: 0
+  }
+
+  100% {
+    transform: translateY(0);
+    opacity: 1
+  }
+}
+
+@keyframes disappear {
+  0% {
+    transform: scale(1)
+  }
+
+  25% {
+    transform: scale(.95)
+  }
+
+  50% {
+    transform: scale(1)
+  }
+
+  75% {
+    transform: scale(.95)
+  }
+
+  100% {
+    transform: scale(0)
+  }
+}
+
+@keyframes do {
+  0% {
+    transform: rotate(0)
+  }
+
+  25% {
+    transform: rotate(-3deg)
+  }
+
+  50% {
+    transform: rotate(0)
+  }
+
+  75% {
+    transform: rotate(3deg)
+  }
+
+  100% {
+    transform: rotate(0)
+  }
+}
+
+@keyframes fly {
+  0% {
+    background: url('https://s1.kagirl.cn/pic/material202304/blueMin.png') no-repeat center/cover
+  }
+
+  10% {
+    background: url('https://s1.kagirl.cn/pic/material202304/blueMax.png') no-repeat center/cover
+  }
+
+  20% {
+    background: url('https://s1.kagirl.cn/pic/material202304/blueMin.png') no-repeat center/cover
+  }
+
+  30% {
+    background: url('https://s1.kagirl.cn/pic/material202304/blueMax.png') no-repeat center/cover
+  }
+
+  40% {
+    background: url('https://s1.kagirl.cn/pic/material202304/blueMin.png') no-repeat center/cover
+  }
+
+  50% {
+    background: url('https://s1.kagirl.cn/pic/material202304/blueMax.png') no-repeat center/cover
+  }
+
+  60% {
+    background: url('https://s1.kagirl.cn/pic/material202304/blueMin.png') no-repeat center/cover
+  }
+
+  70% {
+    background: url('https://s1.kagirl.cn/pic/material202304/blueMax.png') no-repeat center/cover
+  }
+
+  80% {
+    background: url('https://s1.kagirl.cn/pic/material202304/blueMin.png') no-repeat center/cover
+  }
+
+  90% {
+    background: url('https://s1.kagirl.cn/pic/material202304/blueMax.png') no-repeat center/cover
+  }
+
+  100% {
+    background: url('https://s1.kagirl.cn/pic/material202304/blueMax.png') no-repeat center/cover
+  }
+}
+
+@keyframes fly2 {
+  0% {
+    background: url('https://s1.kagirl.cn/pic/material202304/orangeMin.png') no-repeat center/cover
+  }
+
+  10% {
+    background: url('https://s1.kagirl.cn/pic/material202304/orangeMax.png') no-repeat center/cover
+  }
+
+  20% {
+    background: url('https://s1.kagirl.cn/pic/material202304/orangeMin.png') no-repeat center/cover
+  }
+
+  30% {
+    background: url('https://s1.kagirl.cn/pic/material202304/orangeMax.png') no-repeat center/cover
+  }
+
+  40% {
+    background: url('https://s1.kagirl.cn/pic/material202304/orangeMin.png') no-repeat center/cover
+  }
+
+  50% {
+    background: url('https://s1.kagirl.cn/pic/material202304/orangeMax.png') no-repeat center/cover
+  }
+
+  60% {
+    background: url('https://s1.kagirl.cn/pic/material202304/orangeMin.png') no-repeat center/cover
+  }
+
+  70% {
+    background: url('https://s1.kagirl.cn/pic/material202304/orangeMax.png') no-repeat center/cover
+  }
+
+  80% {
+    background: url('https://s1.kagirl.cn/pic/material202304/orangeMin.png') no-repeat center/cover
+  }
+
+  90% {
+    background: url('https://s1.kagirl.cn/pic/material202304/orangeMax.png') no-repeat center/cover
+  }
+
+  100% {
+    background: url('https://s1.kagirl.cn/pic/material202304/orangeMax.png') no-repeat center/cover
+  }
+}
+
+@keyframes scale-up-center {
+  0% {
+    -webkit-transform: scale(.93);
+    transform: scale(.93)
+  }
+
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1)
+  }
+}
+
+@keyframes slide-in-fwd-right {
+  0% {
+    transform: translateX(100vh) scale(0);
+    opacity: 0
+  }
+
+  25% {
+    transform: translateX(0) scale(1);
+    opacity: 1
+  }
+
+  75% {
+    transform: translateX(0) scale(1);
+    opacity: 1
+  }
+
+  100% {
+    transform: translateX(-100vh) scale(0);
+    opacity: 0
+  }
+}
+
+@keyframes slide-in-fwd-top {
+  0% {
+    transform: translateY(-100vh) scale(0);
+    opacity: 0
+  }
+
+  25% {
+    transform: translateY(0) scale(1);
+    opacity: 1
+  }
+
+  75% {
+    transform: translateY(0) scale(1);
+    opacity: 1
+  }
+
+  100% {
+    transform: translateY(100vh) scale(0);
+    opacity: 0
+  }
+}
+
+.photo-wrapper {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 100vw;
+  height: 100vh
+}
+
+.photo {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  transform: translate(100vw, 0);
+  width: 80%;
+  height: 80%;
+  display: none;
+  padding-bottom: 4rem
+}
+
+.photo image {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  animation: scale-up-center .7s linear infinite alternate both
+}
+
+.spot {
+  position: absolute;
+  -webkit-animation: light 5s 5s linear infinite
+}

happyphoto/moon/moon.js

@@ -0,0 +1,461 @@
+// temp1/moon/moon.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    // 背景音乐
+    bgmusic: {
+      music: null,
+      playing: false
+    },
+    ads: null,
+    hasLoadAdConfig: false,
+    photoIndex: 0,
+    templateName: 'moon',
+    imageURLList: [],
+    examplePhotos: [
+      'ac_2460671559696.jpeg',
+      'ac_2460671397292.jpeg',
+      'ac_2460671423996.jpeg',
+      'ac_2460671434336.jpeg',
+      'ac_2458360598401.jpeg',
+      'ac_2458361815785.jpeg',
+      'ac_2458360739795.jpeg',
+      'ac_2460671486941.jpeg',
+      'ac_2460671514759.jpeg',
+      'ac_2458362072039.jpeg',
+      'ac_2460671702912.jpeg',
+      'ac_2458363166102.jpeg',
+    ],
+    imageWidths: [],
+    imageHeights: [],
+    imageStyles: [],
+    div1: '',
+    div1v: '',
+    div1h: '',
+    ying1v: '',
+    ying1h: '',
+
+    div2v: '',
+    ying2v: '',
+    div2h: '',
+    ying2h: '',
+
+    ying2v: '',
+    div3: '',
+    con3h: '',
+    cony3h: '',
+    con3v: '',
+    cony3v: '',
+    div3h: '',
+    ying3h: '',
+    div3v: '',
+    ying3v: '',
+
+    img1h: '',
+    imgy1h: '',
+    img1v: '',
+    imgy1v: '',
+    img2v: '',
+    imgy2v: '',
+    img2h: '',
+    imgy2h: '',
+    img3h: '',
+    imgy3h: '',
+    img3v: '',
+    imgy3v: '',
+
+    pagediv1: '',
+    pagediv2: '',
+    pagetitle1: '',
+    pagetitle2: '',
+
+
+    timeouts: [],
+    waterIndex: 0,
+    water_arr: [
+      "https://s2.kagirl.cn/template/pic/moon/O0001.jpg",
+      "https://s1.kagirl.cn/template/pic/moon/O0002.jpg",
+      "https://s2.kagirl.cn/template/pic/moon/O0003.jpg",
+      "https://s1.kagirl.cn/template/pic/moon/O0004.jpg",
+      "https://s2.kagirl.cn/template/pic/moon/O0005.jpg",
+      "https://s2.kagirl.cn/template/pic/moon/O0006.jpg",
+      "https://s1.kagirl.cn/template/pic/moon/O0007.jpg",
+      "https://s2.kagirl.cn/template/pic/moon/O0008.jpg",
+      "https://s1.kagirl.cn/template/pic/moon/O0009.jpg",
+      "https://s2.kagirl.cn/template/pic/moon/O0010.jpg"
+    ]
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+    this.setData({
+      imageURLList: this.data.examplePhotos.map(item => {
+        return `https://novel-video.hongdes.cn/kawaalbum/${this.data.templateName}/example/${item}`
+      })
+    })
+    this.initAnimation()
+  },
+
+  initAnimation() {
+    const _this = this
+    // this.watermoving()
+    this.setData({
+      photoIndex: 0
+    })
+    _this.setData({
+      pagediv1: 'overflow: hidden;animation: titlemoving 1s 2s linear infinite alternate',
+      pagediv2: 'overflow: hidden;animation: titlemoving1 1s 2s linear infinite alternate',
+      pagetitle1: 'animation: title_in 2s ease-in-out both',
+      pagetitle2: 'animation: daoying_in 2s ease-in-out both',
+    })
+    _this.data.timeouts.push(setTimeout(function () {
+      _this.setData({
+        pagediv1: 'overflow: visible;',
+        pagediv2: 'overflow: visible;',
+        pagetitle1: 'animation: title_out 1.5s ease-in both',
+        pagetitle2: 'animation: daoying_out 1.5s ease-in both',
+      })
+      _this.data.timeouts.push(setTimeout(function () {
+        _this.show1()
+      }, 1500))
+    }, 3000))
+  },
+
+  watermoving() {
+    const _this = this
+    this.setData({
+      waterIndex: 0
+    })
+    this.watertt = setInterval(function () {
+      if (_this.data.waterIndex === _this.data.water_arr.length) {
+        _this.setData({
+          waterIndex: 0
+        })
+      } else {
+        _this.setData({
+          waterIndex: _this.data.waterIndex + 1
+        })
+      }
+    }, 100)
+  },
+
+  show1() {
+    const _this = this
+    if (this.data.photoIndex === this.data.examplePhotos.length - 1) {
+      // 图片轮询完重新开始
+      this.setData({
+        'photoIndex': 0
+      })
+    }
+    const imageURL = `https://novel-video.hongdes.cn/kawaalbum/${this.data.templateName}/example/${this.data.examplePhotos[this.data.photoIndex]}`
+    wx.getImageInfo({
+      src: imageURL,
+      success(res) {
+        const imageWidth = res.width
+        const imageHeight = res.height
+        let blockStyle = ''
+        if (imageWidth > imageHeight) {
+          //  横版图片
+          blockStyle = 'top:20%;'
+          _this.setData({
+            div1: 'display: block;animation: div1_in 3.5s ease-out both',
+            div1h: 'display:block',
+            ying1h: 'display:block',
+            div1v: 'display: none',
+            ying1v: 'display: none',
+            img1h: imageURL,
+            imgy1h: imageURL
+          })
+        } else {
+          // 竖版图片
+          blockStyle = 'top:10%;'
+          _this.setData({
+            div1: 'display: block;animation: div1_in 3.5s ease-out both',
+            div1v: 'display:block',
+            ying1v: 'display:block',
+            div1h: 'display: none',
+            ying1h: 'display: none',
+            img1v: imageURL,
+            imgy1v: imageURL
+          })
+        }
+
+        _this.data.timeouts.push(setTimeout(() => {
+          _this.setData({
+            'photoIndex': _this.data.photoIndex + 1
+          })
+          _this.show2()
+        }, 6000));
+      },
+      fail(err) {
+        console.error(err);
+      }
+    })
+  },
+
+  show2() {
+    const _this = this
+    if (this.data.photoIndex === this.data.examplePhotos.length - 1) {
+      // 图片轮询完重新开始
+      this.setData({
+        'photoIndex': 0
+      })
+    }
+    const imageURL = `https://novel-video.hongdes.cn/kawaalbum/${this.data.templateName}/example/${this.data.examplePhotos[this.data.photoIndex]}`
+    wx.getImageInfo({
+      src: imageURL,
+      success(res) {
+        const imageWidth = res.width
+        const imageHeight = res.height
+        let blockStyle = ''
+        if (imageWidth > imageHeight) {
+          //  横版图片
+          blockStyle = 'top:20%;'
+          _this.setData({
+            img2h: imageURL,
+            imgy2h: imageURL,
+            div1: 'animation: div1_out 2.5s ease-in both',
+          })
+          _this.data.timeouts.push(setTimeout(() => {
+            _this.setData({
+              div2v: 'display:none;animation:div2v_in 3s ease-out both',
+              ying2v: 'display:none;animation: div2vy_in 3s ease-out both',
+              div2h: 'display:block;animation: div2h_in 3s ease-out both',
+              ying2h: 'display:block;animation: ying2h_in 3s ease-out both'
+            })
+          }, 2500));
+        } else {
+          // 竖版图片
+          blockStyle = 'top:10%;'
+          _this.setData({
+            img2v: imageURL,
+            imgy2v: imageURL,
+            div1: 'animation: div1_out 2.5s ease-in both',
+          })
+          _this.data.timeouts.push(setTimeout(() => {
+            _this.setData({
+              div2v: 'display:block;animation:div2v_in 3s ease-out both',
+              ying2v: 'display:block;animation: div2vy_in 3s ease-out both',
+              div2h: 'display:none;animation: div2h_in 3s ease-out both',
+              ying2h: 'display:none;animation: ying2h_in 3s ease-out both'
+            })
+          }, 2500));
+        }
+        _this.setData({
+          div3: '',
+          con3h: '',
+          cony3h: '',
+          con3v: '',
+          cony3v: '',
+          div3h: '',
+          ying3h: '',
+          div3v: '',
+          ying3v: ''
+        })
+        _this.data.timeouts.push(setTimeout(() => {
+          _this.setData({
+            'photoIndex': _this.data.photoIndex + 1
+          })
+          _this.show3()
+        }, 10000));
+      },
+      fail(err) {
+        console.error(err);
+      }
+    })
+  },
+  show3() {
+    const _this = this
+    if (this.data.photoIndex === this.data.examplePhotos.length - 1) {
+      // 图片轮询完重新开始
+      this.setData({
+        'photoIndex': 0
+      })
+    }
+    const imageURL = `https://novel-video.hongdes.cn/kawaalbum/${this.data.templateName}/example/${this.data.examplePhotos[this.data.photoIndex]}`
+    wx.getImageInfo({
+      src: imageURL,
+      success(res) {
+        const imageWidth = res.width
+        const imageHeight = res.height
+        let blockStyle = ''
+        if (imageWidth > imageHeight) {
+          //  横版图片
+          blockStyle = 'top:20%;'
+          _this.setData({
+            img3h: imageURL,
+            imgy3h: imageURL,
+            div2v: 'animation: div2v_out 2.5s ease-in both',
+            ying2v: 'animation: div2vy_out 2.5s ease-in both',
+            div2h: 'animation: div2h_out 2.5s ease-in both',
+            ying2h: 'animation: ying2h_out 2.5s ease-in both',
+            div3v: 'display:none;animation: div2h_in 4s ease-out both',
+            ying3v: 'display:none;animation: ying2h_in 4s ease-out both',
+            div3h: 'display:block;animation: div2v_in 4s ease-out both',
+            ying3h: 'display:block;animation: div2vy_in 4s ease-out both',
+            div3: 'animation: div3_in 4s ease-out both',
+          })
+        } else {
+          // 竖版图片
+          blockStyle = 'top:10%;'
+          _this.setData({
+            img3v: imageURL,
+            imgy3v: imageURL,
+            div2v: 'animation: div2v_out 2.5s ease-in both',
+            ying2v: 'animation: div2vy_out 2.5s ease-in both',
+            div2h: 'animation: div2h_out 2.5s ease-in both',
+            ying2h: 'animation: ying2h_out 2.5s ease-in both',
+            div3h: 'display:none;animation: div2h_in 4s ease-out both',
+            ying3h: 'display:none;animation: ying2h_in 4s ease-out both',
+            div3v: 'display:block;animation: div2v_in 4s ease-out both',
+            ying3v: 'display:block;animation: div2vy_in 4s ease-out both',
+            div3: 'animation: div3_in 4s ease-out both',
+          })
+        }
+        _this.data.timeouts.push(setTimeout(() => {
+          _this.setData({
+            'photoIndex': _this.data.photoIndex + 1
+          })
+          _this.show4()
+        }, 8000));
+      },
+      fail(err) {
+        console.error(err);
+      }
+    })
+  },
+  show4() {
+    const _this = this
+    if (this.data.photoIndex === this.data.examplePhotos.length - 1) {
+      // 图片轮询完重新开始
+      this.setData({
+        'photoIndex': 0
+      })
+    }
+    const imageURL = `https://novel-video.hongdes.cn/kawaalbum/${this.data.templateName}/example/${this.data.examplePhotos[this.data.photoIndex]}`
+    wx.getImageInfo({
+      src: imageURL,
+      success(res) {
+        const imageWidth = res.width
+        const imageHeight = res.height
+        let blockStyle = ''
+        if (imageWidth > imageHeight) {
+          //  横版图片
+          blockStyle = 'top:20%;'
+          _this.setData({
+            div1h: 'display:block',
+            ying1h: 'display:block',
+            div1v: 'display: none',
+            ying1v: 'display: none',
+            img1h: imageURL,
+            imgy1h: imageURL,
+          })
+        } else {
+          // 竖版图片
+          blockStyle = 'top:10%;'
+          _this.setData({
+            div1v: 'display:block',
+            ying1v: 'display:block',
+            div1h: 'display: none',
+            ying1h: 'display: none',
+            img1v: imageURL,
+            imgy1v: imageURL,
+          })
+        }
+        _this.setData({
+          con3h: 'animation: div3h_out 3s ease-in both',
+          cony3h: 'animation:ying3h_out 3s ease-in both',
+          con3v: 'animation: div3h_out 3s ease-in both',
+          cony3v: 'animation: ying3h_out 3s ease-in both',
+          div1: 'animation: div1_in 3.5s 2.5s ease-out both',
+        })
+        _this.data.timeouts.push(setTimeout(() => {
+          _this.setData({
+            'photoIndex': _this.data.photoIndex + 1
+          })
+          _this.show2()
+        }, 10000));
+      },
+      fail(err) {
+        console.error(err);
+      }
+    })
+  },
+
+  /**
+ * 播放音乐
+ */
+  initBgMusic() {
+    let _this = this
+    if (!app.globalData.audioContext) {
+      app.globalData.audioContext = wx.createInnerAudioContext()
+    }
+    // obeyMuteSwitch（仅在 iOS 生效）是否遵循静音开关，设置为 false 之后，即使是在静音模式下，也能播放声音
+    wx.setInnerAudioOption({
+      obeyMuteSwitch: false
+    })
+    // 设置音乐循环
+    app.globalData.audioContext.loop = true
+    // 监听音乐播放
+    app.globalData.audioContext.onPlay(() => {
+      _this.setData({
+        'bgmusic.playing': true
+      })
+      console.log('music play', _this.data.bgmusic.playing)
+    })
+    // 监听音乐暂停
+    app.globalData.audioContext.onPause(() => {
+      console.log('music pause')
+      _this.setData({
+        'bgmusic.playing': false
+      })
+    })
+    app.globalData.audioContext.src = this.data.bgmusic.music.url
+    app.globalData.audioContext.play()
+  },
+
+  /**
+   * 音乐播放按钮
+   */
+  musicPlayTap() {
+    app.globalData.audioContext.paused ? app.globalData.audioContext.play() : app.globalData.audioContext.pause()
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+    this.clearTimeoutTask()
+  },
+
+  // 清除定时任务
+  clearTimeoutTask() {
+    this.data.timeouts.forEach(timeout => clearTimeout(timeout));
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

happyphoto/moon/moon.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

happyphoto/moon/moon.wxml

@@ -0,0 +1,122 @@
+<!--temp1/moon/moon.wxml-->
+<view id="container">
+  <navigator open-type="navigateBack" style="position: fixed;top: 60rpx; left: 30rpx;color:#ffffff;z-index: 999">
+    <image src="/assets/images/icons/icon-back-white.png" style="width: 50rpx;height: 50rpx;"></image>
+  </navigator>
+  <view id="bg"></view>
+
+  <image id="water" src="{{water_arr[waterIndex]}}"></image>
+
+
+  <image class="moon" src="https://s1.kagirl.cn/template/pic/moon/moon.png"></image>
+
+  <view id="pagediv1" style="{{pagediv1}}">
+    <view id="pagetitle1" style="{{pagetitle1}}">
+      <view style="position:absolute;width:340px;height:150px;overflow:hidden;display:table">
+        <view id="titlecontent1"
+          style="width:340px;height:150px;vertical-align:middle;display:table-cell;text-align:center;font-size:30px;line-height:45px;color: #fff;">
+          我又想你了，你也在想我吗？</view>
+      </view>
+    </view>
+  </view>
+  <view id="pagediv2" style="{{pagediv2}}">
+    <view id="pagetitle2" style="{{pagetitle2}}">
+      <view style="position:absolute;width:340px;height:150px;overflow:hidden;display:table">
+        <view id="titlecontent2"
+          style="width:340px;height:150px;vertical-align:middle;display:table-cell;text-align:center;font-size:30px;line-height:45px;color: #fff;">
+          我又想你了，你也在想我吗？</view>
+      </view>
+    </view>
+  </view>
+
+  <view id="div1" style="{{div1}}">
+    <view id="div1h" class="divh" style="display: block;">
+      <image id="img1h" class="img" mode="widthFix" src="{{img1h}}"></image>
+      <view id="word1h" class="wordspanh"></view>
+    </view>
+    <view id="ying1h" class="divh" style="display: block;">
+      <image id="imgy1h" mode="widthFix" class="img" src="{{imgy1h}}">
+      </image>
+      <view id="wordy1h" class="wordspanh"></view>
+    </view>
+    <view id="div1v" class="divv" style="{{div1v}}">
+      <image id="img1v" class="img" mode="widthFix" src="{{img1v}}"></image>
+      <view id="word1v" class="wordspanv"></view>
+    </view>
+    <view id="ying1v" class="divv" style="{{ying1v}}">
+      <image id="imgy1v" class="img" mode="widthFix" src="{{imgy1v}}"></image>
+      <view id="wordy1v" class="wordspanv"></view>
+    </view>
+  </view>
+
+
+  <view id="con2v">
+    <view id="div2v" class="divv" style="{{div2v}}">
+      <image id="img2v" class="img" mode="widthFix" src="{{img2v}}"></image>
+      <view id="word2v" class="wordspanv"></view>
+    </view>
+  </view>
+  <view id="cony2v">
+    <view id="ying2v" class="divv" style="{{ying2v}}">
+      <image id="imgy2v" class="img" mode="widthFix" src="{{imgy2v}}"></image>
+      <view id="wordy2v" class="wordspanv"></view>
+    </view>
+  </view>
+
+  <view id="con2h">
+    <view id="div2h" class="divh" style="{{div2h}}">
+      <image id="img2h" class="img" mode="widthFix" src="{{img2h}}"></image>
+      <view id="word2h" class="wordspanh"></view>
+    </view>
+  </view>
+  <view id="cony2h">
+    <view id="ying2h" class="divh" style="{{ying2h}}">
+      <image id="imgy2h" class="img" mode="widthFix" src="{{imgy2h}}"></image>
+      <view id="wordy2h" class="wordspanh"></view>
+    </view>
+  </view>
+
+  <view id="div3" style="{{div3}}">
+    <view id="con3h" style="{{con3h}}">
+      <view id="div3h" class="divh" style="{{div3h}}">
+        <image id="img3h" class="img" mode="widthFix" src="{{img3h}}">
+        </image>
+        <view id="word3h" class="wordspanh"></view>
+      </view>
+    </view>
+    <view id="cony3h" style="{{cony3h}}">
+      <view id="ying3h" class="divh" style="{{ying3h}}">
+        <image id="imgy3h" class="img" mode="widthFix" src="{{imgy3h}}"></image>
+        <view id="wordy3h" class="wordspanh"></view>
+      </view>
+    </view>
+
+    <view id="con3v" style="{{con3v}}">
+      <view id="div3v" class="divv" style="{{div3v}}">
+        <image id="img3v" class="img" mode="widthFix" src="{{img3v}}"></image>
+        <view id="word3v" class="wordspanv"></view>
+      </view>
+    </view>
+    <view id="cony3v" style="{{cony3v}}">
+      <view id="ying3v" class="divv" style="{{ying3v}}">
+        <image id="imgy3v" class="img" mode="widthFix" src="{{imgy3v}}"></image>
+        <view id="wordy3v" class="wordspanv"></view>
+      </view>
+    </view>
+  </view>
+
+  <!--
+  <view id="pBmF7kZo5-an-obj-2">
+    <view>
+      <image height="57" width="56" src="https://s2.kagirl.cn/template/pic/moon/ban2.png"></image>
+    </view>
+  </view> -->
+  <image id="hua2" src="https://s2.kagirl.cn/template/pic/moon/ban2.png"></image>
+  <view class="huadiv3">
+    <image id="hua3" src="https://s1.kagirl.cn/template/pic/moon/ban1.png"></image>
+  </view>
+  <image id="hua4" src="https://s2.kagirl.cn/template/pic/moon/ban2.png"></image>
+
+  <image class="hehua" mode="widthFix" src="https://s2.kagirl.cn/template/pic/moon/hehua.png"></image>
+  <image class="yulan" mode="widthFix" src="https://s1.kagirl.cn/template/pic/moon/hua.png"></image>
+</view>

happyphoto/moon/moon.wxss

@@ -0,0 +1,707 @@
+/* temp1/moon/moon.wxss */
+#container {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  overflow: hidden
+}
+
+#container>view,
+#container>image {
+  position: absolute
+}
+
+.yulan {
+  left: 0;
+  top: 0;
+  width: 400rpx;
+}
+
+.hehua {
+  left: 0;
+  top: 579px;
+  bottom: 0;
+  top: auto;
+  width: 100%;
+}
+
+#water {
+  opacity: .5;
+  top: 45.4vh;
+  width: 100%;
+}
+
+#pBmF7kZo5-an-obj-2 {
+  -webkit-transform: translate3d(-28px, -105px, 0) rotateX(0) rotateY(0) rotateZ(-17.6deg) scale3d(2, 2, 1);
+  width: 56px;
+  height: 57px;
+  top: 0;
+  left: 0
+}
+
+@-webkit-keyframes ani-pBmF7kZo5-an-obj-2-0 {
+  0% {
+    -webkit-transform: translate3d(-28px, -105px, 0) rotateX(0) rotateY(0) rotateZ(-17.6deg) scale3d(2, 2, 1);
+    -webkit-transform-origin: 50% 50%;
+    -webkit-animation-timing-function: linear;
+    opacity: 1
+  }
+
+  50.7144% {
+    -webkit-transform: translate3d(203px, 211px, 0) rotateX(0) rotateY(0) rotateZ(-317.6deg) scale3d(1.5, 1.5, 1);
+    -webkit-transform-origin: 50% 50%;
+    -webkit-animation-timing-function: linear;
+    opacity: 1
+  }
+
+  60.0724% {
+    -webkit-transform: translate3d(274px, 250px, 0) rotateX(0) rotateY(0) rotateZ(-384.1deg) scale3d(.89, .89, 1);
+    -webkit-transform-origin: 50% 50%;
+    -webkit-animation-timing-function: linear;
+    opacity: 1
+  }
+
+  70.1348% {
+    -webkit-transform: translate3d(341px, 253px, 0) rotateX(0) rotateY(0) rotateZ(-492deg) scale3d(.54, .54, 1);
+    -webkit-transform-origin: 50% 50%;
+    -webkit-animation-timing-function: linear;
+    opacity: 1
+  }
+
+  79.6941% {
+    -webkit-transform: translate3d(387px, 229px, 0) rotateX(0) rotateY(0) rotateZ(-622.4deg) scale3d(.42, .42, 1);
+    -webkit-transform-origin: 50% 50%;
+    -webkit-animation-timing-function: linear;
+    opacity: 1
+  }
+
+  89.354% {
+    -webkit-transform: translate3d(416px, 195px, 0) rotateX(0) rotateY(0) rotateZ(-717.6deg) scale3d(.3, .3, 1);
+    -webkit-transform-origin: 50% 50%;
+    -webkit-animation-timing-function: linear;
+    opacity: 1
+  }
+
+  100% {
+    -webkit-transform: translate3d(420px, 147px, 0) rotateX(0) rotateY(0) rotateZ(-817.6deg) scale3d(.24, .24, 1);
+    -webkit-transform-origin: 50% 50%;
+    -webkit-animation-timing-function: linear;
+    opacity: 0
+  }
+}
+
+#pBmF7kZo5-an-obj-2 {
+  position: absolute;
+  -webkit-animation-name: ani-pBmF7kZo5-an-obj-2-0;
+  -webkit-animation-duration: 7s;
+  -webkit-animation-delay: 0s;
+  -webkit-animation-fill-mode: infnite
+}
+
+#hua2 {
+  left: -70px;
+  top: 11px;
+  width: 130rpx;
+  height: 130rpx;
+  -webkit-animation: hua2 6s 2s linear infinite
+}
+
+@-webkit-keyframes hua2 {
+  0% {
+    -webkit-transform: translate(-12px, 0) rotate(-30deg) scale(2);
+    opacity: 1;
+    -webkit-animation-timing-function: linear
+  }
+
+  50% {
+    -webkit-transform: translate(322px, 202px) rotate(-275deg) scale(1);
+    opacity: 1;
+    -webkit-animation-timing-function: linear
+  }
+
+  65% {
+    -webkit-transform: translate(409px, 221px) rotate(-375deg) scale(.7);
+    opacity: 1;
+    -webkit-animation-timing-function: linear
+  }
+
+  84% {
+    -webkit-transform: translate(461px, 195px) rotate(-475deg) scale(.5);
+    opacity: 1;
+    -webkit-animation-timing-function: linear
+  }
+
+  100% {
+    -webkit-transform: translate(478px, 152px) rotate(-575deg) scale(.2);
+    opacity: 0;
+    -webkit-animation-timing-function: linear
+  }
+}
+
+.moon {
+  right: 20rpx;
+  top: 64px;
+  width: 300rpx;
+  height: 300rpx;
+}
+
+#hua3 {
+  width: 140rpx;
+  height: 140rpx;
+  position: absolute;
+  -webkit-animation: hua3 7s linear infinite;
+}
+
+.huadiv3 {
+  left: 0;
+  top: 300px;
+  -webkit-animation: huadiv3 7s cubic-bezier(0, .53, 1, .52) infinite;
+}
+
+@-webkit-keyframes hua3 {
+  from {
+    -webkit-transform: translate(0, 0) rotate(0) scale(1)
+  }
+
+  to {
+    -webkit-transform: translate(558px, 0) rotate(400deg) scale(2)
+  }
+}
+
+@-webkit-keyframes huadiv3 {
+  from {
+    -webkit-transform: translate(0, 0)
+  }
+
+  to {
+    -webkit-transform: translate(0, -120px)
+  }
+}
+
+#hua4 {
+  left: 169px;
+  top: -93px;
+  width: 120rpx;
+  height: 120rpx;
+  -webkit-animation: hua4 7s 2s linear infinite
+}
+
+@-webkit-keyframes hua4 {
+  0% {
+    -webkit-transform: translate(0, 0) rotate(0) scale(2);
+    opacity: 1
+  }
+
+  47% {
+    -webkit-transform: translate(93px, 163px) rotate(-153deg) scale(1);
+    opacity: 1
+  }
+
+  65% {
+    -webkit-transform: translate(149px, 189px) rotate(-303deg) scale(.8);
+    opacity: 1
+  }
+
+  82% {
+    -webkit-transform: translate(202px, 158px) rotate(-411deg) scale(.6);
+    opacity: 1
+  }
+
+  100% {
+    -webkit-transform: translate(255px, 202px) rotate(-476deg) scale(.3);
+    opacity: 0
+  }
+}
+
+#pagediv1 {
+  width: 340px;
+  height: 150px;
+  top: 450rpx;
+  left: 30rpx;
+  overflow: hidden;
+}
+
+#pagediv2 {
+  width: 340px;
+  height: 150px;
+  top: 800rpx;
+  left: 30rpx;
+  overflow: hidden;
+  opacity: .3
+}
+
+@-webkit-keyframes title_in {
+  from {
+    -webkit-transform: translate(0, 0)
+  }
+
+  to {
+    -webkit-transform: translate(0, -60rpx)
+  }
+}
+
+@-webkit-keyframes title_out {
+  from {
+    -webkit-transform: translate(0, -60rpx);
+    opacity: 1
+  }
+
+  to {
+    -webkit-transform: translate(0, -200rpx);
+    opacity: 0
+  }
+}
+
+@-webkit-keyframes daoying_in {
+  from {
+    -webkit-transform: translate(0, 0) scale(1, -1)
+  }
+
+  to {
+    -webkit-transform: translate(0, 120px) scale(1, -1)
+  }
+}
+
+@-webkit-keyframes daoying_out {
+  from {
+    -webkit-transform: translate(0, 150px) scale(1, -1);
+    opacity: 1
+  }
+
+  to {
+    -webkit-transform: translate(0, 200px) scale(1, -1);
+    opacity: 0
+  }
+}
+
+@-webkit-keyframes titlemoving {
+  from {
+    -webkit-transform: translate(0, 0)
+  }
+
+  to {
+    -webkit-transform: translate(0, 5px)
+  }
+}
+
+@-webkit-keyframes titlemoving1 {
+  from {
+    -webkit-transform: translate(0, 0)
+  }
+
+  to {
+    -webkit-transform: translate(0, -5px)
+  }
+}
+
+#div1h {
+  left: 80rpx;
+  width: 600rpx;
+  top: 220rpx;
+  height: 420rpx;
+  -webkit-animation: div1moving 1.5s linear infinite alternate;
+}
+
+#div1v {
+  left: 70px;
+  top: 100px;
+  -webkit-animation: div1moving 1.5s linear infinite alternate
+}
+
+#ying1h {
+  left: 50px;
+  top: 430px;
+  opacity: .8;
+  -webkit-transform: scale(1, -1);
+  -webkit-mask: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 1)));
+  -webkit-animation: div1moving1 1.5s linear infinite alternate;
+  top: 45.4vh;
+  left: 80rpx;
+  width: 600rpx;
+  height: 420rpx;
+}
+
+#ying1v {
+  left: 70px;
+  top: 643px;
+  opacity: .8;
+  -webkit-transform: scale(1, -1);
+  -webkit-mask: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 1)));
+  -webkit-animation: div1moving1 1.5s linear infinite alternate
+}
+
+.divh {
+  width: 400px;
+  height: 430rpx;
+  background-color: #ccc;
+  border: 3px solid #fff;
+  overflow: hidden;
+  position: absolute;
+}
+
+.divv {
+  width: 360px;
+  height: 540px;
+  background-color: #ccc;
+  border: 6px solid #fff;
+  overflow: hidden;
+  position: absolute
+}
+
+.img {
+  position: absolute
+}
+
+#div1 {
+  -webkit-transform: translate(-455px, 0)
+}
+
+@-webkit-keyframes div1_in {
+  from {
+    -webkit-transform: translate(-455px, 0)
+  }
+
+  to {
+    -webkit-transform: translate(0, 0)
+  }
+}
+
+@-webkit-keyframes div1_out {
+  from {
+    -webkit-transform: translate(0, 0)
+  }
+
+  to {
+    -webkit-transform: translate(455px, 0)
+  }
+}
+
+@-webkit-keyframes div1moving {
+  from {
+    -webkit-transform: translate(-3px, 0)
+  }
+
+  to {
+    -webkit-transform: translate(3px, 0)
+  }
+}
+
+@-webkit-keyframes div1moving1 {
+  from {
+    -webkit-transform: translate(-3px, 0) scale(1, -1)
+  }
+
+  to {
+    -webkit-transform: translate(3px, 0) scale(1, -1)
+  }
+}
+
+#div2v,
+#div3v {
+  left: 67px;
+  top: 102px;
+  -webkit-transform: translate(0, 550px);
+  display: none;
+
+  left: 80rpx;
+  width: 600rpx;
+  top: 220rpx;
+  height: 420rpx;
+}
+
+#ying2v {
+  left: 67px;
+  top: 0;
+  opacity: .6;
+  -webkit-transform: translate(0, -550px) scale(1, -1);
+  display: none
+}
+
+#ying3v {
+  left: 67px;
+  top: 0;
+  -webkit-transform: translate(0, -550px) scale(1, -1);
+  display: none
+}
+
+#con2v,
+#con3v {
+  width: 100%;
+  height: 642px;
+  overflow: hidden;
+  position: absolute
+}
+
+#cony2v,
+#cony3v {
+  left: 0;
+  top: 643px;
+  width: 100%;
+  height: 500px;
+  overflow: hidden;
+  position: absolute
+}
+
+@-webkit-keyframes div2v_in {
+  from {
+    -webkit-transform: translate(0, 550px)
+  }
+
+  to {
+    -webkit-transform: translate(0, 100rpx)
+  }
+}
+
+@-webkit-keyframes div2v_out {
+  from {
+    -webkit-transform: translate(0, 0)
+  }
+
+  to {
+    -webkit-transform: translate(0, 550px)
+  }
+}
+
+@-webkit-keyframes div2vy_in {
+  from {
+    -webkit-transform: translate(0, -550px) scale(1, -1)
+  }
+
+  to {
+    -webkit-transform: translate(0, 0) scale(1, -1)
+  }
+}
+
+@-webkit-keyframes div2vy_out {
+  from {
+    -webkit-transform: translate(0, 0) scale(1, -1)
+  }
+
+  to {
+    -webkit-transform: translate(0, -550px) scale(1, -1)
+  }
+}
+
+#div2h {
+  display: none;
+  -webkit-transform: translate(0, 300rpx);
+  left: 0rpx;
+  width: 600rpx;
+  height: 430rpx;
+}
+
+#ying2h {
+  display: none;
+  opacity: .6;
+  -webkit-transform: translate(0, -280px) scale(1, -1);
+  width: 600rpx;
+  height: 430rpx;
+}
+
+#con2h {
+  left: 50px;
+  top: 200px;
+  width: 400px;
+  height: 270px;
+  overflow: hidden;
+  position: absolute;
+  top: calc(45.4vh - 270px - 2px)
+}
+
+#con3h {
+  left: 50rpx;
+  top: 200px;
+  width: 650rpx;
+  height: 278px;
+  overflow: hidden;
+  position: absolute;
+  top: calc(45.4vh - 270px - 2px)
+}
+
+#cony2h {
+  left: 50px;
+  top: 470px;
+  height: 270px;
+  width: 400px;
+  overflow: hidden;
+  opacity: .8;
+  position: absolute;
+  top: 45.4vh
+}
+
+#cony3h {
+  left: 50rpx;
+  top: 470px;
+  height: 280px;
+  width: 650rpx;
+  overflow: hidden;
+  opacity: .6;
+  position: absolute;
+  top: 45.4vh
+}
+
+#cony3v {
+  opacity: .6
+}
+
+#div3v,
+#ying3v {
+  display: none
+}
+
+@-webkit-keyframes div2h_in {
+  from {
+    -webkit-transform: translate(0, 300rpx)
+  }
+
+  to {
+    -webkit-transform: translate(0, 100rpx)
+  }
+}
+
+@-webkit-keyframes div2h_out {
+  from {
+    -webkit-transform: translate(0, 0)
+  }
+
+  to {
+    -webkit-transform: translate(0, 280px)
+  }
+}
+
+@-webkit-keyframes ying2h_in {
+  from {
+    -webkit-transform: translate(0, -280px) scale(1, -1)
+  }
+
+  to {
+    -webkit-transform: translate(0, 0) scale(1, -1)
+  }
+}
+
+@-webkit-keyframes ying2h_out {
+  from {
+    -webkit-transform: translate(0, 0) scale(1, -1)
+  }
+
+  to {
+    -webkit-transform: translate(0, -280px) scale(1, -1)
+  }
+}
+
+@-webkit-keyframes div2moving {
+  from {
+    -webkit-transform: translate(0, 0)
+  }
+
+  to {
+    -webkit-transform: translate(0, 5px)
+  }
+}
+
+@-webkit-keyframes divy2moving {
+  from {
+    -webkit-transform: translate(0, 0)
+  }
+
+  to {
+    -webkit-transform: translate(0, -5px)
+  }
+}
+
+@-webkit-keyframes ying2moving {
+  from {
+    -webkit-transform: translate(0, 0) scale(1, -1)
+  }
+
+  to {
+    -webkit-transform: translate(0, -5px) scale(1, -1)
+  }
+}
+
+#div3 {
+  left: 450px;
+  top: 200px;
+  width: 500px;
+  height: 815px
+}
+
+@-webkit-keyframes div3_in {
+  from {
+    -webkti-transform: translate(0px, 0px)
+  }
+
+  to {
+    -webkit-transform: translate(-450px, -200px)
+  }
+}
+
+@-webkit-keyframes div3_move {
+  from {
+    -webkit-transform: translate(-450px, -200px) scale(1)
+  }
+
+  to {
+    -webkit-transform: translate(-450px, -180px) scale(1.03)
+  }
+}
+
+@-webkit-keyframes div3h_out {
+  from {
+    -webkit-transform: translate(0, 0);
+    opacity: 1
+  }
+
+  to {
+    -webkit-transform: translate(-200px, -200px);
+    opacity: 0
+  }
+}
+
+@-webkit-keyframes ying3h_out {
+  from {
+    -webkit-transform: translate(0, 0);
+    opacity: .6
+  }
+
+  to {
+    -webkit-transform: translate(-200px, 200px);
+    opacity: 0
+  }
+}
+
+.wordspanh {
+  width: 280px;
+  color: #fff;
+  font-family: bold;
+  text-shadow: 1px 1px 2px #000;
+  font-size: 25px;
+  position: absolute;
+  text-align: center;
+  left: 59px;
+  bottom: 10px;
+  font-weight: 700
+}
+
+.wordspanv {
+  width: 280px;
+  color: #fff;
+  font-family: bold;
+  text-shadow: 1px 1px 2px #000;
+  font-size: 25px;
+  position: absolute;
+  text-align: center;
+  left: 37px;
+  bottom: 20px;
+  font-weight: 700
+}
+
+#bg {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-image: url("https://s2.kagirl.cn/template/pic/moon/bg.jpg");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center
+}

happyphoto/qiangwei/qiangwei.js

@@ -0,0 +1,236 @@
+// temp1/qiangwei/qiangwei.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    // 背景音乐
+    bgmusic: {
+      music: null,
+      playing: false
+    },
+    ads: null,
+    hasLoadAdConfig: false,
+    photoIndex: 0,
+    templateName: 'qiangwei',
+    imageURLList: [],
+    examplePhotos: [
+      'zf_258218341366.jpeg',
+      'zf_258218116751.jpeg',
+      'ac_334498528r4772.jpeg',
+      'ac_334498486r7228.jpeg',
+      'zf_258218386895.jpeg',
+      'ac_334498609r7254.jpeg',
+      'zf_258218412666.jpeg',
+      'zf_258218444819.jpeg',
+      'zf_258218559014.jpeg',
+      'zf_258218733407.jpeg',
+      'zf_260855787466.jpeg',
+      'zf_260855871366.jpeg',
+    ],
+    imageWidths: [],
+    imageHeights: [],
+    imageStyles: [],
+
+    div11Image: '',
+    div11Style: '',
+    div1Image: '',
+    div1Style: '',
+
+    div21Image: '',
+    div21Style: '',
+    div2Image: '',
+    div2Style: '',
+
+    div31Image: '',
+    div31Style: '',
+    div3Image: '',
+    div3Style: '',
+
+    div41Image: '',
+    div41Style: '',
+    div4Image: '',
+    div4Style: '',
+
+    word1: '',
+    word2: '',
+    word3: '',
+    word4: '',
+
+    yuan: '',
+    xin: '',
+    pagetitle: '',
+    bian: '',
+
+    timeouts: []
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+    this.setData({
+      imageURLList: this.data.examplePhotos.map(item => {
+        return `https://novel-video.hongdes.cn/kawaalbum/${this.data.templateName}/example/${item}`
+      })
+    })
+    this.initAnimation()
+  },
+
+  initAnimation() {
+    const _this = this
+    this.setData({
+      photoIndex: 0
+    })
+    _this.setData({
+      yuan: 'animation: yuan 2s 1.2s ease-out both;',
+      xin: 'animation: xin 1.6s linear both;',
+      pagetitle: 'animation: yuan 2s 1.2s ease-out both;',
+      bian: 'animation: bian 2s 1s ease-in both;'
+    })
+    _this.data.timeouts.push(setTimeout(function () {
+      _this.setData({
+        pagetitle: 'animation: yuan-out 1.6s linear both;',
+        yuan: 'animation: yuan-out 1.6s linear both;',
+        bian: 'animation: bian-out 1.6s linear both;'
+      })
+      _this.data.timeouts.push(setTimeout(function () {
+        _this.showPage()
+      }, 1500))
+    }, 5000))
+  },
+
+  showPage() {
+    const _this = this
+    if (this.data.photoIndex === this.data.examplePhotos.length - 1) {
+      // 图片轮询完重新开始
+      this.setData({
+        'photoIndex': 0
+      })
+    }
+    const pageIndex = this.data.photoIndex % 4 + 1
+    const imageURL = `https://novel-video.hongdes.cn/kawaalbum/${this.data.templateName}/example/${this.data.examplePhotos[this.data.photoIndex]}`
+    wx.getImageInfo({
+      src: imageURL,
+      success(res) {
+        const imageWidth = res.width
+        const imageHeight = res.height
+        let blockStyle = ''
+        if (imageWidth > imageHeight) {
+          //  横版图片
+          blockStyle = 'top:20%;'
+        } else {
+          // 竖版图片
+          blockStyle = 'top:10%;'
+        }
+        let nextPageIndex = 0
+        let an = 0
+        if (pageIndex === 1) {
+          nextPageIndex = 4
+          an = 1
+        } else if (pageIndex === 2) {
+          nextPageIndex = 1
+          an = 2
+        } else if (pageIndex === 3) {
+          nextPageIndex = 2
+          an = 1
+        } else if (pageIndex === 4) {
+          nextPageIndex = 3
+          an = 4
+        }
+        _this.setData({
+          [`div${pageIndex}Style`]: `animation: div${an}-in 6s linear both;`,
+          [`div${pageIndex}1Style`]: `animation: div${an}1h-in 6s linear both;`,
+          [`div${pageIndex}1Image`]: imageURL,
+          [`div${pageIndex}Image`]: imageURL,
+          [`div${nextPageIndex}1Style`]: '',
+          [`div${nextPageIndex}Style`]: '',
+          [`word${pageIndex}`]: 'animation: fadein 0.5s 0.5s linear both;',
+          [`word${nextPageIndex}`]: 'animation: fadeout 0.5s linear both;',
+        })
+        _this.data.timeouts.push(setTimeout(() => {
+          _this.setData({
+            'photoIndex': _this.data.photoIndex + 1
+          })
+          _this.showPage()
+        }, 6000));
+      },
+      fail(err) {
+        console.error(err);
+      }
+    })
+  },
+
+  /**
+ * 播放音乐
+ */
+  initBgMusic() {
+    let _this = this
+    if (!app.globalData.audioContext) {
+      app.globalData.audioContext = wx.createInnerAudioContext()
+    }
+    // obeyMuteSwitch（仅在 iOS 生效）是否遵循静音开关，设置为 false 之后，即使是在静音模式下，也能播放声音
+    wx.setInnerAudioOption({
+      obeyMuteSwitch: false
+    })
+    // 设置音乐循环
+    app.globalData.audioContext.loop = true
+    // 监听音乐播放
+    app.globalData.audioContext.onPlay(() => {
+      _this.setData({
+        'bgmusic.playing': true
+      })
+      console.log('music play', _this.data.bgmusic.playing)
+    })
+    // 监听音乐暂停
+    app.globalData.audioContext.onPause(() => {
+      console.log('music pause')
+      _this.setData({
+        'bgmusic.playing': false
+      })
+    })
+    app.globalData.audioContext.src = this.data.bgmusic.music.url
+    app.globalData.audioContext.play()
+  },
+
+  /**
+   * 音乐播放按钮
+   */
+  musicPlayTap() {
+    app.globalData.audioContext.paused ? app.globalData.audioContext.play() : app.globalData.audioContext.pause()
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+    this.clearTimeoutTask()
+  },
+
+  // 清除定时任务
+  clearTimeoutTask() {
+    this.data.timeouts.forEach(timeout => clearTimeout(timeout));
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

happyphoto/qiangwei/qiangwei.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

happyphoto/qiangwei/qiangwei.wxml

@@ -0,0 +1,102 @@
+<!--temp1/qiangwei/qiangwei.wxml-->
+<view id="container">
+  <navigator open-type="navigateBack" style="position: fixed;top: 60rpx; left: 30rpx;color:#ffffff;z-index: 999">
+    <image src="/assets/images/icons/icon-back-white.png" style="width: 50rpx;height: 50rpx;"></image>
+  </navigator>
+  <view id="bg"></view>
+  <view id="div0">
+    <image id="div1-1" mode="center" src="{{div11Image}}" style="{{div11Style}}"></image>
+    <image id="div1" mode="scaleToFill" src="{{div1Image}}" style="{{div1Style}}"></image>
+
+    <image id="div2-1" mode="center" src="{{div21Image}}" style="{{div21Style}}"></image>
+    <image id="div2" mode="scaleToFill" src="{{div2Image}}" style="{{div2Style}}"></image>
+
+    <image id="div3-1" mode="center" src="{{div31Image}}" style="{{div31Style}}"></image>
+    <image id="div3" mode="scaleToFill" src="{{div3Image}}" style="{{div3Style}}"></image>
+
+    <image id="div4-1" mode="center" src="{{div41Image}}" style="{{div41Style}}"></image>
+    <image id="div4" mode="scaleToFill" src="{{div4Image}}" style="{{div4Style}}"></image>
+
+  </view>
+
+  <view class="hua1">
+    <image class="hua1_img" src="https://s1.kagirl.cn/template/pic/qiangwei/hua3.png"></image>
+    <image class="hua2" src="https://s2.kagirl.cn/template/pic/qiangwei/hua4.png"></image>
+  </view>
+
+  <view id="word1" class="myword" style="{{word1}}"></view>
+  <view id="word2" class="myword" style="{{word2}}"></view>
+  <view id="word3" class="myword" style="{{word3}}"></view>
+  <view id="word4" class="myword" style="{{word4}}"></view>
+
+  <image class="ye5" src="https://s1.kagirl.cn/template/pic/qiangwei/ye.png"></image>
+  <image class="hua5" src="https://s2.kagirl.cn/template/pic/qiangwei/hua8.png"></image>
+  <image class="hua4" src="https://s1.kagirl.cn/template/pic/qiangwei/hua2.png"></image>
+  <image class="hua3" src="https://s2.kagirl.cn/template/pic/qiangwei/hua8.png"></image>
+  <image class="ye1" src="https://s2.kagirl.cn/template/pic/qiangwei/ye1.png"></image>
+  <image class="ye2" src="https://s2.kagirl.cn/template/pic/qiangwei/ye1.png"></image>
+  <image class="ye3" src="https://s2.kagirl.cn/template/pic/qiangwei/ye1.png"></image>
+  <image class="ye4" src="https://s2.kagirl.cn/template/pic/qiangwei/ye1.png"></image>
+
+  <image class="hua1-1" src="https://s2.kagirl.cn/template/pic/qiangwei/hua4.png"></image>
+  <image class="hua1-2" src="https://s2.kagirl.cn/template/pic/qiangwei/hua4.png"></image>
+  <image class="hua1-3" src="https://s1.kagirl.cn/template/pic/qiangwei/hua3.png"></image>
+  <image class="hua1-4" src="https://s1.kagirl.cn/template/pic/qiangwei/hua2.png"></image>
+
+  <image class="ye1-1" src="https://s1.kagirl.cn/template/pic/qiangwei/hua6.png"></image>
+  <image class="ye1-2" src="https://s2.kagirl.cn/template/pic/qiangwei/hua9.png"></image>
+  <image class="ye1-3" src="https://s1.kagirl.cn/template/pic/qiangwei/hua7.png"></image>
+
+  <view class="ye1-4">
+    <image class="ye1-4_img" src="https://s1.kagirl.cn/template/pic/qiangwei/hua6.png"></image>
+    <image class="ye1-5" src="https://s2.kagirl.cn/template/pic/qiangwei/hua5.png"></image>
+    <view class="hudie4">
+      <image class="chibang1" src="https://s1.kagirl.cn/template/pic/qiangwei/hudie.png"></image>
+      <image class="chibang2" src="https://s1.kagirl.cn/template/pic/qiangwei/hudie.png"></image>
+    </view>
+  </view>
+
+  <view id="titlediv">
+    <image id="yuan" src="https://s2.kagirl.cn/template/pic/qiangwei/yuan.png" style="{{yuan}}"></image>
+    <view id="bian" style="{{bian}}">
+      <view id="bianin">
+        <image class="hua2-1" src="https://s1.kagirl.cn/template/pic/qiangwei/hua7.png"></image>
+        <image class="hua2-2" src="https://s2.kagirl.cn/template/pic/qiangwei/hua9.png"></image>
+        <image class="hua2-3" src="https://s1.kagirl.cn/template/pic/qiangwei/hua2.png"></image>
+        <image class="hua2-4" src="https://s2.kagirl.cn/template/pic/qiangwei/hua4.png"></image>
+      </view>
+    </view>
+    <view id="pagetitle"
+      style="position: absolute; width: 380rpx; height: 300rpx; top: 480rpx; left: 190rpx; overflow: hidden; display: table; {{pagetitle}}">
+      <view id="titlecontent"
+        style="width:380rpx;height:300rpx;vertical-align:middle;display:table-cell;text-align:center;font-size:18px;line-height:32px;color:#5a9336;">
+        好漂亮的滴水玫瑰，送给每一位朋友！</view>
+    </view>
+    <image id="xin" src="https://s1.kagirl.cn/template/pic/qiangwei/xin.png" style="{{xin}}"></image>
+  </view>
+
+  <view class="hudiediv1">
+    <view class="hudie1">
+      <image class="chibang1" src="https://s1.kagirl.cn/template/pic/qiangwei/hudie.png"></image>
+      <image class="chibang2" src="https://s1.kagirl.cn/template/pic/qiangwei/hudie.png"></image>
+    </view>
+  </view>
+
+  <view class="hudiediv2">
+    <view class="hudie2">
+      <image class="chibang1" src="https://s1.kagirl.cn/template/pic/qiangwei/hudie.png"></image>
+      <image class="chibang2" src="https://s1.kagirl.cn/template/pic/qiangwei/hudie.png"></image>
+    </view>
+  </view>
+
+  <image class="huashang" mode="widthFix" src="https://s2.kagirl.cn/template/pic/qiangwei/shang.png"></image>
+  <image class="huaxia" mode="widthFix" style="position:fixed;"
+    src="https://s1.kagirl.cn/template/pic/qiangwei/xia.png"></image>
+
+  <view class="hudiediv3">
+    <view class="hudie3">
+      <image class="chibang1" src="https://s1.kagirl.cn/template/pic/qiangwei/hudie.png"></image>
+      <image class="chibang2" src="https://s1.kagirl.cn/template/pic/qiangwei/hudie.png"></image>
+    </view>
+  </view>
+</view>

happyphoto/qiangwei/qiangwei.wxss

@@ -0,0 +1,920 @@
+/* temp1/qiangwei/qiangwei.wxss */
+#container {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  overflow: hidden
+}
+
+#container>view,
+#container>image {
+  position: absolute
+}
+
+.huashang {
+  width: 100%;
+  top: 0;
+}
+
+.huaxia {
+  width: 100%;
+  position: fixed;
+  bottom: 0
+}
+
+.hua1 {
+  left: -20px;
+  top: 143px;
+  -webkit-transform-origin: 50% 0%;
+  -webkit-animation: hua1 2s linear infinite alternate
+}
+
+.hua1_img {
+  width: 140rpx;
+  height: 280rpx;
+}
+
+@-webkit-keyframes hua1 {
+  from {
+    -webkit-transform: rotate(0)
+  }
+
+  to {
+    -webkit-transform: rotate(-5deg)
+  }
+}
+
+.hua2 {
+  position: absolute;
+  left: -30rpx;
+  top: 200rpx;
+  width: 200rpx;
+  height: 240rpx;
+  -webkit-transform: rotate(-20deg)
+}
+
+.hua3 {
+  left: 60rpx;
+  top: 50rpx;
+  width: 140rpx;
+  height: 280rpx;
+  -webkit-transform-origin: 100% 0%;
+  -webkit-animation: hua3 1s linear infinite alternate
+}
+
+@-webkit-keyframes hua3 {
+  from {
+    -webkit-transform: rotate(0)
+  }
+
+  to {
+    -webkit-transform: rotate(5deg)
+  }
+}
+
+.hua4 {
+  -webkit-transform: rotate(-67deg);
+  top: 0rpx;
+  left: 130rpx;
+  width: 100rpx;
+  height: 140rpx;
+  -webkit-transform-origin: 100% 100%;
+  -webkit-animation: hua4 1s linear infinite alternate
+}
+
+@-webkit-keyframes hua4 {
+  from {
+    -webkit-transform: rotate(-67deg)
+  }
+
+  to {
+    -webkit-transform: rotate(-65deg)
+  }
+}
+
+.ye1 {
+  left: 62rpx;
+  top: 16px;
+  width: 120rpx;
+  height: 120rpx;
+  -webkit-transform-origin: 20% 0%;
+  -webkit-animation: hua3 2s linear infinite alternate
+}
+
+.ye2 {
+  left: 180rpx;
+  top: 0rpx;
+  width: 100rpx;
+  height: 160rpx;
+  -webkit-transform-origin: 20% 0%;
+  -webkit-animation: ye2 1s linear infinite alternate
+}
+
+@-webkit-keyframes ye2 {
+  from {
+    -webkit-transform: rotate(0)
+  }
+
+  to {
+    -webkit-transform: rotate(5deg)
+  }
+}
+
+.ye3 {
+  left: 384rpx;
+  top: 20rpx;
+  width: 120rpx;
+  height: 120rpx;
+  -webkit-transform: scale(-1, 1);
+  -webkit-transform-origin: 20% 0%;
+  -webkit-animation: ye3 1s linear infinite alternate
+}
+
+@-webkit-keyframes ye3 {
+  from {
+    -webkit-transform: scale(-1, 1) rotate(-5deg)
+  }
+
+  to {
+    -webkit-transform: scale(-1, 1) rotate(-10deg)
+  }
+}
+
+.ye4 {
+  left: 504rpx;
+  top: 20rpx;
+  width: 120rpx;
+  height: 120rpx;
+  -webkit-transform: scale(-1, 1);
+  -webkit-transform-origin: 20% 0%;
+  -webkit-animation: ye3 1.5s linear infinite alternate
+}
+
+.hua5 {
+  right: 180rpx;
+  top: -100rpx;
+  width: 160rpx;
+  height: 300rpx;
+  -webkit-transform-origin: 70% 10%;
+  -webkit-animation: ye2 1s linear infinite alternate
+}
+
+.ye5 {
+  right: 100rpx;
+  top: 44rpx;
+  width: 180rpx;
+  height: 180rpx;
+  -webkit-transform-origin: 80% 0%;
+  -webkit-animation: ye2 2s linear infinite alternate
+}
+
+.hua6 {
+  left: 419px;
+  top: 89px;
+  width: 102px;
+  height: 170px;
+  -webkit-transform-origin: 80% 10%;
+  -webkit-animation: hua6 2s linear infinite alternate
+}
+
+@-webkit-keyframes hua6 {
+  from {
+    -webkit-transform: rotate(0)
+  }
+
+  to {
+    -webkit-transform: rotate(10deg)
+  }
+}
+
+.hua7 {
+  position: absolute;
+  left: 17px;
+  top: 102px;
+  width: 70px;
+  height: 117px;
+  -webkit-transform-origin: 80% 20%;
+  -webkit-transform: rotate(-39deg);
+  -webkit-animation: hua7 2s 2s linear infinite alternate
+}
+
+@-webkit-keyframes hua7 {
+  0% {
+    -webkit-transform: rotate(-39deg)
+  }
+
+  50% {
+    -webkit-transform: rotate(-20deg)
+  }
+
+  100% {
+    -webkit-transform: rotate(-10deg)
+  }
+}
+
+.hua1-1 {
+  top: 40rpx;
+  right: -50rpx;
+  width: 190rpx;
+  height: 300rpx;
+  -webkit-animation: hua1-1 7s linear infinite
+}
+
+@-webkit-keyframes hua1-1 {
+  0% {
+    -webkit-transform: translate(-10rpx, 40rpx) rotate(0)
+  }
+
+  20% {
+    -webkit-transform: translate(-12rpx, 44rpx) rotate(9.6deg)
+  }
+
+  40% {
+    -webkit-transform: translate(-14rpx, 48rpx) rotate(-1.8deg)
+  }
+
+  60% {
+    -webkit-transform: translate(-16rpx, 52rpx) rotate(-16.1deg)
+  }
+
+  80% {
+    -webkit-transform: translate(-18rpx, 56rpx) rotate(-16.1deg)
+  }
+
+  100% {
+    -webkit-transform: translate(-20rpx, 60rpx) rotate(0)
+  }
+}
+
+.hua1-2 {
+  top: 150rpx;
+  right: 50rpx;
+  width: 100rpx;
+  height: 200rpx;
+  -webkit-animation: hua1-2 7s linear infinite
+}
+
+@-webkit-keyframes hua1-2 {
+  0% {
+    -webkit-transform: translate(10rpx, 40rpx) scale(.55, .55) rotate(-15.7deg)
+  }
+
+  20% {
+    -webkit-transform: translate(12rpx, 44rpx) scale(.55, .55) rotate(-11.7deg)
+  }
+
+  40% {
+    -webkit-transform: translate(14rpx, 48rpx) scale(.55, .55) rotate(-7.6deg)
+  }
+
+  60% {
+    -webkit-transform: translate(16rpx, 52rpx) scale(.55, .55) rotate(-8.1deg)
+  }
+
+  80% {
+    -webkit-transform: translate(12rpx, 44rpx) scale(.55, .55) rotate(-21.6deg)
+  }
+
+  100% {
+    -webkit-transform: translate(10rpx, 40rpx) scale(.55, .55) rotate(-15.7deg)
+  }
+}
+
+.hua1-3 {
+  top: 200rpx;
+  right: -20rpx;
+  width: 140rpx;
+  height: 300rpx;
+  -webkit-animation: hua1-3 7s linear infinite;
+}
+
+@-webkit-keyframes hua1-3 {
+  0% {
+    -webkit-transform: translate(10rpx, 40rpx) scale(.7) rotate(0)
+  }
+
+  20% {
+    -webkit-transform: translate(12rpx, 44rpx) scale(.7) rotate(-8.8deg)
+  }
+
+  40% {
+    -webkit-transform: translate(14rpx, 48rpx) scale(.7) rotate(23deg)
+  }
+
+  60% {
+    -webkit-transform: translate(14rpx, 48rpx) scale(.7) rotate(26.2deg)
+  }
+
+  80% {
+    -webkit-transform: translate(12rpx, 44rpx) scale(.7) rotate(10.6deg)
+  }
+
+  100% {
+    -webkit-transform: translate(10rpx, 40rpx) scale(.7) rotate(0)
+  }
+}
+
+.hua1-4 {
+  top: 260rpx;
+  right: 50rpx;
+  width: 80rpx;
+  height: 120rpx;
+  -webkit-animation: hua1-4 7s linear infinite;
+}
+
+@-webkit-keyframes hua1-4 {
+  0% {
+    -webkit-transform: translate(10rpx, 40rpx) rotate(16.5deg)
+  }
+
+  20% {
+    -webkit-transform: translate(12rpx, 44rpx) rotate(6.4deg)
+  }
+
+  40% {
+    -webkit-transform: translate(14rpx, 48rpx) rotate(19.5deg)
+  }
+
+  60% {
+    -webkit-transform: translate(14rpx, 48rpx) rotate(37.9deg)
+  }
+
+  80% {
+    -webkit-transform: translate(12rpx, 44rpx) rotate(21deg)
+  }
+
+  100% {
+    -webkit-transform: translate(10rpx, 40rpx) rotate(16.5deg)
+  }
+}
+
+.ye1-1 {
+  bottom: 110px;
+  left: 10rpx;
+  width: 100rpx;
+  height: 300rpx;
+  -webkit-transform: translate(-37px, 0) rotate(18.8deg);
+  -webkit-transform-origin: 50% 100%;
+  -webkit-animation: ye1-1 1.5s linear infinite alternate
+}
+
+@-webkit-keyframes ye1-1 {
+  from {
+    -webkit-transform: translate(-37px, 0) rotate(17deg)
+  }
+
+  to {
+    -webkit-transform: translate(-37px, 0) rotate(20deg)
+  }
+}
+
+.ye1-2 {
+  bottom: 300rpx;
+  left: 20rpx;
+  width: 100rpx;
+  height: 150rpx;
+  -webkit-animation: ye1-2 1.5s linear infinite alternate;
+}
+
+@-webkit-keyframes ye1-2 {
+  from {
+    -webkit-transform: translate(20rpx, 0) rotate(40.7deg)
+  }
+
+  to {
+    -webkit-transform: translate(20rpx, 2px) rotate(42.7deg)
+  }
+}
+
+.ye1-3 {
+  -webkit-transform-origin: 50% 80%;
+  -webkit-animation: ye2 1.5s linear infinite alternate;
+  left: -30rpx;
+  bottom: 20rpx;
+  width: 200rpx;
+  height: 320rpx;
+}
+
+.ye1-4 {
+  width: 120rpx;
+  height: 400rpx;
+  -webkit-transform-origin: 50% 80%;
+  -webkit-animation: ye2 1.5s linear infinite alternate;
+  right: -20rpx;
+  bottom: 59rpx;
+}
+
+.ye1-4_img {
+  width: 100%;
+  height: 100%;
+}
+
+.ye1-5 {
+  position: absolute;
+  left: -23px;
+  top: -29px;
+  width: 90rpx;
+  height: 90rpx;
+}
+
+.chibang1 {
+  position: absolute;
+  -webkit-transform-origin: 100% 50%;
+  left: 0;
+  top: 0;
+  width: 90rpx;
+  height: 90rpx;
+  -webkit-animation: chibang1 .15s linear infinite alternate
+}
+
+.chibang2 {
+  width: 90rpx;
+  height: 90rpx;
+  position: absolute;
+  left: 0;
+  top: 0;
+  -webkit-transform-origin: 100% 50%;
+  -webkit-transform: scale(-1, 1);
+  -webkit-animation: chibang2 .15s linear infinite alternate
+}
+
+.hudie1 {
+  position: absolute;
+  left: 0;
+  top: 0;
+  -webkit-transform: translate(489px, 236px) scale(.3)
+}
+
+@-webkit-keyframes chibang1 {
+  from {
+    -webkit-transform: scale(1, 1)
+  }
+
+  to {
+    -webkit-transform: scale(0, 1)
+  }
+}
+
+@-webkit-keyframes chibang2 {
+  from {
+    -webkit-transform: scale(-1, 1)
+  }
+
+  to {
+    -webkit-transform: scale(0, 1)
+  }
+}
+
+.hudiediv1 {
+  width: 500rpx;
+  height: 500rpx;
+  bottom: 0rpx;
+  left: -100rpx;
+  -webkit-animation: fly1 9s linear infinite
+}
+
+@-webkit-keyframes fly1 {
+  0% {
+    -webkit-transform: rotate(0)
+  }
+
+  80% {
+    -webkit-transform: rotate(-100deg)
+  }
+
+  100% {
+    -webkit-transform: rotate(-100deg)
+  }
+}
+
+.hudiediv2 {
+  width: 130px;
+  height: 130px;
+  top: 621px;
+  left: 263px;
+  -webkit-animation: fly2 8s linear infinite
+}
+
+@-webkit-keyframes fly2 {
+  0% {
+    -webkit-transform: rotate(0)
+  }
+
+  15% {
+    -webkit-transform: rotate(0)
+  }
+
+  100% {
+    -webkit-transform: rotate(360deg)
+  }
+}
+
+.hudie2 {
+  -webkit-transform: translate(-9px, 110px) scale(.3) rotate(-90deg)
+}
+
+.hudiediv3 {
+  width: 740px;
+  height: 740px;
+  left: -120px;
+  top: 100px;
+  -webkit-animation: fly3 8s 2s linear infinite
+}
+
+@-webkit-keyframes fly3 {
+  0% {
+    -webkit-transform: rotate(0)
+  }
+
+  100% {
+    -webkit-transform: rotate(-90deg)
+  }
+}
+
+.hudie3 {
+  -webkit-transform: translate(0, 740px) scale(.3) rotate(90deg)
+}
+
+.hudie4 {
+  -webkit-transform: scale(.3) rotate(27deg);
+  position: absolute;
+  top: -30px;
+  left: -13px
+}
+
+#titlediv {
+  width: 100%;
+  height: 815rpx;
+  left: 0;
+  position: absolute;
+}
+
+#xin {
+  left: 300rpx;
+  top: 620rpx;
+  position: absolute;
+  width: 150rpx;
+  height: 150rpx;
+  -webkit-transform: scale(.5);
+}
+
+@-webkit-keyframes xin {
+  0% {
+    -webkit-transform: scale(.5);
+    opacity: 1
+  }
+
+  20% {
+    -webkit-transform: scale(.5);
+    opacity: 1
+  }
+
+  40% {
+    -webkit-transform: scale(1);
+    opacity: 1
+  }
+
+  55% {
+    -webkit-transform: scale(1);
+    opacity: 1
+  }
+
+  75% {
+    -webkit-transform: scale(.95);
+    opacity: 1
+  }
+
+  100% {
+    -webkit-transform: scale(.2);
+    opacity: 0
+  }
+}
+
+#bian,
+#yuan {
+  left: 160rpx;
+  top: 400rpx;
+  position: absolute;
+  width: 430rpx;
+  height: 430rpx
+}
+
+#bianin {
+  position: absolute;
+  width: 460rpx;
+  height: 460rpx;
+  -webkit-animation: rotating 25s linear infinite
+}
+
+.hua2-1 {
+  position: absolute;
+  left: -20rpx;
+  top: -13rpx;
+  width: 200rpx;
+  height: 340rpx;
+  -webkit-transform: rotate(6deg);
+}
+
+.hua2-2 {
+  position: absolute;
+  left: 64px;
+  top: -25px;
+  -webkit-transform: rotate(32deg);
+  width: 140rpx;
+  height: 140rpx;
+}
+
+.hua2-3 {
+  position: absolute;
+  right: 180rpx;
+  bottom: -20rpx;
+  -webkit-transform: rotate(43deg);
+  width: 140rpx;
+  height: 140rpx;
+}
+
+.hua2-4 {
+  position: absolute;
+  right: -20rpx;
+  bottom: -13rpx;
+  width: 200rpx;
+  height: 340rpx;
+  -webkit-transform: rotate(0deg);
+}
+
+#pagetitle,
+#yuan {
+  opacity: 0;
+  -webkit-transform: scale(.25)
+}
+
+@-webkit-keyframes yuan {
+  from {
+    -webkit-transform: scale(.25);
+    opacity: 0
+  }
+
+  to {
+    -webkit-transform: scale(1);
+    opacity: 1
+  }
+}
+
+@-webkit-keyframes rotating {
+  from {
+    -webkit-transform: rotate(0)
+  }
+
+  to {
+    -webkit-transform: rotate(-360deg)
+  }
+}
+
+#bian {
+  opacity: 0
+}
+
+@-webkit-keyframes bian {
+  from {
+    -webkit-transform: scale(.2) rotate(0);
+    opacity: 0
+  }
+
+  to {
+    -webkit-transform: scale(1) rotate(-90deg);
+    opacity: 1
+  }
+}
+
+@-webkit-keyframes yuan-out {
+  from {
+    -webkit-transform: scale(1);
+    opacity: 1
+  }
+
+  to {
+    -webkit-transform: scale(2);
+    opacity: 0
+  }
+}
+
+@-webkit-keyframes bian-out {
+  from {
+    -webkit-transform: scale(1) rotate(-90deg);
+    opacity: 1
+  }
+
+  to {
+    -webkit-transform: scale(2) rotate(-90deg);
+    opacity: 0
+  }
+}
+
+@-webkit-keyframes div1-in {
+  0% {
+    -webkit-transform: scale(1);
+    opacity: 0
+  }
+
+  20% {
+    -webkit-transform: scale(1.04);
+    opacity: 1
+  }
+
+  80% {
+    -webkit-transform: scale(1.16);
+    opacity: 1
+  }
+
+  100% {
+    -webkit-transform: scale(1.2);
+    opacity: 0
+  }
+}
+
+@-webkit-keyframes div11h-in {
+  0% {
+    -webkit-transform: scale(2);
+    opacity: 0
+  }
+
+  20% {
+    -webkit-transform: scale(2.04);
+    opacity: .2
+  }
+
+  80% {
+    -webkit-transform: scale(2.16);
+    opacity: .2
+  }
+
+  100% {
+    -webkit-transform: scale(2.2);
+    opacity: 0
+  }
+}
+
+#div1,
+#div2,
+#div3,
+#div4 {
+  top: 1%;
+  width: 100%;
+  height: 70%;
+  opacity: 0
+}
+
+#div1-1,
+#div2-1,
+#div3-1,
+#div4-1 {
+  top: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0
+}
+
+@-webkit-keyframes div2h-in {
+  0% {
+    -webkit-transform: translate(65px, 0) scale(1.2);
+    opacity: 0
+  }
+
+  20% {
+    -webkit-transform: translate(45px, 0) scale(1.2);
+    opacity: 1
+  }
+
+  80% {
+    -webkit-transform: translate(-45px, 0) scale(1.2);
+    opacity: 1
+  }
+
+  100% {
+    -webkit-transform: translate(-65px, 0) scale(1.2);
+    opacity: 0
+  }
+}
+
+@-webkit-keyframes div21h-in {
+  0% {
+    -webkit-transform: translate(-75px, 0) scale(2);
+    opacity: 0
+  }
+
+  20% {
+    -webkit-transform: translate(-45px, 0) scale(2);
+    opacity: .3
+  }
+
+  80% {
+    -webkit-transform: translate(45px, 0) scale(2);
+    opacity: .3
+  }
+
+  100% {
+    -webkit-transform: translate(75px, 0) scale(2);
+    opacity: 0
+  }
+}
+
+@-webkit-keyframes div4h-in {
+  0% {
+    -webkit-transform: translate(-65px, 0) scale(1.2);
+    opacity: 0
+  }
+
+  20% {
+    -webkit-transform: translate(-45px, 0) scale(1.2);
+    opacity: 1
+  }
+
+  80% {
+    -webkit-transform: translate(45px, 0) scale(1.2);
+    opacity: 1
+  }
+
+  100% {
+    -webkit-transform: translate(65px, 0) scale(1.2);
+    opacity: 0
+  }
+}
+
+@-webkit-keyframes div41h-in {
+  0% {
+    -webkit-transform: translate(75px, 0) scale(2);
+    opacity: 0
+  }
+
+  20% {
+    -webkit-transform: translate(45px, 0) scale(2);
+    opacity: .3
+  }
+
+  80% {
+    -webkit-transform: translate(-45px, 0) scale(2);
+    opacity: .3
+  }
+
+  100% {
+    -webkit-transform: translate(-75px, 0) scale(2);
+    opacity: 0
+  }
+}
+
+.myword {
+  width: 400px;
+  font-size: 25px;
+  color: #fff;
+  line-height: 25px;
+  text-align: center;
+  position: absolute;
+  top: 604px;
+  left: 50px;
+  text-shadow: 0 0 2px #000;
+  opacity: 0
+}
+
+@-webkit-keyframes fadein {
+  from {
+    opacity: 0
+  }
+
+  to {
+    opacity: 1
+  }
+}
+
+@-webkit-keyframes fadeout {
+  from {
+    opacity: 1
+  }
+
+  to {
+    opacity: 0
+  }
+}
+
+#bg {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-image: url("https://s2.kagirl.cn/template/pic/qiangwei/bg.jpg");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center
+}
+
+#div0 {
+  width: 100%;
+  height: 815px;
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%)
+}
+
+#div0>view,
+#div0>image {
+  position: absolute
+}

happyphoto/qingren17/qingren17.js

@@ -0,0 +1,255 @@
+// temp1/qingren17/qingren17.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    // 背景音乐
+    bgmusic: {
+      music: null,
+      playing: false
+    },
+    ads: null,
+    hasLoadAdConfig: false,
+    photoIndex: 0,
+    templateName: 'qingren17',
+    imageURLList: [],
+    examplePhotos: [
+      'ac_339540209r8579.jpeg',
+      'ac_411483767159.jpeg',
+      'ac_411483855709.jpeg',
+      'ac_411483926425.jpeg',
+      'ac_411484209167.jpeg',
+      'ac_411484399339.jpeg',
+      'ac_411484447890.jpeg',
+      'ac_411484598544.jpeg',
+      'ac_411484751011.jpeg',
+      'ac_411484971571.jpeg',
+    ],
+    imageWidths: [],
+    imageHeights: [],
+    imageStyles: [],
+    div1Image: '',
+    div2Image: '',
+    div3Image: '',
+    div4Image: '',
+
+    div1Style: '',
+    div2Style: '',
+    div3Style: '',
+    div4Style: '',
+
+    titlebg: '',
+    biaoti: '',
+    titlecontent: '',
+
+    tbgxin0: '',
+    tbgxin1: '',
+    tbgxin2: '',
+    tbgxin3: '',
+    tbgxin4: '',
+    tbgxin5: '',
+    tbgxin6: '',
+    tbgxin7: '',
+    tbgxin8: '',
+    tbgxin9: '',
+    tbgxin10: '',
+    tbgxin11: '',
+    tbgxin12: '',
+    tbgxin13: '',
+    tbgxin14: '',
+    tbgxin15: '',
+
+    timeouts: []
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+    this.setData({
+      imageURLList: this.data.examplePhotos.map(item => {
+        return `https://novel-video.hongdes.cn/kawaalbum/${this.data.templateName}/example/${item}`
+      })
+    })
+    this.initAnimation()
+  },
+
+  initAnimation() {
+    const _this = this
+    this.setData({
+      photoIndex: 0
+    })
+    _this.setData({
+      titlebg: 'animation: titlebgin 3s linear both;',
+      biaoti: 'animation: titlewaiin 3s 3s linear both',
+      titlecontent: 'animation: titleneiin 3s 3s linear both'
+    })
+
+    _this.data.timeouts.push(setTimeout(function () {
+      _this.bgxin(0)
+    }, 3000))
+
+    _this.data.timeouts.push(setTimeout(function () {
+      _this.setData({
+        biaoti: 'animation: titlewaiout 3s linear both;',
+        titlecontent: 'animation: titleneiout 3s linear both;',
+        titlebg: 'animation: titlebgout 1s 3s linear both;',
+      })
+      _this.bgxinout(0)
+    }, 5000))
+
+    _this.data.timeouts.push(setTimeout(function () {
+      _this.showPage()
+    }, 8500))
+  },
+
+  showPage() {
+    const _this = this
+    if (this.data.photoIndex === this.data.examplePhotos.length - 1) {
+      // 图片轮询完重新开始
+      this.setData({
+        'photoIndex': 0
+      })
+    }
+    const pageIndex = this.data.photoIndex % 5 + 1
+    const imageURL = `https://novel-video.hongdes.cn/kawaalbum/${this.data.templateName}/example/${this.data.examplePhotos[this.data.photoIndex]}`
+    wx.getImageInfo({
+      src: imageURL,
+      success(res) {
+        const imageWidth = res.width
+        const imageHeight = res.height
+        let blockStyle = ''
+        if (imageWidth > imageHeight) {
+          //  横版图片
+          blockStyle = 'top:20%;'
+        } else {
+          // 竖版图片
+          blockStyle = 'top:10%;'
+        }
+        let nextPageIndex = 0
+        if (pageIndex === 1) {
+          nextPageIndex = 5
+        } else if (pageIndex === 5) {
+          nextPageIndex = 1
+        } else {
+          nextPageIndex = pageIndex + 1
+        }
+
+        _this.setData({
+          [`div${nextPageIndex}Style`]: '',
+          [`div${pageIndex}Image`]: imageURL,
+          [`div${pageIndex}Style`]: `${blockStyle}animation: div${pageIndex}_in 8s ease both`,
+        })
+        _this.data.timeouts.push(setTimeout(() => {
+          _this.setData({
+            'photoIndex': _this.data.photoIndex + 1
+          })
+          _this.showPage()
+        }, 8000));
+      },
+      fail(err) {
+        console.error(err);
+      }
+    })
+  },
+
+  bgxin(t) {
+    const _this = this
+    _this.data.timeouts.push(setTimeout(() => {
+      _this.setData({
+        [`tbgxin${t}`]: "display:block",
+        [`tbgxin${t + 8}`]: "display:block"
+      })
+      if (++t !== 8) {
+        _this.bgxin(t)
+      }
+    }, 300));
+  },
+
+  bgxinout(t) {
+    const _this = this
+    _this.data.timeouts.push(setTimeout(() => {
+      _this.setData({
+        [`tbgxin${t}`]: "display:none",
+        [`tbgxin${t + 8}`]: "display:none"
+      })
+      if (++t !== 8) {
+        _this.bgxinout(t)
+      }
+    }, 300));
+  },
+
+  /**
+ * 播放音乐
+ */
+  initBgMusic() {
+    let _this = this
+    if (!app.globalData.audioContext) {
+      app.globalData.audioContext = wx.createInnerAudioContext()
+    }
+    // obeyMuteSwitch（仅在 iOS 生效）是否遵循静音开关，设置为 false 之后，即使是在静音模式下，也能播放声音
+    wx.setInnerAudioOption({
+      obeyMuteSwitch: false
+    })
+    // 设置音乐循环
+    app.globalData.audioContext.loop = true
+    // 监听音乐播放
+    app.globalData.audioContext.onPlay(() => {
+      _this.setData({
+        'bgmusic.playing': true
+      })
+      console.log('music play', _this.data.bgmusic.playing)
+    })
+    // 监听音乐暂停
+    app.globalData.audioContext.onPause(() => {
+      console.log('music pause')
+      _this.setData({
+        'bgmusic.playing': false
+      })
+    })
+    app.globalData.audioContext.src = this.data.bgmusic.music.url
+    app.globalData.audioContext.play()
+  },
+
+  /**
+   * 音乐播放按钮
+   */
+  musicPlayTap() {
+    app.globalData.audioContext.paused ? app.globalData.audioContext.play() : app.globalData.audioContext.pause()
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+    this.clearTimeoutTask()
+  },
+
+  // 清除定时任务
+  clearTimeoutTask() {
+    this.data.timeouts.forEach(timeout => clearTimeout(timeout));
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

happyphoto/qingren17/qingren17.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

happyphoto/qingren17/qingren17.wxml

@@ -0,0 +1,74 @@
+<!--temp1/qingren17/qingren17.wxml-->
+<view id="container">
+
+  <navigator open-type="navigateBack" style="position: fixed;top: 60rpx; left: 30rpx;color:#ffffff;z-index: 999">
+    <image src="/assets/images/icons/icon-back-white.png" style="width: 50rpx;height: 50rpx;"></image>
+  </navigator>
+  <view id="bg"></view>
+
+  <view id="pagetitle">
+    <image id="titlebg" src="https://s1.kagirl.cn/template/pic/qingren17/titlebg.png" style="{{titlebg}}">
+    </image>
+    <image id="tbgxin0" src="https://s2.kagirl.cn/template/pic/qingren17/guang031.png" style="{{tbgxin0}}"></image>
+    <image id="tbgxin1" src="https://s2.kagirl.cn/template/pic/qingren17/guang031.png" style="{{tbgxin1}}"></image>
+    <image id="tbgxin2" src="https://s2.kagirl.cn/template/pic/qingren17/guang031.png" style="{{tbgxin2}}"></image>
+    <image id="tbgxin3" src="https://s2.kagirl.cn/template/pic/qingren17/guang031.png" style="{{tbgxin3}}"></image>
+    <image id="tbgxin4" src="https://s2.kagirl.cn/template/pic/qingren17/guang031.png" style="{{tbgxin4}}"></image>
+    <image id="tbgxin5" src="https://s2.kagirl.cn/template/pic/qingren17/guang031.png" style="{{tbgxin5}}"></image>
+    <image id="tbgxin6" src="https://s2.kagirl.cn/template/pic/qingren17/guang031.png" style="{{tbgxin6}}"></image>
+    <image id="tbgxin7" src="https://s2.kagirl.cn/template/pic/qingren17/guang031.png" style="{{tbgxin7}}"></image>
+    <image id="tbgxin8" src="https://s2.kagirl.cn/template/pic/qingren17/guang031.png" style="{{tbgxin8}}"></image>
+    <image id="tbgxin9" src="https://s2.kagirl.cn/template/pic/qingren17/guang031.png" style="{{tbgxin9}}"></image>
+    <image id="tbgxin10" src="https://s2.kagirl.cn/template/pic/qingren17/guang031.png" style="{{tbgxin10}}"></image>
+    <image id="tbgxin11" src="https://s2.kagirl.cn/template/pic/qingren17/guang031.png" style="{{tbgxin11}}"></image>
+    <image id="tbgxin12" src="https://s2.kagirl.cn/template/pic/qingren17/guang031.png" style="{{tbgxin12}}"></image>
+    <image id="tbgxin13" src="https://s2.kagirl.cn/template/pic/qingren17/guang031.png" style="{{tbgxin13}}"></image>
+    <image id="tbgxin14" src="https://s2.kagirl.cn/template/pic/qingren17/guang031.png" style="{{tbgxin14}}"></image>
+    <image id="tbgxin15" src="https://s2.kagirl.cn/template/pic/qingren17/guang031.png" style="{{tbgxin15}}"></image>
+
+    <view id="biaoti" style="{{biaoti}}">
+      <view id="titlecontent"
+        style="width: 287px; height: 500px; font-size: 32px; line-height: 50px; color: rgb(255, 255, 255); position: absolute; top: 1001rpx; left: 106rpx; display: flex; justify-content: center; align-items: center; text-align: center; font-weight: 900; text-shadow: rgb(255, 255, 255) 0px 0px 12px; {{titlecontent}};">
+        <view id="tcontent">谁打开，谁幸福~</view>
+      </view>
+    </view>
+
+  </view>
+
+  <image class="div" id="div1" mode="widthFix" src="{{div1Image}}" style="{{div1Style}}"></image>
+  <image class="div" id="div2" mode="widthFix" src="{{div2Image}}" style="{{div2Style}}"></image>
+  <image class="div" id="div3" mode="widthFix" src="{{div3Image}}" style="{{div3Style}}"></image>
+  <image class="div" id="div4" mode="widthFix" src="{{div4Image}}" style="{{div4Style}}"></image>
+
+  <image id="shang" mode="widthFix" src="https://s1.kagirl.cn/template/pic/qingren17/shang.png"></image>
+  <image id="huaban4" src="https://s2.kagirl.cn/template/pic/qingren17/huaban2.png"></image>
+  <image id="dibu" mode="widthFix" src="https://s1.kagirl.cn/template/pic/qingren17/love.png"></image>
+  <image id="lovedian" mode="widthFix" src="https://s2.kagirl.cn/template/pic/qingren17/lovedian.png"></image>
+  <image id="lovedian1" mode="widthFix" src="https://s1.kagirl.cn/template/pic/qingren17/lovedian2.png"></image>
+  <image id="bgxin0" src="https://s2.kagirl.cn/template/pic/qingren17/ht01.png"></image>
+  <image id="bgxin1" src="https://s2.kagirl.cn/template/pic/qingren17/ht01.png"></image>
+  <image id="bgxin2" src="https://s2.kagirl.cn/template/pic/qingren17/ht01.png"></image>
+  <image id="bgxin3" src="https://s2.kagirl.cn/template/pic/qingren17/ht01.png"></image>
+  <image id="bgxin4" src="https://s1.kagirl.cn/template/pic/qingren17/ht04.png"></image>
+  <image id="bgxin5" src="https://s1.kagirl.cn/template/pic/qingren17/ht04.png"></image>
+  <image id="huaban5" src="https://s2.kagirl.cn/template/pic/qingren17/huaban2.png"></image>
+  <image id="shangxin1" src="https://s2.kagirl.cn/template/pic/qingren17/guang031.png"></image>
+  <image id="shangxin2" src="https://s2.kagirl.cn/template/pic/qingren17/guang031.png"></image>
+  <image id="shangxin3" src="https://s2.kagirl.cn/template/pic/qingren17/guang031.png"></image>
+  <image id="shangxin4" src="https://s2.kagirl.cn/template/pic/qingren17/guang031.png"></image>
+  <image id="shangxin5" src="https://s2.kagirl.cn/template/pic/qingren17/guang031.png"></image>
+  <image id="huaban1" src="https://s2.kagirl.cn/template/pic/qingren17/huaban.png"></image>
+  <image id="huaban" src="https://s2.kagirl.cn/template/pic/qingren17/huaban.png"></image>
+  <image id="huaban2" src="https://s2.kagirl.cn/template/pic/qingren17/huaban.png"></image>
+  <image id="huaban3" src="https://s2.kagirl.cn/template/pic/qingren17/huaban.png"></image>
+  <image id="xiazhi3" src="https://s1.kagirl.cn/template/pic/qingren17/huabanshuimian.png"></image>
+  <image id="xiazhi1" src="https://s2.kagirl.cn/template/pic/qingren17/zhichuan.png"></image>
+  <image id="xiazhi2" src="https://s2.kagirl.cn/template/pic/qingren17/zhichuan.png"></image>
+  <image id="guang01" src="https://s1.kagirl.cn/template/pic/qingren17/guang01.png"></image>
+  <image id="guang02" src="https://s2.kagirl.cn/template/pic/qingren17/guang02.png"></image>
+  <image id="guang021" src="https://s1.kagirl.cn/template/pic/qingren17/guang01.png"></image>
+  <image id="love" src="https://s1.kagirl.cn/template/pic/qingren17/LOVE2.png"></image>
+  <image id="love1" src="https://s1.kagirl.cn/template/pic/qingren17/LOVE2.png"></image>
+  <image id="aixin" src="https://s2.kagirl.cn/template/pic/qingren17/xin.png"></image>
+  <image id="aixin1" src="https://s2.kagirl.cn/template/pic/qingren17/xin.png"></image>
+</view>

happyphoto/qingren17/qingren17.wxss

@@ -0,0 +1,919 @@
+/* temp1/qingren17/qingren17.wxss */
+#container {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  overflow: hidden
+}
+
+#container>view,
+#container>image {
+  position: absolute
+}
+
+#yunbiao1>image,
+#yunbiao>image {
+  position: absolute
+}
+
+.div {
+  border: 8px solid #fff;
+  opacity: 0;
+  left: 5%;
+}
+
+.wordspan {
+  width: 50%;
+  left: 25%;
+  position: absolute;
+  color: #fff;
+  font-size: 25px;
+  text-align: center;
+  text-shadow: 1px 1px 2px #000;
+  font-weight: 700
+}
+
+#dibu {
+  bottom: 0;
+  width: 100%;
+}
+
+#shangxin1 {
+  top: -50rpx;
+  left: -20rpx;
+  width: 160rpx;
+  height: 220rpx;
+  -webkit-transform: scale(.4);
+  -webkit-animation: xinshan 1s alternate linear infinite;
+}
+
+#shangxin2 {
+  top: -80rpx;
+  left: 160rpx;
+  width: 160rpx;
+  height: 220rpx;
+  -webkit-transform: scale(.4);
+  -webkit-animation: xinshan 1s 1s alternate linear infinite;
+}
+
+#shangxin3 {
+  top: -50rpx;
+  left: 280rpx;
+  width: 160rpx;
+  height: 220rpx;
+  -webkit-transform: scale(.4);
+  -webkit-animation: xinshan1 3s .5s alternate linear infinite both;
+}
+
+#shangxin4 {
+  top: -70rpx;
+  left: 440rpx;
+  width: 160rpx;
+  height: 220rpx;
+  -webkit-transform: scale(.3);
+  -webkit-animation: xinshan2 3s 1s alternate linear infinite both;
+}
+
+#shangxin5 {
+  top: -160rpx;
+  left: 500rpx;
+  width: 300rpx;
+  height: 400rpx;
+  -webkit-transform: scale(.3);
+  -webkit-animation: xinshan2 3s 1.5s alternate linear infinite both
+}
+
+@-webkit-keyframes xinshan {
+  from {
+    opacity: 1
+  }
+
+  to {
+    opacity: 0
+  }
+}
+
+@-webkit-keyframes xinshan1 {
+  from {
+    -webkit-transform: translate(0, -4px) scale(.4)
+  }
+
+  to {
+    -webkit-transform: translate(0, 4px) scale(.3)
+  }
+}
+
+@-webkit-keyframes xinshan2 {
+  from {
+    -webkit-transform: translate(0, -4px) scale(.3)
+  }
+
+  to {
+    -webkit-transform: translate(0, 4px) scale(0)
+  }
+}
+
+#xiazhi1 {
+  bottom: 50px;
+  width: 140rpx;
+  height: 110rpx;
+  -webkit-animation: xiabuhuadong 20s 3s linear infinite both;
+}
+
+#xiazhi2 {
+  bottom: 20px;
+  width: 160rpx;
+  height: 120rpx;
+  -webkit-animation: xiabuhuadong1 24s 0s linear infinite both;
+}
+
+#xiazhi3 {
+  bottom: 80px;
+  width: 180rpx;
+  height: 48rpx;
+  -webkit-animation: xiabuhuadong 14s 6s linear infinite both
+}
+
+@-webkit-keyframes xiabuhuadong {
+  from {
+    -webkit-transform: translate(-100px, 0)
+  }
+
+  to {
+    -webkit-transform: translate(600px, 0)
+  }
+}
+
+@-webkit-keyframes xiabuhuadongshan {
+  0% {
+    -webkit-transform: translate(-100px, 0) scale(1.2)
+  }
+
+  10% {
+    -webkit-transform: translate(-30px, 0) scale(.3)
+  }
+
+  20% {
+    -webkit-transform: translate(40px, 0) scale(1.2)
+  }
+
+  30% {
+    -webkit-transform: translate(110px, 0) scale(.3)
+  }
+
+  40% {
+    -webkit-transform: translate(180px, 0) scale(1.2)
+  }
+
+  50% {
+    -webkit-transform: translate(250px, 0) scale(.3)
+  }
+
+  60% {
+    -webkit-transform: translate(320px, 0) scale(1.2)
+  }
+
+  70% {
+    -webkit-transform: translate(390px, 0) scale(.3)
+  }
+
+  80% {
+    -webkit-transform: translate(460px, 0) scale(1.2)
+  }
+
+  90% {
+    -webkit-transform: translate(530px, 0) scale(.3)
+  }
+
+  100% {
+    -webkit-transform: translate(600px, 0) scale(1.2)
+  }
+}
+
+@-webkit-keyframes xiabuhuadong1 {
+  from {
+    -webkit-transform: translate(-100px, 0) scale(1.2)
+  }
+
+  to {
+    -webkit-transform: translate(600px, 0) scale(1.2)
+  }
+}
+
+#guang02 {
+  bottom: 39px;
+  left: -31px;
+  width: 288rpx;
+  height: 20rpx;
+  -webkit-animation: xiabuhuadong 24s 0s linear infinite both
+}
+
+#guang01 {
+  bottom: 69px;
+  left: 38px;
+  width: 180rpx;
+  height: 32rpx;
+  -webkit-animation: xiabuhuadongshan 20s 3s linear infinite both;
+}
+
+#guang021 {
+  bottom: 39px;
+  left: 54px;
+  width: 180rpx;
+  height: 32rpx;
+  -webkit-animation: xiabuhuadongshan 24s 0s linear infinite both;
+}
+
+#huaban {
+  bottom: 7px;
+  left: 50px;
+  width: 312rpx;
+  height: 320rpx;
+  -webkit-transform: rotateX(75deg) rotateY(2.5deg) scale(.6);
+  -webkit-animation: huaban 28s linear both infinite
+}
+
+#huaban1 {
+  bottom: -3px;
+  left: 45px;
+  width: 312rpx;
+  height: 320rpx;
+  opacity: .6;
+  -webkit-transform: rotateX(75deg) rotateY(-2.5deg) scale(.6);
+  -webkit-animation: huaban1 28s linear both infinite;
+}
+
+#huaban2 {
+  bottom: -10px;
+  left: 170px;
+  width: 312rpx;
+  height: 320rpx;
+  -webkit-transform: rotateX(75deg) rotateY(2.5deg) scale(.6);
+  -webkit-animation: huaban 32s 2s linear both infinite
+}
+
+#huaban3 {
+  bottom: -20px;
+  left: 165px;
+  opacity: .6;
+  width: 312rpx;
+  height: 320rpx;
+  -webkit-transform: rotateX(75deg) rotateY(-2.5deg) scale(.6);
+  -webkit-animation: huaban1 32s 2s linear both infinite
+}
+
+#huaban4 {
+  top: -100px;
+  left: 100px;
+  width: 200rpx;
+  height: 200rpx;
+  -webkit-animation: huaban4 20s linear infinite both
+}
+
+#huaban5 {
+  top: -100px;
+  left: 300px;
+  -webkit-animation: huaban4 25s 5s linear infinite both
+}
+
+@-webkit-keyframes huaban4 {
+  from {
+    -webkit-transform: translate(0, 0) rotate(0) scale(.5)
+  }
+
+  to {
+    -webkit-transform: translate(150px, 900px) rotate(270deg) scale(.5)
+  }
+}
+
+@-webkit-keyframes huaban {
+  0% {
+    -webkit-transform: translate(-100px, -1000px) rotateX(-400deg) rotateY(2.5deg) scale(.6)
+  }
+
+  50% {
+    -webkit-transform: translate(0, 0) rotateX(75deg) rotateY(2.5deg) scale(.6);
+    -webkit-animation-timing-function: ease-out
+  }
+
+  100% {
+    -webkit-transform: translate(600px, 0) rotateX(75deg) rotateY(2.5deg) scale(.6)
+  }
+}
+
+@-webkit-keyframes huaban1 {
+  0% {
+    -webkit-transform: translate(100px, 1000px) rotateX(-400deg) rotateY(-2.5deg) scale(.6)
+  }
+
+  50% {
+    -webkit-transform: translate(0, 0) rotateX(75deg) rotateY(-2.5deg) scale(.6);
+    -webkit-animation-timing-function: ease-out
+  }
+
+  100% {
+    -webkit-transform: translate(600px, 0) rotateX(75deg) rotateY(-2.5deg) scale(.6)
+  }
+}
+
+#love {
+  top: 0;
+  left: 10px;
+  width: 184rpx;
+  height: 70rpx;
+  -webkit-animation: filldown 20s linear infinite both;
+}
+
+#love1 {
+  top: 0;
+  left: 394px;
+  width: 184rpx;
+  height: 70rpx;
+  -webkit-animation: filldown 15s 3s linear infinite both;
+}
+
+#aixin {
+  top: -50px;
+  left: 20px;
+  width: 120rpx;
+  height: 116rpx;
+  -webkit-animation: filldown 17s linear infinite both;
+}
+
+#aixin1 {
+  top: -50px;
+  left: 394px;
+  width: 120rpx;
+  height: 116rpx;
+  -webkit-animation: filldown 18s 3s linear infinite both
+}
+
+@-webkit-keyframes filldown {
+  from {
+    -webkit-transform: translate(0, -200px)
+  }
+
+  to {
+    -webkit-transform: translate(0, 100vh)
+  }
+}
+
+#lovedian {
+  left: -4px;
+  bottom: 300rpx;
+  width: 100%;
+  -webkit-animation: lovedianfade .5s alternate infinite linear both;
+}
+
+#lovedian1 {
+  left: -4px;
+  bottom: 300rpx;
+  width: 100%;
+  -webkit-animation: lovedianfade .5s .5s alternate infinite linear both;
+}
+
+@-webkit-keyframes lovedianfade {
+  from {
+    opacity: 1
+  }
+
+  to {
+    opacity: 0
+  }
+}
+
+#bgxin {
+  top: 188px;
+  left: 325px;
+  -webkit-animation: bgxin 1.2s .4s alternate infinite linear both
+}
+
+@-webkit-keyframes bgxin {
+  from {
+    opacity: .6
+  }
+
+  to {
+    opacity: 0
+  }
+}
+
+#bgxin0 {
+  width: 120rpx;
+  height: 100rpx;
+  top: 0;
+  left: 0;
+}
+
+#bgxin1 {
+  top: 350rpx;
+  left: 200rpx;
+  width: 120rpx;
+  height: 100rpx;
+  -webkit-animation: bgxin2 2s alternate infinite linear both
+}
+
+@-webkit-keyframes bgxin1 {
+  12.5% {
+    opacity: .6
+  }
+
+  25% {
+    opacity: 0
+  }
+
+  37.5% {
+    opacity: .6
+  }
+
+  50% {
+    opacity: 0
+  }
+
+  62.5% {
+    opacity: .6
+  }
+
+  75% {
+    opacity: 0
+  }
+
+  87.5% {
+    opacity: .6
+  }
+
+  100% {
+    opacity: 0
+  }
+}
+
+#bgxin2 {
+  top: 550rpx;
+  left: 60rpx;
+  width: 120rpx;
+  height: 100rpx;
+  -webkit-animation: bgxin1 3s alternate infinite linear both;
+}
+
+@-webkit-keyframes bgxin2 {
+  12.5% {
+    opacity: .3
+  }
+
+  25% {
+    opacity: 0
+  }
+
+  37.5% {
+    opacity: .3
+  }
+
+  50% {
+    opacity: 0
+  }
+
+  62.5% {
+    opacity: .3
+  }
+
+  100% {
+    opacity: 0
+  }
+}
+
+#bgxin3 {
+  top: 400rpx;
+  right: 147rpx;
+  width: 120rpx;
+  height: 100rpx;
+  -webkit-animation: bgxin3 1s alternate infinite linear both
+}
+
+@-webkit-keyframes bgxin3 {
+  from {
+    opacity: .3
+  }
+
+  to {
+    opacity: 0
+  }
+}
+
+#bgxin4 {
+  top: 370rpx;
+  right: 100rpx;
+  width: 120rpx;
+  height: 100rpx;
+  -webkit-animation: bgxin4 1s alternate infinite linear both;
+}
+
+@-webkit-keyframes bgxin4 {
+  from {
+    opacity: .3
+  }
+
+  to {
+    opacity: 0
+  }
+}
+
+#bgxin5 {
+  top: 600rpx;
+  left: 300rpx;
+  width: 120rpx;
+  height: 100rpx;
+  -webkit-animation: bgxin5 1s alternate infinite linear both
+}
+
+@-webkit-keyframes bgxin5 {
+  from {
+    opacity: .2
+  }
+
+  to {
+    opacity: 0
+  }
+}
+
+#titlebg {
+  left: 80rpx;
+  top: 1000px;
+  position: absolute;
+  width: 600rpx;
+  height: 1000rpx;
+}
+
+#biaoti {
+  width: 100vw;
+  height: 500px;
+  top: -402px;
+  position: absolute;
+  overflow: hidden;
+}
+
+@-webkit-keyframes titlewaiin {
+  from {
+    -webkit-transform: translate(0, 0)
+  }
+
+  to {
+    -webkit-transform: translate(0, 500px)
+  }
+}
+
+@-webkit-keyframes titleneiin {
+  from {
+    -webkit-transform: translate(0, 0)
+  }
+
+  to {
+    -webkit-transform: translate(0, -500px)
+  }
+}
+
+@-webkit-keyframes titlebgin {
+  from {
+    -webkit-transform: translate(0, 0)
+  }
+
+  to {
+    -webkit-transform: translate(0, -1000px)
+  }
+}
+
+@-webkit-keyframes titlewaiout {
+  from {
+    -webkit-transform: translate(0, 500px)
+  }
+
+  to {
+    -webkit-transform: translate(0, 1000px)
+  }
+}
+
+@-webkit-keyframes titleneiout {
+  from {
+    -webkit-transform: translate(0, -500px)
+  }
+
+  to {
+    -webkit-transform: translate(0, -1400px)
+  }
+}
+
+@-webkit-keyframes titlebgout {
+  from {
+    -webkit-transform: translate(0, -1000px);
+    opacity: 1
+  }
+
+  to {
+    -webkit-transform: translate(0, -1000px);
+    opacity: 0
+  }
+}
+
+#tbgxin0 {
+  position: absolute;
+  top: 6px;
+  left: 10rpx;
+  width: 180rpx;
+  height: 260rpx;
+  -webkit-transform: scale(.6);
+  z-index: 100;
+  display: none;
+}
+
+#tbgxin1 {
+  position: absolute;
+  top: 68.5px;
+  left: 10rpx;
+  width: 180rpx;
+  height: 260rpx;
+  -webkit-transform: scale(.6);
+  z-index: 100;
+  display: none;
+}
+
+#tbgxin2 {
+  position: absolute;
+  top: 131px;
+  left: 10rpx;
+  width: 180rpx;
+  height: 260rpx;
+  -webkit-transform: scale(.6);
+  z-index: 100;
+  display: none;
+}
+
+#tbgxin3 {
+  position: absolute;
+  top: 193.5px;
+  left: 10rpx;
+  width: 180rpx;
+  height: 260rpx;
+  -webkit-transform: scale(.6);
+  z-index: 100;
+  display: none;
+}
+
+#tbgxin4 {
+  position: absolute;
+  top: 256px;
+  left: 10rpx;
+  width: 180rpx;
+  height: 260rpx;
+  -webkit-transform: scale(.6);
+  z-index: 100;
+  display: none;
+}
+
+#tbgxin5 {
+  position: absolute;
+  top: 318.5px;
+  left: 10rpx;
+  width: 180rpx;
+  height: 260rpx;
+  -webkit-transform: scale(.6);
+  z-index: 100;
+  display: none;
+}
+
+#tbgxin6 {
+  position: absolute;
+  top: 381px;
+  left: 10rpx;
+  width: 180rpx;
+  height: 260rpx;
+  -webkit-transform: scale(.6);
+  z-index: 100;
+  display: none;
+}
+
+#tbgxin7 {
+  position: absolute;
+  top: 443.5px;
+  left: 10rpx;
+  width: 180rpx;
+  height: 260rpx;
+  -webkit-transform: scale(.6);
+  z-index: 100;
+  display: none;
+}
+
+#tbgxin8 {
+  position: absolute;
+  top: 6px;
+  left: 560rpx;
+  width: 180rpx;
+  height: 260rpx;
+  -webkit-transform: scale(.6);
+  z-index: 100;
+  display: none;
+}
+
+#tbgxin9 {
+  position: absolute;
+  top: 68.5px;
+  left: 560rpx;
+  width: 180rpx;
+  height: 260rpx;
+  -webkit-transform: scale(.6);
+  z-index: 100;
+  display: none;
+}
+
+#tbgxin10 {
+  position: absolute;
+  top: 131px;
+  left: 560rpx;
+  -webkit-transform: scale(.6);
+  z-index: 100;
+  display: none;
+  width: 180rpx;
+  height: 260rpx;
+}
+
+#tbgxin11 {
+  position: absolute;
+  top: 193.5px;
+  left: 560rpx;
+  width: 180rpx;
+  height: 260rpx;
+  -webkit-transform: scale(.6);
+  z-index: 100;
+  display: none;
+}
+
+#tbgxin12 {
+  position: absolute;
+  top: 256px;
+  left: 560rpx;
+  width: 180rpx;
+  height: 260rpx;
+  -webkit-transform: scale(.6);
+  z-index: 100;
+  display: none;
+}
+
+#tbgxin13 {
+  position: absolute;
+  top: 318.5px;
+  left: 560rpx;
+  width: 180rpx;
+  height: 260rpx;
+  -webkit-transform: scale(.6);
+  z-index: 100;
+  display: none;
+}
+
+#tbgxin14 {
+  position: absolute;
+  top: 381px;
+  left: 560rpx;
+  width: 180rpx;
+  height: 260rpx;
+  -webkit-transform: scale(.6);
+  z-index: 100;
+  display: none;
+}
+
+#tbgxin15 {
+  position: absolute;
+  top: 443.5px;
+  left: 560rpx;
+  width: 180rpx;
+  height: 260rpx;
+  -webkit-transform: scale(.6);
+  z-index: 100;
+  display: none;
+}
+
+@-webkit-keyframes div1_in {
+  0% {
+    -webkit-transform: translate(0, -500px) scale(1.2);
+    opacity: 0
+  }
+
+  20% {
+    -webkit-transform: translate(0, 30px) scale(.8);
+    opacity: 1;
+    -webkit-animation-timing-function: ease-out
+  }
+
+  80% {
+    -webkit-transform: translate(0, 0) scale(1);
+    opacity: 1
+  }
+
+  100% {
+    -webkit-transform: translate(0, -10px) scale(1.4);
+    opacity: 0
+  }
+}
+
+@-webkit-keyframes div2_in {
+  0% {
+    -webkit-transform: translate(0, 500px);
+    opacity: 0
+  }
+
+  20% {
+    -webkit-transform: translate(0, 10px);
+    opacity: 1;
+    -webkit-animation-timing-function: ease-out
+  }
+
+  80% {
+    -webkit-transform: translate(0, -10px);
+    opacity: 1
+  }
+
+  100% {
+    -webkit-transform: translate(0, -500px);
+    opacity: 0
+  }
+}
+
+@-webkit-keyframes div3_in {
+  0% {
+    -webkit-transform: translate(500px, 0);
+    opacity: 0
+  }
+
+  20% {
+    -webkit-transform: translate(40px, 0);
+    opacity: 1;
+    -webkit-animation-timing-function: ease-out
+  }
+
+  80% {
+    -webkit-transform: translate(-40px, 0);
+    opacity: 1
+  }
+
+  100% {
+    -webkit-transform: translate(-500px, 0);
+    opacity: 0
+  }
+}
+
+@-webkit-keyframes div4_in {
+  0% {
+    -webkit-transform: translate(0, 500px);
+    opacity: 0
+  }
+
+  20% {
+    -webkit-transform: translate(0, 40px);
+    opacity: 1;
+    -webkit-animation-timing-function: ease-out
+  }
+
+  80% {
+    -webkit-transform: translate(0, -40px);
+    opacity: 1
+  }
+
+  100% {
+    -webkit-transform: translate(0, -500px);
+    opacity: 0
+  }
+}
+
+@-webkit-keyframes div5_in {
+  0% {
+    -webkit-transform: translate(0, 500px);
+    opacity: 0
+  }
+
+  20% {
+    -webkit-transform: translate(0, -20px);
+    opacity: 1;
+    -webkit-animation-timing-function: ease-out
+  }
+
+  80% {
+    -webkit-transform: translate(0, 20px);
+    opacity: 1
+  }
+
+  100% {
+    -webkit-transform: translate(0, -500px);
+    opacity: 0
+  }
+}
+
+#bg {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-image: url("https://s2.kagirl.cn/template/pic/qingren17/bg.jpg");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center
+}
+
+#shang {
+  width: 100%;
+}

happyphoto/qingrenjie2020/qingrenjie2020.js

@@ -0,0 +1,225 @@
+// temp1/qingrenjie2020/qingrenjie2020.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    // 背景音乐
+    bgmusic: {
+      music: null,
+      playing: false
+    },
+    ads: null,
+    hasLoadAdConfig: false,
+    photoIndex: 0,
+    templateName: 'qingrenjie2020',
+    examplePhotos: [
+      'ac_1025868734706.jpeg',
+      'ac_1025868889836.jpeg',
+      'ac_1025869003213.jpeg',
+      'ac_1025869293008.jpeg',
+      'ac_1025869619587.jpeg',
+      'ac_1025871041645.jpeg',
+      'ac_1025870641427.jpeg',
+      'ac_1025870863984.jpeg',
+      'ac_1025871122158.jpeg',
+      'ac_1025871242452.jpeg'
+    ],
+    imageWidths: [],
+    imageHeights: [],
+    imageStyles: [],
+    page1BlockStyle: '',
+    page1WordStyle: '',
+    page1ImageStyle: ``,
+    page2BlockStyle: '',
+    page2WordStyle: '',
+    page2ImageStyle: ``,
+    page3BlockStyle: '',
+    page3WordStyle: '',
+    page3ImageStyle: ``,
+
+    top_block: "",
+    top1_block: "",
+    top2_block: "",
+    top3_block: "",
+    top4_block: "",
+    top5_block: "",
+    bottom_block: "",
+    bottom2_block: "",
+    bottom3_block: "",
+    bottom4_block: "",
+    love1: "",
+    love2: "",
+    love3: "",
+    love4: "",
+    qiubite_block: "",
+    arrow: "",
+    qiubitexin: "",
+    qbt_block: "",
+    love_block: "",
+    pagetitle: "",
+
+    timeouts: []
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+    this.initAnimation()
+  },
+
+  initAnimation() {
+    const _this = this
+    this.setData({
+      photoIndex: 0
+    })
+    _this.setData({
+      top_block: "animation: topmove 1s linear both",
+      top1_block: "animation: topmove 1s linear both",
+      top2_block: "animation: topmove 1s linear both",
+      top3_block: "animation: topmove 1s linear both",
+      top4_block: "animation: topmove 1s linear both",
+      top5_block: "animation: topmove 1s linear both",
+      bottom_block: "animation: bottomshow 1s linear both",
+      bottom2_block: "animation: bottomshow 1s linear both",
+      bottom3_block: "animation: bottomshow 1s linear both",
+      bottom4_block: "animation: bottomshow 1s linear both",
+      love1: "animation: lovemove 3s 1.8s linear both",
+      love2: "animation: lovemove 3s 2.5s linear both",
+      love3: "animation: lovemove 3s linear both",
+      love4: "animation: lovemove 3s 1s linear both",
+      qiubite_block: "animation: qiubite_blockshow 1s 3s linear both",
+      arrow: "animation: arrowshow 0.9s 4.1s linear both",
+      qiubitexin: "animation: qiubitexinshow 2s 3s linear both",
+      qbt_block: "animation: qbt_blockshow 1.8s 5s linear both",
+      love_block: "animation: love_blockmove 6.7s 1s linear both",
+      pagetitle: "animation: pagetitleshow 1s 3s linear both"
+    })
+    _this.data.timeouts.push(setTimeout(function () {
+      _this.showPage()
+    }, 7000))
+  },
+
+  showPage() {
+    const _this = this
+    if (this.data.photoIndex === this.data.examplePhotos.length - 1) {
+      // 图片轮询完重新开始
+      this.setData({
+        'photoIndex': 0
+      })
+    }
+    const pageIndex = this.data.photoIndex % 3 + 1
+    const imageURL = `https://novel-video.hongdes.cn/kawaalbum/${this.data.templateName}/example/${this.data.examplePhotos[this.data.photoIndex]}`
+    console.log(imageURL)
+    wx.getImageInfo({
+      src: imageURL,
+      success(res) {
+        const imageWidth = res.width
+        const imageHeight = res.height
+        let blockStyle = ''
+        if (imageWidth > imageHeight) {
+          //  横版图片
+          blockStyle = 'top:30%;'
+        } else {
+          // 竖版图片
+          blockStyle = 'top:10%;'
+        }
+        _this.setData({
+          [`page${pageIndex}BlockStyle`]: `${blockStyle}animation: pageshow 7.5s linear both;`,
+          [`page${pageIndex}WordStyle`]: `animation: wordshow 4.5s 1.5s linear both;`,
+          [`page${pageIndex}ImageStyle`]: imageURL,
+        })
+
+        _this.data.timeouts.push(setTimeout(() => {
+          _this.setData({
+            [`page${pageIndex + 1}BlockStyle`]: ``,
+            [`page${pageIndex + 1}WordStyle`]: ``,
+          })
+        }, 4800));
+        _this.data.timeouts.push(setTimeout(() => {
+          _this.setData({
+            'photoIndex': _this.data.photoIndex + 1
+          })
+          _this.showPage();
+        }, 6000));
+      },
+      fail(err) {
+        console.error(err);
+      }
+    })
+  },
+
+  /**
+ * 播放音乐
+ */
+  initBgMusic() {
+    let _this = this
+    if (!app.globalData.audioContext) {
+      app.globalData.audioContext = wx.createInnerAudioContext()
+    }
+    // obeyMuteSwitch（仅在 iOS 生效）是否遵循静音开关，设置为 false 之后，即使是在静音模式下，也能播放声音
+    wx.setInnerAudioOption({
+      obeyMuteSwitch: false
+    })
+    // 设置音乐循环
+    app.globalData.audioContext.loop = true
+    // 监听音乐播放
+    app.globalData.audioContext.onPlay(() => {
+      _this.setData({
+        'bgmusic.playing': true
+      })
+      console.log('music play', _this.data.bgmusic.playing)
+    })
+    // 监听音乐暂停
+    app.globalData.audioContext.onPause(() => {
+      console.log('music pause')
+      _this.setData({
+        'bgmusic.playing': false
+      })
+    })
+    app.globalData.audioContext.src = this.data.bgmusic.music.url
+    app.globalData.audioContext.play()
+  },
+
+  /**
+   * 音乐播放按钮
+   */
+  musicPlayTap() {
+    app.globalData.audioContext.paused ? app.globalData.audioContext.play() : app.globalData.audioContext.pause()
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+    this.clearTimeoutTask()
+  },
+
+  // 清除定时任务
+  clearTimeoutTask() {
+    this.data.timeouts.forEach(timeout => clearTimeout(timeout));
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

happyphoto/qingrenjie2020/qingrenjie2020.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

happyphoto/qingrenjie2020/qingrenjie2020.wxml

@@ -0,0 +1,143 @@
+<view id="container">
+  <navigator open-type="navigateBack" style="position: fixed;top: 60rpx; left: 30rpx;color:#ffffff;z-index: 999">
+    <image src="/assets/images/icons/icon-back-white.png" style="width: 50rpx;height: 50rpx;"></image>
+  </navigator>
+  <view id="bg1" class="bg"></view>
+
+  <view class="block">
+    <image id="love2" src="https://s1.kagirl.cn/template/pic/qingrenjie2020/shouyelove2.png" style="{{love2}}"></image>
+    <image id="love1" src="https://s2.kagirl.cn/template/pic/qingrenjie2020/shouyelove1.png" style="{{love1}}"></image>
+    <image id="love4" src="https://s1.kagirl.cn/template/pic/qingrenjie2020/shouyelove4.png" style="{{love4}}"></image>
+    <image id="love3" src="https://s2.kagirl.cn/template/pic/qingrenjie2020/shouyelove3.png" style="{{love3}}"></image>
+    <view id="love_block" style="{{love_block}}">
+      <image id="love" mode="widthFix" src="https://s2.kagirl.cn/template/pic/qingrenjie2020/biglove.png"></image>
+      <view id="qbt_block" style="{{qbt_block}}">
+        <view id="qiubite_block" style="{{qiubite_block}}">
+          <image id="arrow" src="https://s1.kagirl.cn/template/pic/qingrenjie2020/arrow.png" style="{{arrow}}"></image>
+          <image id="qiubite" src="https://s2.kagirl.cn/template/pic/qingrenjie2020/qiubite.png"></image>
+        </view>
+        <image id="qiubitexin" src="https://s1.kagirl.cn/template/pic/qingrenjie2020/qiubitexin.png"
+          style="{{qiubitexin}}"></image>
+      </view>
+      <view id="pagetitle" style="{{pagetitle}}">
+        <view id="titlecontent">今生有你，真好！一首《相伴红尘爱一生》送给我最爱的你！</view>
+      </view>
+    </view>
+    <view id="top5_block" style="{{top5_block}}">
+      <image id="top5" src="https://s2.kagirl.cn/template/pic/qingrenjie2020/piao5.png"></image>
+    </view>
+    <view id="top4_block" style="{{top4_block}}">
+      <image id="top4" src="https://s1.kagirl.cn/template/pic/qingrenjie2020/paio4.png"></image>
+    </view>
+    <view id="top_block" style="{{top_block}}">
+      <image id="shanghua" src="https://s2.kagirl.cn/template/pic/qingrenjie2020/shanghua.png"></image>
+    </view>
+    <view id="top2_block" style="{{top2_block}}">
+      <image id="top2" src="https://s1.kagirl.cn/template/pic/qingrenjie2020/piao2.png"></image>
+    </view>
+    <view id="top1_block" style="{{top1_block}}">
+      <image id="top1" src="https://s2.kagirl.cn/template/pic/qingrenjie2020/piao1.png"></image>
+    </view>
+    <view id="top3_block" style="{{top3_block}}">
+      <image id="top3" src="https://s1.kagirl.cn/template/pic/qingrenjie2020/piao3.png"></image>
+    </view>
+  </view>
+
+  <view class="block">
+    <image id="huaban5" src="https://s2.kagirl.cn/template/pic/qingrenjie2020/5.png"></image>
+    <image id="huaban6" src="https://s1.kagirl.cn/template/pic/qingrenjie2020/6.png"></image>
+    <image id="huaban7" src="https://s2.kagirl.cn/template/pic/qingrenjie2020/7.png"></image>
+
+    <view id="page1_block" class="page_block" style="{{page1BlockStyle}}">
+      <view class="page_ctn">
+        <view id="fly1">
+          <image class="fly1left" src="https://s1.kagirl.cn/template/pic/qingrenjie2020/flyleft.png"></image>
+          <image class="fly1right" src="https://s2.kagirl.cn/template/pic/qingrenjie2020/fly1right.png"></image>
+          <image class="fly1line" src="https://s1.kagirl.cn/template/pic/qingrenjie2020/fly1line.png"></image>
+          <image class="fly1love" src="https://s2.kagirl.cn/template/pic/qingrenjie2020/fly1love.png"></image>
+        </view>
+        <view id="fly1_2">
+          <image class="fly1left" src="https://s1.kagirl.cn/template/pic/qingrenjie2020/flyleft.png"></image>
+          <image class="fly1right" src="https://s2.kagirl.cn/template/pic/qingrenjie2020/fly1right.png"></image>
+          <image class="fly1line" src="https://s1.kagirl.cn/template/pic/qingrenjie2020/fly1line.png"></image>
+          <image class="fly1love" src="https://s2.kagirl.cn/template/pic/qingrenjie2020/fly1love.png"></image>
+        </view>
+        <view id="fly1_3">
+          <image class="fly1left" src="https://s1.kagirl.cn/template/pic/qingrenjie2020/flyleft.png"></image>
+          <image class="fly1right" src="https://s2.kagirl.cn/template/pic/qingrenjie2020/fly1right.png"></image>
+          <image class="fly1line" src="https://s1.kagirl.cn/template/pic/qingrenjie2020/fly1line.png"></image>
+          <image class="fly1love" src="https://s2.kagirl.cn/template/pic/qingrenjie2020/fly1love.png"></image>
+        </view>
+      </view>
+      <image id="page1" class="page" mode="widthFix" src="{{page1ImageStyle}}"></image>
+    </view>
+    <view id="page1_word" class="word_block" style="{{page1WordStyle}}">
+      <view id="word1" class="wordspan"></view>
+    </view>
+    <view id="page2_block" class="page_block" style="{{page2BlockStyle}}">
+      <view class="page_ctn">
+        <view id="fly2">
+          <image class="fly1left" src="https://s1.kagirl.cn/template/pic/qingrenjie2020/fly2left.png"></image>
+          <image class="fly1right" src="https://s2.kagirl.cn/template/pic/qingrenjie2020/fly2right.png"></image>
+          <image class="fly23line" src="https://s1.kagirl.cn/template/pic/qingrenjie2020/fly23line.png"></image>
+          <image class="fly1love" src="https://s2.kagirl.cn/template/pic/qingrenjie2020/fly2love.png"></image>
+        </view>
+        <view id="fly2_2">
+          <image class="fly1left" src="https://s1.kagirl.cn/template/pic/qingrenjie2020/fly2left.png"></image>
+          <image class="fly1right" src="https://s2.kagirl.cn/template/pic/qingrenjie2020/fly2right.png"></image>
+          <image class="fly23line" src="https://s1.kagirl.cn/template/pic/qingrenjie2020/fly23line.png"></image>
+          <image class="fly1love" src="https://s2.kagirl.cn/template/pic/qingrenjie2020/fly2love.png"></image>
+        </view>
+      </view>
+      <image id="page2" class="page" mode="widthFix" src="{{page2ImageStyle}}"></image>
+    </view>
+    <view id="page2_word" class="word_block" style="{{page2WordStyle}}">
+      <view id="word2" class="wordspan"></view>
+    </view>
+    <view id="page3_block" class="page_block" style="{{page3BlockStyle}}">
+      <view class="page_ctn">
+        <view id="fly3">
+          <image class="fly1left" src="https://s1.kagirl.cn/template/pic/qingrenjie2020/fly3left.png"></image>
+          <image class="fly1right" src="https://s2.kagirl.cn/template/pic/qingrenjie2020/fly3right.png"></image>
+          <image class="fly23line" src="https://s1.kagirl.cn/template/pic/qingrenjie2020/fly23line.png"></image>
+          <image class="fly1love" src="https://s1.kagirl.cn/template/pic/qingrenjie2020/fly3love.png"></image>
+        </view>
+        <view id="fly3_2">
+          <image class="fly1left" src="https://s1.kagirl.cn/template/pic/qingrenjie2020/fly3left.png"></image>
+          <image class="fly1right" src="https://s2.kagirl.cn/template/pic/qingrenjie2020/fly3right.png"></image>
+          <image class="fly23line" src="https://s1.kagirl.cn/template/pic/qingrenjie2020/fly23line.png"></image>
+          <image class="fly1love" src="https://s1.kagirl.cn/template/pic/qingrenjie2020/fly3love.png"></image>
+        </view>
+      </view>
+      <image id="page3" class="page" mode="widthFix" src="{{page3ImageStyle}}"></image>
+    </view>
+    <view id="page3_word" class="word_block" style="{{page3WordStyle}}">
+      <view id="word3" class="wordspan"></view>
+    </view>
+    <image id="huaban1" src="https://s2.kagirl.cn/template/pic/qingrenjie2020/1.png"></image>
+    <image id="huaban2" src="https://s1.kagirl.cn/template/pic/qingrenjie2020/2.png"></image>
+
+
+    <image id="xin1" src="https://s2.kagirl.cn/template/pic/qingrenjie2020/smartlove2.png"></image>
+    <image id="xin2" src="https://s1.kagirl.cn/template/pic/qingrenjie2020/smartlove1.png"></image>
+    <view id="xin3_block">
+      <image id="xin3" src="https://s1.kagirl.cn/template/pic/qingrenjie2020/smartlove1.png"></image>
+    </view>
+    <image id="xin4" src="https://s2.kagirl.cn/template/pic/qingrenjie2020/smartlove3.png"></image>
+    <image id="xin5" src="https://s2.kagirl.cn/template/pic/qingrenjie2020/smartlove3.png"></image>
+
+    <view id="bottom_block" style="{{bottom_block}}">
+      <image id="bottom1" src="https://s1.kagirl.cn/template/pic/qingrenjie2020/xiameiguihua.png"></image>
+    </view>
+    <view id="bottom2_block" style="{{bottom2_block}}">
+      <image id="bottom2" src="https://s1.kagirl.cn/template/pic/qingrenjie2020/love1.png"></image>
+      <image id="bottom2_2" src="https://s2.kagirl.cn/template/pic/qingrenjie2020/love2.png"></image>
+    </view>
+    <view id="bottom3_block" style="{{bottom3_block}}">
+      <image id="bottom3" src="https://s2.kagirl.cn/template/pic/qingrenjie2020/xiahua1.png"></image>
+    </view>
+    <view id="bottom4_block" style="{{bottom4_block}}">
+      <image id="bottom4" src="https://s1.kagirl.cn/template/pic/qingrenjie2020/xiahua2.png"></image>
+    </view>
+  </view>
+</view>

happyphoto/qingrenjie2020/qingrenjie2020.wxss

@@ -0,0 +1,845 @@
+/* temp1/qingrenjie2020/qingrenjie2020.wxss */
+#container view,
+#container image {
+  position: absolute
+}
+
+#container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden
+}
+
+.bg {
+  width: 100%;
+  height: 100%
+}
+
+.noshow {
+  opacity: 0
+}
+
+#bg1 {
+  background: url('https://s2.kagirl.cn/template/pic/qingrenjie2020/bg.png') no-repeat
+}
+
+.block {
+  position: absolute;
+  opacity: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  -webkit-transform-style: preserve-3d;
+  perspective: 4200px
+}
+
+.page_block {
+  opacity: 0;
+  width: 80%;
+  height: 100%;
+  left: 10%;
+  top: 10%;
+  /* transform: translate(50%, 50%); */
+}
+
+.page_ctn {
+  top: -100rpx;
+  width: 100%;
+  height: 100rpx;
+}
+
+.page_word {
+  opacity: 0;
+  bottom: 100px;
+  width: 100%;
+  height: 50px;
+}
+
+.page {
+  width: 100%;
+  height: 100%;
+  border: 10px solid #fa5d7c;
+}
+
+.wordspan {
+  font-size: 26px;
+  color: #fff;
+  left: 0;
+  width: 230px;
+  height: 100px;
+  vertical-align: middle;
+  line-height: 30px;
+  text-align: center;
+  text-shadow: 2px 2px 2px #e52446;
+  letter-spacing: 2px
+}
+
+.word_block {
+  opacity: 0;
+  left: 150px;
+  bottom: 160px;
+  width: 180px;
+  height: 100px;
+  overflow: hidden
+}
+
+@-webkit-keyframes wordshow {
+  0% {
+    width: 0;
+    opacity: 1
+  }
+
+  22% {
+    width: 230px;
+    opacity: 1
+  }
+
+  78% {
+    width: 230px;
+    opacity: 1
+  }
+
+  100% {
+    width: 0;
+    opacity: 1
+  }
+}
+
+@-webkit-keyframes pageshow {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(500px)
+  }
+
+  20% {
+    opacity: 1;
+    -webkit-transform: translateY(0)
+  }
+
+  53% {
+    -webkit-transform: translateY(30px)
+  }
+
+  80% {
+    -webkit-transform: translateY(-10px)
+  }
+
+  90% {
+    opacity: 1
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(-600px)
+  }
+}
+
+#fly1 {
+  top: 0;
+  left: 0;
+  width: 120rpx;
+  height: 83rpx
+}
+
+.fly1love {
+  width: 90rpx;
+  height: 60rpx;
+  top: 60%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%)
+}
+
+.fly1left {
+  width: 80rpx;
+  height: 60rpx;
+  top: -20rpx;
+  left: -40rpx;
+  -webkit-animation: flyleftshow 2s linear infinite
+}
+
+.fly1right {
+  width: 80rpx;
+  height: 60rpx;
+  top: -20rpx;
+  left: 80rpx;
+  -webkit-animation: flyrightshow 2s linear infinite;
+}
+
+@-webkit-keyframes flyleftshow {
+
+  0%,
+  100% {
+    -webkit-transform-origin: 100% 100%;
+    -webkit-transform: rotate(0)
+  }
+
+  50% {
+    -webkit-transform-origin: 100% 100%;
+    -webkit-transform: rotate(-15deg)
+  }
+}
+
+@-webkit-keyframes flyrightshow {
+
+  0%,
+  100% {
+    -webkit-transform-origin: 0% 100%;
+    -webkit-transform: rotate(0)
+  }
+
+  50% {
+    -webkit-transform-origin: 0% 100%;
+    -webkit-transform: rotate(15deg)
+  }
+}
+
+.fly1line {
+  width: 10rpx;
+  height: 30rpx;
+  bottom: -20rpx;
+  left: 50%;
+  -webkit-transform: translateX(-50%)
+}
+
+.fly23line {
+  width: 10rpx;
+  height: 30rpx;
+  bottom: -20rpx;
+  left: 50%;
+  -webkit-transform: translateX(-50%)
+}
+
+#fly1_2 {
+  top: 0;
+  left: 240rpx;
+  width: 120rpx;
+  height: 83rpx
+}
+
+#fly1_3 {
+  top: 0;
+  left: 500rpx;
+  width: 120rpx;
+  height: 83rpx
+}
+
+#fly2 {
+  top: -5rpx;
+  left: 0;
+  width: 120rpx;
+  height: 83rpx
+}
+
+#fly2_2 {
+  top: -5rpx;
+  right: 0;
+  width: 120rpx;
+  height: 83rpx;
+}
+
+#fly3 {
+  top: -5rpx;
+  left: 0;
+  width: 120rpx;
+  height: 83rpx;
+}
+
+#fly3_2 {
+  top: -5rpx;
+  right: 0;
+  width: 120rpx;
+  height: 83rpx;
+}
+
+#top_block {
+  top: -82px;
+  left: 3px;
+  width: 497px;
+  height: 200px
+}
+
+#shanghua {
+  width: 100%;
+  height: 100%
+}
+
+#top1_block {
+  top: -14px;
+  left: -19px;
+  width: 117px;
+  height: 128px
+}
+
+#top1_block image {
+  width: 100%;
+  height: 100%;
+}
+
+#top2_block {
+  top: -20px;
+  left: 37px;
+  width: 87px;
+  height: 106px
+}
+
+#top2_block image {
+  width: 100%;
+  height: 100%;
+}
+
+#top3_block {
+  top: -8px;
+  left: 349px;
+  width: 59px;
+  height: 63px
+}
+
+#top3_block image {
+  width: 100%;
+  height: 100%;
+}
+
+#top4_block {
+  top: 26px;
+  left: 204px;
+  width: 86px;
+  height: 95px
+}
+
+#top4_block image {
+  width: 100%;
+  height: 100%;
+}
+
+#top5_block {
+  top: 34px;
+  left: 258px;
+  width: 53px;
+  height: 52px
+}
+
+#top5_block image {
+  width: 100%;
+  height: 100%;
+}
+
+
+#top1 {
+  -webkit-animation: top2show 2s linear infinite
+}
+
+#top2 {
+  -webkit-animation: top2show 2s linear infinite
+}
+
+#top3 {
+  -webkit-animation: top2show 1.5s linear infinite
+}
+
+#top4 {
+  -webkit-animation: top2show 1.5s linear infinite
+}
+
+#top5 {
+  -webkit-animation: top2show 1.5s linear infinite
+}
+
+@-webkit-keyframes top2show {
+
+  0%,
+  100% {
+    -webkit-transform-origin: 10% 0%;
+    -webkit-transform: rotate(0)
+  }
+
+  50% {
+    -webkit-transform-origin: 10% 0%;
+    -webkit-transform: rotate(8deg)
+  }
+}
+
+@-webkit-keyframes topmove {
+  0% {
+    -webkit-transform: translateY(-100px)
+  }
+
+  100% {
+    -webkit-transform: translateY(0)
+  }
+}
+
+#bottom_block {
+  bottom: -50px;
+  width: 100%;
+  height: 236px
+}
+
+#bottom_block image {
+  width: 100%;
+  height: 100%;
+}
+
+#bottom2_block {
+  bottom: 36px;
+  left: 2px;
+  width: 507px;
+  height: 120px
+}
+
+#bottom2_block image {
+  width: 100%;
+  height: 100%;
+}
+
+#bottom2_2 {
+  opacity: 0;
+  left: -10px;
+  top: -11px;
+  -webkit-animation: bottom2_2show 4s 2s linear infinite
+}
+
+@-webkit-keyframes bottom2_2show {
+
+  0%,
+  100% {
+    opacity: 0
+  }
+
+  25%,
+  75% {
+    opacity: 1
+  }
+}
+
+@-webkit-keyframes bottomshow {
+  0% {
+    -webkit-transform: translateY(100px)
+  }
+
+  100% {
+    -webkit-transform: translateY(0)
+  }
+}
+
+#bottom3_block {
+  bottom: 7px;
+  left: 130px;
+  width: 72px;
+  height: 74px
+}
+
+#bottom3_block image {
+  width: 100%;
+  height: 100%;
+}
+
+#bottom3 {
+  -webkit-animation: bottom3show 1.5s linear infinite
+}
+
+@-webkit-keyframes bottom3show {
+
+  0%,
+  100% {
+    -webkit-transform-origin: 100% 100%;
+    -webkit-transform: rotate(0)
+  }
+
+  50% {
+    -webkit-transform-origin: 100% 100%;
+    -webkit-transform: rotate(10deg)
+  }
+}
+
+#bottom4_block {
+  bottom: 40px;
+  left: 456px;
+  width: 59px;
+  height: 51px
+}
+
+#bottom4 {
+  -webkit-animation: bottom3show 1s linear infinite
+}
+
+#love1 {
+  opacity: 0;
+  bottom: -55px;
+  left: -8px;
+  width: 202px;
+  height: 180px
+}
+
+#love2 {
+  opacity: 0;
+  bottom: -192px;
+  left: 205px;
+  width: 339px;
+  height: 301px
+}
+
+#love3 {
+  opacity: 0;
+  bottom: -50px;
+  left: 385px;
+  width: 107px;
+  height: 95px
+}
+
+#love4 {
+  opacity: 0;
+  bottom: 64px;
+  left: 29px;
+  width: 77px;
+  height: 68px
+}
+
+@-webkit-keyframes lovemove {
+  0% {
+    -webkit-transform: translateY(0)
+  }
+
+  2% {
+    opacity: 1
+  }
+
+  98% {
+    opacity: 1
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(-1200px)
+  }
+}
+
+#love_block {
+  top: 50%;
+  width: 100%;
+  height: 485px;
+}
+
+#love_block image {
+  width: 100%;
+}
+
+@-webkit-keyframes love_blockmove {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(50%)
+  }
+
+  2% {
+    opacity: 1
+  }
+
+  30% {
+    -webkit-transform: translateY(-50%)
+  }
+
+  78% {
+    -webkit-transform: translateY(-50%)
+  }
+
+  98% {
+    opacity: 1
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(-150%)
+  }
+}
+
+#qbt_block {
+  width: 100%;
+  height: 100%
+}
+
+#qbt_block #qiubite {
+  width: 180rpx;
+  height: 150rpx;
+}
+
+#qbt_block #arrow {
+  width: 80rpx;
+  height: 50rpx;
+}
+
+@-webkit-keyframes qbt_blockshow {
+  0% {
+    -webkit-transform: translate(0, 0)
+  }
+
+  100% {
+    -webkit-transform: translate(400px, -200px)
+  }
+}
+
+#arrow {
+  top: 19px;
+  left: 60px
+}
+
+@-webkit-keyframes arrowshow {
+  0% {
+    -webkit-transform: translate(0, 0)
+  }
+
+  100% {
+    -webkit-transform: translate(77px, -25px)
+  }
+}
+
+#qiubite_block {
+  opacity: 0;
+  top: 60px;
+  left: 45px;
+  width: 96px;
+  height: 102px
+}
+
+@-webkit-keyframes qiubite_blockshow {
+  0% {
+    -webkit-transform: scale(.1)
+  }
+
+  2% {
+    opacity: 1
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: scale(1)
+  }
+}
+
+#qiubitexin {
+  opacity: 0;
+  top: 55px;
+  left: 231px;
+  width: 30px;
+  height: 26px
+}
+
+@-webkit-keyframes qiubitexinshow {
+  0% {
+    -webkit-transform: translateY(50px) scale(.1)
+  }
+
+  2% {
+    opacity: 1
+  }
+
+  50% {
+    opacity: 1;
+    -webkit-transform: translateY(50px) scale(1)
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0) scale(1)
+  }
+}
+
+#pagetitle {
+  width: 100%;
+  height: 100%;
+  overflow: hidden
+}
+
+@-webkit-keyframes pagetitleshow {
+  0% {
+    height: 0
+  }
+
+  100% {
+    height: 100%
+  }
+}
+
+#titlecontent {
+  opacity: 1;
+  top: 43%;
+  left: 50%;
+  height: 50%;
+  font-size: 25px;
+  color: #fff;
+  text-align: center;
+  overflow: hidden;
+  -webkit-transform: translate(-50%, -50%);
+}
+
+@-webkit-keyframes fadein {
+  from {
+    opacity: 0
+  }
+
+  to {
+    opacity: 1
+  }
+}
+
+@-webkit-keyframes fadeout {
+  from {
+    opacity: 1
+  }
+
+  to {
+    opacity: 0
+  }
+}
+
+#huaban1 {
+  top: -50px;
+  left: 35px;
+  width: 61px;
+  height: 64px;
+  -webkit-animation: huaban1show 4.5s 7s linear infinite
+}
+
+#huaban2 {
+  top: -38px;
+  left: 133px;
+  width: 56px;
+  height: 56px;
+  -webkit-animation: huaban2show 5.3s 8s linear infinite
+}
+
+#huaban5 {
+  top: -51px;
+  left: 249px;
+  width: 52px;
+  height: 51px;
+  -webkit-animation: huaban1show 4.6s 7.4s linear infinite
+}
+
+#huaban6 {
+  top: -34px;
+  left: 459px;
+  width: 30px;
+  height: 34px;
+  -webkit-animation: huaban1show 7.1s 7s linear infinite
+}
+
+#huaban7 {
+  top: -54px;
+  left: 38px;
+  width: 51px;
+  height: 52px;
+  -webkit-animation: huaban2show 6.8s 7s linear infinite
+}
+
+@-webkit-keyframes huaban1show {
+  0% {
+    -webkit-transform: translate(0, 0) rotate(0)
+  }
+
+  100% {
+    -webkit-transform: translate(-5px, 950px) rotate(180deg)
+  }
+}
+
+@-webkit-keyframes huaban2show {
+  0% {
+    -webkit-transform: translate(0, 0) rotate(0)
+  }
+
+  100% {
+    -webkit-transform: translate(20px, 980px) rotate(-150deg)
+  }
+}
+
+#xin1 {
+  opacity: 0;
+  bottom: 70px;
+  left: 50px;
+  width: 23px;
+  height: 21px;
+  -webkit-animation: xin1show 1.5s 7.4s linear infinite
+}
+
+#xin2 {
+  opacity: 0;
+  bottom: 70px;
+  left: 100px;
+  width: 32px;
+  height: 30px;
+  -webkit-animation: xin2show 1.5s 7s linear infinite
+}
+
+#xin3 {
+  -webkit-transform: rotate(-50deg)
+}
+
+#xin3_block {
+  opacity: 0;
+  bottom: 70px;
+  left: 250px;
+  width: 37px;
+  height: 37px;
+  -webkit-animation: xin1show 1.4s 7s linear infinite
+}
+
+#xin4 {
+  opacity: 0;
+  bottom: 70px;
+  left: 340px;
+  width: 15px;
+  height: 14px;
+  -webkit-animation: xin2show 1.5s 7.4s linear infinite
+}
+
+#xin5 {
+  opacity: 0;
+  bottom: 70px;
+  left: 425px;
+  width: 30px;
+  height: 27px;
+  -webkit-animation: xin2show 2s 7s linear infinite
+}
+
+@-webkit-keyframes xin1show {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate(0, 0)
+  }
+
+  10% {
+    opacity: 1
+  }
+
+  75% {
+    opacity: 1
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate(-50px, -140px)
+  }
+}
+
+@-webkit-keyframes xin2show {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate(0, 0)
+  }
+
+  10% {
+    opacity: 1
+  }
+
+  75% {
+    opacity: 1
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate(60px, -140px)
+  }
+}

happyphoto/rose/rose.js

@@ -0,0 +1,189 @@
+// temp1/rose/rose.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    // 背景音乐
+    bgmusic: {
+      music: null,
+      playing: false
+    },
+    ads: null,
+    hasLoadAdConfig: false,
+    photoIndex: 0,
+    templateName: 'rose',
+    imageURLList: [],
+    examplePhotos: [
+      'ac_1040677313172.jpeg',
+      'ac_1040677476632.jpeg',
+      'ac_1040677587183.jpeg',
+      'ac_1040677692986.jpeg',
+      'ac_1040677828394.jpeg',
+      'ac_1040677921231.jpeg',
+      'ac_1040677937898.jpeg',
+      'ac_1040677955027.jpeg',
+      'ac_1040678293475.jpeg',
+      'ac_1048537521257.jpeg'
+    ],
+    imageWidths: [],
+    imageHeights: [],
+    imageStyles: [],
+    page1BlockStyle: '',
+    page1ImageStyle: ``,
+    page2BlockStyle: '',
+    page2ImageStyle: ``,
+
+    pagetitle: '',
+    titlediv: '',
+    xindiv: '',
+
+    timeouts: []
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+    this.setData({
+      imageURLList: this.data.examplePhotos.map(item => {
+        return `https://novel-video.hongdes.cn/kawaalbum/${this.data.templateName}/example/${item}`
+      })
+    })
+    this.initAnimation()
+  },
+
+  initAnimation() {
+    const _this = this
+    this.setData({
+      photoIndex: 0
+    })
+    _this.setData({
+      pagetitle: 'animation: myfadein 0.5s linear both;',
+      titlediv: 'animation: titlein 4s 0.1s linear both;',
+      xindiv: 'animation: xinmove 4.2s linear both;'
+    })
+    _this.data.timeouts.push(setTimeout(function () {
+      _this.setData({
+        pagetitle: 'animation: titleout 1.5s linear both;',
+      })
+      _this.data.timeouts.push(setTimeout(function () {
+        _this.showPage()
+      }, 1000))
+    }, 5000))
+  },
+
+  showPage() {
+    const _this = this
+    if (this.data.photoIndex === this.data.examplePhotos.length - 1) {
+      // 图片轮询完重新开始
+      this.setData({
+        'photoIndex': 0
+      })
+    }
+    const pageIndex = this.data.photoIndex % 2 + 1
+    const imageURL = `https://novel-video.hongdes.cn/kawaalbum/${this.data.templateName}/example/${this.data.examplePhotos[this.data.photoIndex]}`
+    wx.getImageInfo({
+      src: imageURL,
+      success(res) {
+        const imageWidth = res.width
+        const imageHeight = res.height
+        let blockStyle = ''
+        if (imageWidth > imageHeight) {
+          //  横版图片
+          blockStyle = 'top:20%;'
+        } else {
+          // 竖版图片
+          blockStyle = 'top:10%;'
+        }
+        _this.setData({
+          [`page${pageIndex}BlockStyle`]: `animation: div_in 8s linear both;`,
+          [`page${pageIndex}ImageStyle`]: imageURL,
+          [`page${pageIndex === 1 ? 2 : 1}BlockStyle`]: '',
+        })
+        _this.data.timeouts.push(setTimeout(() => {
+          _this.setData({
+            'photoIndex': _this.data.photoIndex + 1
+          })
+          _this.showPage()
+        }, 8000));
+      },
+      fail(err) {
+        console.error(err);
+      }
+    })
+  },
+
+  /**
+ * 播放音乐
+ */
+  initBgMusic() {
+    let _this = this
+    if (!app.globalData.audioContext) {
+      app.globalData.audioContext = wx.createInnerAudioContext()
+    }
+    // obeyMuteSwitch（仅在 iOS 生效）是否遵循静音开关，设置为 false 之后，即使是在静音模式下，也能播放声音
+    wx.setInnerAudioOption({
+      obeyMuteSwitch: false
+    })
+    // 设置音乐循环
+    app.globalData.audioContext.loop = true
+    // 监听音乐播放
+    app.globalData.audioContext.onPlay(() => {
+      _this.setData({
+        'bgmusic.playing': true
+      })
+      console.log('music play', _this.data.bgmusic.playing)
+    })
+    // 监听音乐暂停
+    app.globalData.audioContext.onPause(() => {
+      console.log('music pause')
+      _this.setData({
+        'bgmusic.playing': false
+      })
+    })
+    app.globalData.audioContext.src = this.data.bgmusic.music.url
+    app.globalData.audioContext.play()
+  },
+
+  /**
+   * 音乐播放按钮
+   */
+  musicPlayTap() {
+    app.globalData.audioContext.paused ? app.globalData.audioContext.play() : app.globalData.audioContext.pause()
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+    this.clearTimeoutTask()
+  },
+
+  // 清除定时任务
+  clearTimeoutTask() {
+    this.data.timeouts.forEach(timeout => clearTimeout(timeout));
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

happyphoto/rose/rose.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

happyphoto/rose/rose.wxml

@@ -0,0 +1,166 @@
+<!--temp1/rose/rose.wxml-->
+<view id="container">
+  <navigator open-type="navigateBack" style="position: fixed;top: 60rpx; left: 30rpx;color:#ffffff;z-index: 999">
+    <image src="/assets/images/icons/icon-back-white.png" style="width: 50rpx;height: 50rpx;"></image>
+  </navigator>
+  <view id="bg"></view>
+  <image class="pot" src="https://s1.kagirl.cn/template/pic/rose/pot.png"></image>
+
+  <view id="div1" class="div" style="{{page1BlockStyle}}">
+    <image class="page" id="page1" mode="widthFix" src="{{page1ImageStyle}}"></image>
+  </view>
+
+  <view id="div2" class="div" style="{{page2BlockStyle}}">
+    <image class="page" id="page2" mode="widthFix" src="{{page2ImageStyle}}"></image>
+  </view>
+
+  <image class="top_rose" mode="widthFix" src="https://s2.kagirl.cn/template/pic/rose/up.png"></image>
+  <image class="dian1" src="https://s1.kagirl.cn/template/pic/rose/dian.png"></image>
+  <image class="dian2" src="https://s2.kagirl.cn/template/pic/rose/dian02.png"></image>
+
+  <view id="potdiv">
+
+    <image src="https://s1.kagirl.cn/template/pic/rose/pot.png"
+      style="position: absolute; left: 0px; top: 74px; width: 30px; opacity: 0; animation: 2s linear 0.7s infinite normal none running pot;">
+    </image>
+    <image src="https://s1.kagirl.cn/template/pic/rose/pot.png"
+      style="position: absolute; left: 50px; top: 13px; width: 30px; opacity: 0; animation: 2s linear 0.45s infinite normal none running pot;">
+    </image>
+    <image src="https://s1.kagirl.cn/template/pic/rose/pot.png"
+      style="position: absolute; left: 100px; top: 66px; width: 30px; opacity: 0; animation: 2s linear 0.2s infinite normal none running pot;">
+    </image>
+    <image src="https://s1.kagirl.cn/template/pic/rose/pot.png"
+      style="position: absolute; left: 150px; top: 88px; width: 30px; opacity: 0; animation: 2s linear 0.65s infinite normal none running pot;">
+    </image>
+    <image src="https://s1.kagirl.cn/template/pic/rose/pot.png"
+      style="position: absolute; left: 200px; top: 3px; width: 30px; opacity: 0; animation: 2s linear 0.3s infinite normal none running pot;">
+    </image>
+    <image src="https://s1.kagirl.cn/template/pic/rose/pot.png"
+      style="position: absolute; left: 250px; top: 57px; width: 30px; opacity: 0; animation: 2s linear 0.05s infinite normal none running pot;">
+    </image>
+    <image src="https://s1.kagirl.cn/template/pic/rose/pot.png"
+      style="position: absolute; left: 300px; top: 93px; width: 30px; opacity: 0; animation: 2s linear 0.7s infinite normal none running pot;">
+    </image>
+    <image src="https://s1.kagirl.cn/template/pic/rose/pot.png"
+      style="position: absolute; left: 350px; top: 65px; width: 30px; opacity: 0; animation: 2s linear 0.25s infinite normal none running pot;">
+    </image>
+    <image src="https://s1.kagirl.cn/template/pic/rose/pot.png"
+      style="position: absolute; left: 400px; top: 73px; width: 30px; opacity: 0; animation: 2s linear 0.2s infinite normal none running pot;">
+    </image>
+    <image src="https://s1.kagirl.cn/template/pic/rose/pot.png"
+      style="position: absolute; left: 450px; top: 96px; width: 30px; opacity: 0; animation: 2s linear 0.15s infinite normal none running pot;">
+    </image>
+  </view>
+
+  <image class="xin9" src="https://s1.kagirl.cn/template/pic/rose/xin02.png"></image>
+  <image class="xin10" src="https://s1.kagirl.cn/template/pic/rose/xin02.png"></image>
+  <image class="xin1" src="https://s2.kagirl.cn/template/pic/rose/xin01.png"></image>
+  <image class="xin2" src="https://s2.kagirl.cn/template/pic/rose/xin01.png"></image>
+  <image class="xin3" src="https://s2.kagirl.cn/template/pic/rose/xin01.png"></image>
+  <image class="xin4" src="https://s2.kagirl.cn/template/pic/rose/xin01.png"></image>
+  <image class="xin5" src="https://s2.kagirl.cn/template/pic/rose/xin01.png"></image>
+  <image class="xin6" src="https://s2.kagirl.cn/template/pic/rose/xin01.png"></image>
+  <image class="xin7" src="https://s2.kagirl.cn/template/pic/rose/xin01.png"></image>
+  <image class="xin8" src="https://s2.kagirl.cn/template/pic/rose/xin01.png"></image>
+
+
+  <image class="xin11" src="https://s1.kagirl.cn/template/pic/rose/xin03.png"></image>
+  <image class="xin12" src="https://s1.kagirl.cn/template/pic/rose/xin03.png"></image>
+  <image class="xin13" src="https://s1.kagirl.cn/template/pic/rose/xin03.png"></image>
+
+  <view class="meigui2">
+    <image class="meigui2_img" src="https://s2.kagirl.cn/template/pic/rose/meigui2.png"></image>
+    <image class="yezi1" src="https://s1.kagirl.cn/template/pic/rose/yezi01.png"></image>
+    <image class="yezi2" src="https://s2.kagirl.cn/template/pic/rose/yezi02.png"></image>
+    <image class="guang2" src="https://s1.kagirl.cn/template/pic/dahua/g.png"></image>
+  </view>
+  <view class="meigui1">
+    <image class="meigui1_img" src="https://s2.kagirl.cn/template/pic/rose/meigui.png"></image>
+    <image class="guang1" mode="widthFix" src="https://s1.kagirl.cn/template/pic/dahua/g.png"></image>
+    <image class="guang3" mode="widthFix" src="https://s1.kagirl.cn/template/pic/dahua/g.png"></image>
+  </view>
+
+
+
+  <view id="xindiv" style="{{xindiv}}">
+    <image src="https://s2.kagirl.cn/template/pic/rose/xin.png"
+      style="position: absolute; left: 200px; top: 100px; animation: 1.5s linear 1.05s infinite normal none running heart0;">
+    </image>
+    <image src="https://s2.kagirl.cn/template/pic/rose/xin.png"
+      style="position: absolute; left: 200px; top: 100px; animation: 1.5s linear 1.4s infinite normal none running heart1;">
+    </image>
+    <image src="https://s2.kagirl.cn/template/pic/rose/xin.png"
+      style="position: absolute; left: 200px; top: 100px; animation: 1.5s linear 1.25s infinite normal none running heart2;">
+    </image>
+    <image src="https://s2.kagirl.cn/template/pic/rose/xin.png"
+      style="position: absolute; left: 200px; top: 100px; animation: 1.5s linear 1s infinite normal none running heart3;">
+    </image>
+    <image src="https://s2.kagirl.cn/template/pic/rose/xin.png"
+      style="position: absolute; left: 200px; top: 100px; animation: 1.5s linear 0.05s infinite normal none running heart4;">
+    </image>
+    <image src="https://s2.kagirl.cn/template/pic/rose/xin.png"
+      style="position: absolute; left: 200px; top: 100px; animation: 1.5s linear 1.25s infinite normal none running heart5;">
+    </image>
+    <image src="https://s2.kagirl.cn/template/pic/rose/xin.png"
+      style="position: absolute; left: 200px; top: 100px; animation: 1.5s linear 1s infinite normal none running heart6;">
+    </image>
+    <image src="https://s2.kagirl.cn/template/pic/rose/xin.png"
+      style="position: absolute; left: 200px; top: 100px; animation: 1.5s linear 0.1s infinite normal none running heart7;">
+    </image>
+    <image src="https://s2.kagirl.cn/template/pic/rose/xin.png"
+      style="position: absolute; left: 200px; top: 100px; animation: 1.5s linear 0.1s infinite normal none running heart8;">
+    </image>
+    <image src="https://s2.kagirl.cn/template/pic/rose/xin.png"
+      style="position: absolute; left: 200px; top: 100px; animation: 1.5s linear 0.8s infinite normal none running heart9;">
+    </image>
+    <image src="https://s2.kagirl.cn/template/pic/rose/xin.png"
+      style="position: absolute; left: 200px; top: 100px; animation: 1.5s linear 1.4s infinite normal none running heart10;">
+    </image>
+    <image src="https://s2.kagirl.cn/template/pic/rose/xin.png"
+      style="position: absolute; left: 200px; top: 100px; animation: 1.5s linear 0.25s infinite normal none running heart11;">
+    </image>
+    <image src="https://s2.kagirl.cn/template/pic/rose/xin.png"
+      style="position: absolute; left: 200px; top: 100px; animation: 1.5s linear 0.55s infinite normal none running heart12;">
+    </image>
+    <image src="https://s2.kagirl.cn/template/pic/rose/xin.png"
+      style="position: absolute; left: 200px; top: 100px; animation: 1.5s linear 0s infinite normal none running heart13;">
+    </image>
+    <image src="https://s2.kagirl.cn/template/pic/rose/xin.png"
+      style="position: absolute; left: 200px; top: 100px; animation: 1.5s linear 1.15s infinite normal none running heart14;">
+    </image>
+    <image src="https://s2.kagirl.cn/template/pic/rose/xin.png"
+      style="position: absolute; left: 200px; top: 100px; animation: 1.5s linear 1.15s infinite normal none running heart15;">
+    </image>
+    <image src="https://s2.kagirl.cn/template/pic/rose/xin.png"
+      style="position: absolute; left: 200px; top: 100px; animation: 1.5s linear 1.25s infinite normal none running heart16;">
+    </image>
+    <image src="https://s2.kagirl.cn/template/pic/rose/xin.png"
+      style="position: absolute; left: 200px; top: 100px; animation: 1.5s linear 0.9s infinite normal none running heart17;">
+    </image>
+    <image src="https://s2.kagirl.cn/template/pic/rose/xin.png"
+      style="position: absolute; left: 200px; top: 100px; animation: 1.5s linear 0.8s infinite normal none running heart18;">
+    </image>
+    <image src="https://s2.kagirl.cn/template/pic/rose/xin.png"
+      style="position: absolute; left: 200px; top: 100px; animation: 1.5s linear 0.45s infinite normal none running heart19;">
+    </image>
+  </view>
+
+  <view id="pagetitle"
+    style="position: absolute; top: 220rpx; left: 100rpx; opacity: 0; width: 323px; height: 200px; {{pagetitle}}">
+    <image mode="widthFix" style="position:absolute;left:15px;top:-45px"
+      src="https://s1.kagirl.cn/template/pic/rose/wenzidi.png">
+    </image>
+    <image mode="widthFix" style="position:absolute;left:15px;top:153px;-webkit-transform: scale(1,-1)"
+      src="https://s1.kagirl.cn/template/pic/rose/wenzidi.png"></image>
+    <view id="titlediv"
+      style="position: absolute; width: 288px; height: 150px; top: 22px; left: 17px; overflow: hidden; display: table; clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); {{titlediv}}">
+      <view id="titlecontent"
+        style="width:288px;height:150px;vertical-align:middle;display:table-cell;text-align:center;font-size:26px;line-height:34px;color:#fff;">
+        想你，想你！亲爱的，白天想你，晚上想你，今天特别想你！</view>
+    </view>
+  </view>
+</view>
+
+<view wx:for="{{imageURLList}}" class="cache-img">
+  <image src="{{item}}"></image>
+</view>

happyphoto/rose/rose.wxss

@@ -0,0 +1,632 @@
+/* temp1/rose/rose.wxss */
+#container {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  overflow: hidden
+}
+
+#container>view,
+#container>image {
+  position: absolute
+}
+
+.meigui1 {
+  bottom: 0;
+  left: 0;
+  width: 228px;
+  height: 224px;
+  -webkit-transform-origin: 20% 100%;
+  -webkit-animation: meigui 2s ease-in-out infinite alternate
+}
+
+.meigui1_img {
+  width: 100%;
+  height: 100%;
+}
+
+.meigui2 {
+  bottom: 0;
+  left: 0;
+  width: 206px;
+  height: 361px;
+  -webkit-transform-origin: 20% 100%;
+  -webkit-animation: meigui 3s ease-in-out infinite alternate
+}
+
+.meigui2_img {
+  width: 100%;
+  height: 100%;
+}
+
+@-webkit-keyframes meigui {
+  from {
+    -webkit-transform: rotate(0)
+  }
+
+  to {
+    -webkit-transform: rotate(3deg)
+  }
+}
+
+.top_rose {
+  width: 100%;
+}
+
+.dian1 {
+  left: 175rpx;
+  bottom: 5%;
+  opacity: 0;
+  width: 524rpx;
+  height: 220rpx;
+  -webkit-animation: dian 4s 2s linear infinite
+}
+
+.dian2 {
+  left: 175rpx;
+  bottom: 5%;
+  width: 640rpx;
+  height: 228rpx;
+  -webkit-animation: dian 4s linear infinite
+}
+
+@-webkit-keyframes dian {
+  0% {
+    -webkit-transform: translate(0, 0);
+    opacity: 0
+  }
+
+  50% {
+    -webkit-transform: translate(0, -50px);
+    opacity: 1
+  }
+
+  100% {
+    -webkit-transform: translate(0, -100px);
+    opacity: 0
+  }
+}
+
+.yezi1 {
+  left: 22px;
+  top: 267px;
+  position: absolute;
+  width: 110rpx;
+  height: 110rpx;
+}
+
+.yezi2 {
+  left: 5px;
+  top: 129px;
+  position: absolute;
+  width: 240rpx;
+  height: 180rpx;
+}
+
+#potdiv {
+  width: 100%;
+  height: 300rpx;
+}
+
+#potdiv image {
+  width: 60rpx;
+  height: 60rpx;
+}
+
+@-webkit-keyframes pot {
+  0% {
+    opacity: 0
+  }
+
+  50% {
+    opacity: .6
+  }
+
+  100% {
+    opacity: 0
+  }
+}
+
+.xin1 {
+  left: 100rpx;
+  top: 120rpx;
+  width: 60rpx;
+  height: 60rpx;
+  -webkit-transform: rotate(-40deg);
+  -webkit-animation: xin1 2s linear infinite alternate
+}
+
+.xin2 {
+  left: 138rpx;
+  top: 120rpx;
+  width: 40rpx;
+  height: 40rpx;
+  -webkit-transform: rotate(-30deg);
+  -webkit-animation: xin2 2s linear infinite alternate
+}
+
+.xin3 {
+  left: 340rpx;
+  top: 180rpx;
+  width: 48rpx;
+  height: 43rpx;
+  -webkit-transform: rotate(13deg);
+  -webkit-animation: xin3 2s linear infinite alternate
+}
+
+.xin4 {
+  right: 50rpx;
+  top: 160rpx;
+  width: 66rpx;
+  height: 66rpx;
+  -webkit-transform: rotate(-13deg);
+  -webkit-animation: fadeout 2s linear infinite alternate
+}
+
+.xin9 {
+  right: 100rpx;
+  top: 120rpx;
+  width: 94rpx;
+  height: 88rpx;
+  -webkit-transform: rotate(-13deg)
+}
+
+.xin5 {
+  left: 400rpx;
+  top: 740rpx;
+  width: 55rpx;
+  height: 55rpx;
+  -webkit-transform: rotate(0);
+  -webkit-animation: xin5 2s linear infinite alternate
+}
+
+.xin6 {
+  left: 435rpx;
+  top: 760rpx;
+  width: 35rpx;
+  height: 35rpx;
+  -webkit-transform: rotate(11deg);
+  -webkit-animation: xin6 2s linear infinite alternate
+}
+
+.xin7 {
+  left: 550rpx;
+  top: 760rpx;
+  width: 30rpx;
+  height: 30rpx;
+  -webkit-transform: rotate(0);
+  -webkit-animation: fade1 2s linear infinite alternate
+}
+
+.xin8 {
+  left: 680rpx;
+  top: 740rpx;
+  width: 35rpx;
+  height: 35rpx;
+  -webkit-transform: rotate(-18deg);
+  -webkit-animation: fadeout 2s linear infinite alternate
+}
+
+.xin10 {
+  right: 20rpx;
+  bottom: 200rpx;
+  width: 94rpx;
+  height: 94rpx;
+  -webkit-transform: rotate(-18deg)
+}
+
+@-webkit-keyframes xin1 {
+  from {
+    -webkit-transform: translate(0, 0) rotate(-40deg)
+  }
+
+  to {
+    -webkit-transform: translate(-5px, -5px) rotate(-40deg)
+  }
+}
+
+@-webkit-keyframes xin2 {
+  from {
+    -webkit-transform: translate(0, 0) rotate(-30deg)
+  }
+
+  to {
+    -webkit-transform: translate(-5px, -5px) rotate(-30deg)
+  }
+}
+
+@-webkit-keyframes xin3 {
+  from {
+    -webkit-transform: translate(0, 0) rotate(13deg)
+  }
+
+  to {
+    -webkit-transform: translate(3px, -4px) rotate(13deg)
+  }
+}
+
+@-webkit-keyframes fadeout {
+  0% {
+    opacity: 1
+  }
+
+  50% {
+    opacity: 0
+  }
+
+  100% {
+    opacity: 0
+  }
+}
+
+@-webkit-keyframes fade1 {
+  from {
+    opacity: 1
+  }
+
+  to {
+    opacity: .6
+  }
+}
+
+@-webkit-keyframes xin5 {
+  from {
+    -webkit-transform: translate(0, 0) rotate(0)
+  }
+
+  to {
+    -webkit-transform: translate(0, -5px) rotate(0)
+  }
+}
+
+@-webkit-keyframes xin6 {
+  from {
+    -webkit-transform: translate(0, 0) rotate(11deg)
+  }
+
+  to {
+    -webkit-transform: translate(0, -5px) rotate(11deg)
+  }
+}
+
+.xin11 {
+  left: 58px;
+  top: 459px;
+  width: 60rpx;
+  height: 60rpx;
+  opacity: 0;
+  -webkit-animation: xin11 4s linear infinite
+}
+
+@-webkit-keyframes xin11 {
+  0% {
+    -webkit-transform: translate(0, 0) rotate(0);
+    opacity: 0
+  }
+
+  50% {
+    -webkit-transform: translate(0, -60px) rotate(15deg);
+    opacity: 1
+  }
+
+  100% {
+    -webkit-transform: translate(0, -120px) rotate(30deg);
+    opacity: 0
+  }
+}
+
+.xin12 {
+  left: 549rpx;
+  top: 657rpx;
+  width: 60rpx;
+  height: 60rpx;
+  -webkit-animation: xin12 4s linear infinite
+}
+
+@-webkit-keyframes xin12 {
+  0% {
+    -webkit-transform: translate(0, 0) rotate(-10deg);
+    opacity: 0
+  }
+
+  50% {
+    -webkit-transform: translate(0, -50px) rotate(5deg);
+    opacity: 1
+  }
+
+  100% {
+    -webkit-transform: translate(0, -100px) rotate(20deg);
+    opacity: 0
+  }
+}
+
+.xin13 {
+  left: 669rpx;
+  top: 607rpx;
+  width: 60rpx;
+  height: 60rpx;
+  opacity: 0;
+  -webkit-animation: xin13 3s linear infinite
+}
+
+@-webkit-keyframes xin13 {
+  0% {
+    -webkit-transform: translate(0, 0) rotate(10deg);
+    opacity: 0
+  }
+
+  50% {
+    -webkit-transform: translate(0, -50px) rotate(-5deg);
+    opacity: 1
+  }
+
+  100% {
+    -webkit-transform: translate(0, -100px) rotate(-20deg);
+    opacity: 0
+  }
+}
+
+.pot {
+  left: 239px;
+  top: 563px;
+  width: 60rpx;
+  height: 60rpx;
+  -webkit-animation: potting 2s linear infinite
+}
+
+@-webkit-keyframes potting {
+  0% {
+    opacity: 0
+  }
+
+  40% {
+    opacity: 1
+  }
+
+  48% {
+    opacity: .5
+  }
+
+  56% {
+    opacity: 1
+  }
+
+  64% {
+    opacity: .5
+  }
+
+  72% {
+    opacity: 1
+  }
+
+  100% {
+    opacity: 0
+  }
+}
+
+#xindiv {
+  width: 500rpx;
+  height: 400rpx;
+  top: 274rpx;
+  left: -100rpx;
+}
+
+#xindiv image {
+  width: 40rpx;
+  height: 34rpx;
+}
+
+@-webkit-keyframes myfadein {
+  from {
+    opacity: 0
+  }
+
+  to {
+    opacity: 1
+  }
+}
+
+@-webkit-keyframes titlein {
+  from {
+    -webkit-clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)
+  }
+
+  to {
+    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)
+  }
+}
+
+@-webkit-keyframes xinmove {
+  0% {
+    -webkit-transform: translate(0, 0);
+    opacity: 0
+  }
+
+  10% {
+    -webkit-transform: translate(30px, 0);
+    opacity: 1
+  }
+
+  90% {
+    -webkit-transform: translate(250px, 0);
+    opacity: 1
+  }
+
+  100% {
+    -webkit-transform: translate(280px, 0);
+    opacity: 0
+  }
+}
+
+@-webkit-keyframes titleout {
+  from {
+    -webkit-transform: translate(0, 0) scale(1, 1);
+    opacity: 1
+  }
+
+  to {
+    -webkit-transform: translate(0, 100px) scale(1, 0);
+    opacity: 0
+  }
+}
+
+.div {
+  opacity: 0;
+  width: 80%;
+  height: 100%;
+  left: 10%;
+  top: 20%;
+}
+
+.div .page {
+  width: 100%;
+  border: 4px solid #fff;
+  box-shadow: 8px 8px 10px rgba(28, 29, 33, .3)
+}
+
+.page_border {
+  height: 100%;
+  width: 100%;
+  border: 4px solid #fff;
+  box-shadow: 8px 8px 10px rgba(28, 29, 33, .3)
+}
+
+@-webkit-keyframes div_in {
+  0% {
+    -webkit-transform: translate(0, -280px) rotate(-12deg);
+    opacity: 0
+  }
+
+  40% {
+    -webkit-transform: translate(0, -10px) rotate(-2deg);
+    opacity: 1
+  }
+
+  80% {
+    -webkit-transform: translate(0, 10px) rotate(2deg);
+    opacity: 1;
+    -webkit-animation-timing-function: ease-in
+  }
+
+  100% {
+    -webkit-transform: translate(0, 250px) rotate(8deg);
+    opacity: 0
+  }
+}
+
+.wordspan {
+  width: 50%;
+  right: 3%;
+  position: absolute;
+  color: #fff;
+  font-size: 25px;
+  text-align: center;
+  bottom: 7px;
+  text-shadow: 1px 1px 2px #000;
+  font-weight: 700
+}
+
+.guang1 {
+  position: absolute;
+  left: 169px;
+  top: 43px;
+  width: 60rpx;
+  height: 60rpx;
+  -webkit-transform-origin: 50% 40%;
+  -webkit-animation: guang1 2s linear infinite
+}
+
+.guang2 {
+  position: absolute;
+  left: 188px;
+  top: 51px;
+  width: 60rpx;
+  height: 60rpx;
+  -webkit-transform-origin: 50% 40%;
+  -webkit-animation: guang1 2s linear infinite
+}
+
+@-webkit-keyframes guang1 {
+  0% {
+    -webkit-transform: rotate(0);
+    opacity: 0
+  }
+
+  20% {
+    -webkit-transform: rotate(0);
+    opacity: 1
+  }
+
+  50% {
+    -webkit-transform: rotate(90deg);
+    opacity: 0
+  }
+
+  100% {
+    opacity: 0
+  }
+}
+
+.guang3 {
+  position: absolute;
+  left: 80px;
+  top: 10px;
+  width: 60rpx;
+  height: 60rpx;
+  -webkit-transform-origin: 50% 40%;
+  -webkit-animation: guang3 2s 1s linear infinite
+}
+
+@-webkit-keyframes guang3 {
+  0% {
+    -webkit-transform: rotate(0);
+    opacity: 0
+  }
+
+  20% {
+    -webkit-transform: rotate(0);
+    opacity: 1
+  }
+
+  35% {
+    -webkit-transform: rotate(45deg);
+    opacity: .6
+  }
+
+  50% {
+    -webkit-transform: rotate(0);
+    opacity: 0
+  }
+
+  100% {
+    opacity: 0
+  }
+}
+
+#bg {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-image: url("https://s2.kagirl.cn/template/pic/rose/newbg.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center
+}
+
+#pagetitle image {
+  width: 500rpx;
+}
+
+.cache-img {
+  position: absolute;
+  top: -9999px;
+  left: -9999px;
+}
+
+.cache-img image {
+  position: absolute;
+  top: -9999px;
+  left: -9999px;
+  width: 100px;
+  height: 100px;
+}

happyphoto/sgjh2018/sgjh2018.js

@@ -0,0 +1,422 @@
+// temp1/sgjh2018/sgjh2018.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    // 背景音乐
+    bgmusic: {
+      music: null,
+      playing: false
+    },
+    ads: null,
+    hasLoadAdConfig: false,
+    photoIndex: 0,
+    templateName: 'moon',
+    imageURLList: [],
+    examplePhotos: [
+      'ac_2460671559696.jpeg',
+      'ac_2460671397292.jpeg',
+      'ac_2460671423996.jpeg',
+      'ac_2460671434336.jpeg',
+      'ac_2458360598401.jpeg',
+      'ac_2458361815785.jpeg',
+      'ac_2458360739795.jpeg',
+      'ac_2460671486941.jpeg',
+      'ac_2460671514759.jpeg',
+      'ac_2458362072039.jpeg',
+      'ac_2460671702912.jpeg',
+      'ac_2458363166102.jpeg',
+    ],
+
+    huhie: "",
+    shi: "",
+    guang: "",
+    jing: "",
+    hao: "",
+    title_bg: "",
+    sgjh: "",
+    xian1: "",
+    xian2: "",
+    xian3: "",
+    xian4: "",
+    titlecontent: "",
+    shuxian1: "",
+    shuxian2: "",
+    shuxian3: "",
+    title_quan1: "",
+    title_quan2: "",
+    title_quan3: "",
+    title_quan4: "",
+
+    timeouts: [],
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+    this.setData({
+      imageURLList: this.data.examplePhotos.map(item => {
+        return `https://novel-video.hongdes.cn/kawaalbum/${this.data.templateName}/example/${item}`
+      })
+    })
+    this.initAnimation()
+  },
+
+  initAnimation() {
+    const _this = this
+    this.setData({
+      photoIndex: 0
+    })
+    _this.setData({
+      huhie: "animation: hudie 6.7s 5.1s ease-out infinite both",
+      shi: "animation: guang 2.3s 0.3s ease-out both",
+      guang: "animation: guang 2.3s ease-out both",
+      jing: "animation: guang 1.9s 0.7s ease-out both",
+      hao: "animation: guang 2.1s 0.2s ease-out both",
+      title_bg: "animation: title_bgin 2.5s ease-out both",
+      sgjh: "animation: sgjhin 2.6s ease-out both",
+      xian1: "animation: xian1in 1.7s 0.1s ease-out both",
+      xian2: "animation: xian2in 1.8s 0.5s ease-out both",
+      xian3: "animation: xian3in 1.3s ease-out both",
+      xian4: "animation: xian3in 0.9s 0.5s ease-out both",
+      titlecontent: "animation: fadein 1.2s 0.4s ease-out both",
+      shuxian1: "animation: shuxianin 1.3s ease-out both",
+      shuxian2: "animation: shuxianin 1.3s ease-out both",
+      shuxian3: "animation: shuxianin 1.3s ease-out both",
+      title_quan1: "animation: title_quan1in 1s 0.7s ease-out both",
+      title_quan2: "animation: title_quan1in 1.6s ease-out both",
+      title_quan3: "animation: title_quan3in 1.6s 1.6s ease-out both",
+      title_quan4: "animation: title_quan3in 2.3s 1.6s ease-out both"
+    })
+    // _this.data.timeouts.push(setTimeout(function () {
+    //   _this.setData({
+    //     pagediv1: 'overflow: visible;',
+    //     pagediv2: 'overflow: visible;',
+    //     pagetitle1: 'animation: title_out 1.5s ease-in both',
+    //     pagetitle2: 'animation: daoying_out 1.5s ease-in both',
+    //   })
+    //   _this.data.timeouts.push(setTimeout(function () {
+    //     _this.show1()
+    //   }, 1500))
+    // }, 3000))
+  },
+
+  show1() {
+    const _this = this
+    if (this.data.photoIndex === this.data.examplePhotos.length - 1) {
+      // 图片轮询完重新开始
+      this.setData({
+        'photoIndex': 0
+      })
+    }
+    const imageURL = `https://novel-video.hongdes.cn/kawaalbum/${this.data.templateName}/example/${this.data.examplePhotos[this.data.photoIndex]}`
+    wx.getImageInfo({
+      src: imageURL,
+      success(res) {
+        const imageWidth = res.width
+        const imageHeight = res.height
+        let blockStyle = ''
+        if (imageWidth > imageHeight) {
+          //  横版图片
+          blockStyle = 'top:20%;'
+          _this.setData({
+            div1: 'display: block;animation: div1_in 3.5s ease-out both',
+            div1h: 'display:block',
+            ying1h: 'display:block',
+            div1v: 'display: none',
+            ying1v: 'display: none',
+            img1h: imageURL,
+            imgy1h: imageURL
+          })
+        } else {
+          // 竖版图片
+          blockStyle = 'top:10%;'
+          _this.setData({
+            div1: 'display: block;animation: div1_in 3.5s ease-out both',
+            div1v: 'display:block',
+            ying1v: 'display:block',
+            div1h: 'display: none',
+            ying1h: 'display: none',
+            img1v: imageURL,
+            imgy1v: imageURL
+          })
+        }
+
+        _this.data.timeouts.push(setTimeout(() => {
+          _this.setData({
+            'photoIndex': _this.data.photoIndex + 1
+          })
+          _this.show2()
+        }, 6000));
+      },
+      fail(err) {
+        console.error(err);
+      }
+    })
+  },
+
+  show2() {
+    const _this = this
+    if (this.data.photoIndex === this.data.examplePhotos.length - 1) {
+      // 图片轮询完重新开始
+      this.setData({
+        'photoIndex': 0
+      })
+    }
+    const imageURL = `https://novel-video.hongdes.cn/kawaalbum/${this.data.templateName}/example/${this.data.examplePhotos[this.data.photoIndex]}`
+    wx.getImageInfo({
+      src: imageURL,
+      success(res) {
+        const imageWidth = res.width
+        const imageHeight = res.height
+        let blockStyle = ''
+        if (imageWidth > imageHeight) {
+          //  横版图片
+          blockStyle = 'top:20%;'
+          _this.setData({
+            img2h: imageURL,
+            imgy2h: imageURL,
+            div1: 'animation: div1_out 2.5s ease-in both',
+          })
+          _this.data.timeouts.push(setTimeout(() => {
+            _this.setData({
+              div2v: 'display:none;animation:div2v_in 3s ease-out both',
+              ying2v: 'display:none;animation: div2vy_in 3s ease-out both',
+              div2h: 'display:block;animation: div2h_in 3s ease-out both',
+              ying2h: 'display:block;animation: ying2h_in 3s ease-out both'
+            })
+          }, 2500));
+        } else {
+          // 竖版图片
+          blockStyle = 'top:10%;'
+          _this.setData({
+            img2v: imageURL,
+            imgy2v: imageURL,
+            div1: 'animation: div1_out 2.5s ease-in both',
+          })
+          _this.data.timeouts.push(setTimeout(() => {
+            _this.setData({
+              div2v: 'display:block;animation:div2v_in 3s ease-out both',
+              ying2v: 'display:block;animation: div2vy_in 3s ease-out both',
+              div2h: 'display:none;animation: div2h_in 3s ease-out both',
+              ying2h: 'display:none;animation: ying2h_in 3s ease-out both'
+            })
+          }, 2500));
+        }
+        _this.setData({
+          div3: '',
+          con3h: '',
+          cony3h: '',
+          con3v: '',
+          cony3v: '',
+          div3h: '',
+          ying3h: '',
+          div3v: '',
+          ying3v: ''
+        })
+        _this.data.timeouts.push(setTimeout(() => {
+          _this.setData({
+            'photoIndex': _this.data.photoIndex + 1
+          })
+          _this.show3()
+        }, 10000));
+      },
+      fail(err) {
+        console.error(err);
+      }
+    })
+  },
+
+  show3() {
+    const _this = this
+    if (this.data.photoIndex === this.data.examplePhotos.length - 1) {
+      // 图片轮询完重新开始
+      this.setData({
+        'photoIndex': 0
+      })
+    }
+    const imageURL = `https://novel-video.hongdes.cn/kawaalbum/${this.data.templateName}/example/${this.data.examplePhotos[this.data.photoIndex]}`
+    wx.getImageInfo({
+      src: imageURL,
+      success(res) {
+        const imageWidth = res.width
+        const imageHeight = res.height
+        let blockStyle = ''
+        if (imageWidth > imageHeight) {
+          //  横版图片
+          blockStyle = 'top:20%;'
+          _this.setData({
+            img3h: imageURL,
+            imgy3h: imageURL,
+            div2v: 'animation: div2v_out 2.5s ease-in both',
+            ying2v: 'animation: div2vy_out 2.5s ease-in both',
+            div2h: 'animation: div2h_out 2.5s ease-in both',
+            ying2h: 'animation: ying2h_out 2.5s ease-in both',
+            div3v: 'display:none;animation: div2h_in 4s ease-out both',
+            ying3v: 'display:none;animation: ying2h_in 4s ease-out both',
+            div3h: 'display:block;animation: div2v_in 4s ease-out both',
+            ying3h: 'display:block;animation: div2vy_in 4s ease-out both',
+            div3: 'animation: div3_in 4s ease-out both',
+          })
+        } else {
+          // 竖版图片
+          blockStyle = 'top:10%;'
+          _this.setData({
+            img3v: imageURL,
+            imgy3v: imageURL,
+            div2v: 'animation: div2v_out 2.5s ease-in both',
+            ying2v: 'animation: div2vy_out 2.5s ease-in both',
+            div2h: 'animation: div2h_out 2.5s ease-in both',
+            ying2h: 'animation: ying2h_out 2.5s ease-in both',
+            div3h: 'display:none;animation: div2h_in 4s ease-out both',
+            ying3h: 'display:none;animation: ying2h_in 4s ease-out both',
+            div3v: 'display:block;animation: div2v_in 4s ease-out both',
+            ying3v: 'display:block;animation: div2vy_in 4s ease-out both',
+            div3: 'animation: div3_in 4s ease-out both',
+          })
+        }
+        _this.data.timeouts.push(setTimeout(() => {
+          _this.setData({
+            'photoIndex': _this.data.photoIndex + 1
+          })
+          _this.show4()
+        }, 8000));
+      },
+      fail(err) {
+        console.error(err);
+      }
+    })
+  },
+  show4() {
+    const _this = this
+    if (this.data.photoIndex === this.data.examplePhotos.length - 1) {
+      // 图片轮询完重新开始
+      this.setData({
+        'photoIndex': 0
+      })
+    }
+    const imageURL = `https://novel-video.hongdes.cn/kawaalbum/${this.data.templateName}/example/${this.data.examplePhotos[this.data.photoIndex]}`
+    wx.getImageInfo({
+      src: imageURL,
+      success(res) {
+        const imageWidth = res.width
+        const imageHeight = res.height
+        let blockStyle = ''
+        if (imageWidth > imageHeight) {
+          //  横版图片
+          blockStyle = 'top:20%;'
+          _this.setData({
+            div1h: 'display:block',
+            ying1h: 'display:block',
+            div1v: 'display: none',
+            ying1v: 'display: none',
+            img1h: imageURL,
+            imgy1h: imageURL,
+          })
+        } else {
+          // 竖版图片
+          blockStyle = 'top:10%;'
+          _this.setData({
+            div1v: 'display:block',
+            ying1v: 'display:block',
+            div1h: 'display: none',
+            ying1h: 'display: none',
+            img1v: imageURL,
+            imgy1v: imageURL,
+          })
+        }
+        _this.setData({
+          con3h: 'animation: div3h_out 3s ease-in both',
+          cony3h: 'animation:ying3h_out 3s ease-in both',
+          con3v: 'animation: div3h_out 3s ease-in both',
+          cony3v: 'animation: ying3h_out 3s ease-in both',
+          div1: 'animation: div1_in 3.5s 2.5s ease-out both',
+        })
+        _this.data.timeouts.push(setTimeout(() => {
+          _this.setData({
+            'photoIndex': _this.data.photoIndex + 1
+          })
+          _this.show2()
+        }, 10000));
+      },
+      fail(err) {
+        console.error(err);
+      }
+    })
+  },
+
+  /**
+ * 播放音乐
+ */
+  initBgMusic() {
+    let _this = this
+    if (!app.globalData.audioContext) {
+      app.globalData.audioContext = wx.createInnerAudioContext()
+    }
+    // obeyMuteSwitch（仅在 iOS 生效）是否遵循静音开关，设置为 false 之后，即使是在静音模式下，也能播放声音
+    wx.setInnerAudioOption({
+      obeyMuteSwitch: false
+    })
+    // 设置音乐循环
+    app.globalData.audioContext.loop = true
+    // 监听音乐播放
+    app.globalData.audioContext.onPlay(() => {
+      _this.setData({
+        'bgmusic.playing': true
+      })
+      console.log('music play', _this.data.bgmusic.playing)
+    })
+    // 监听音乐暂停
+    app.globalData.audioContext.onPause(() => {
+      console.log('music pause')
+      _this.setData({
+        'bgmusic.playing': false
+      })
+    })
+    app.globalData.audioContext.src = this.data.bgmusic.music.url
+    app.globalData.audioContext.play()
+  },
+
+  /**
+   * 音乐播放按钮
+   */
+  musicPlayTap() {
+    app.globalData.audioContext.paused ? app.globalData.audioContext.play() : app.globalData.audioContext.pause()
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+    this.clearTimeoutTask()
+  },
+
+  // 清除定时任务
+  clearTimeoutTask() {
+    this.data.timeouts.forEach(timeout => clearTimeout(timeout));
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

happyphoto/sgjh2018/sgjh2018.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

happyphoto/sgjh2018/sgjh2018.wxml

@@ -0,0 +1,120 @@
+<view id="container">
+  <navigator open-type="navigateBack" style="position: fixed;top: 60rpx; left: 30rpx;color:#ffffff;z-index: 999">
+    <image src="/assets/images/icons/icon-back-white.png" style="width: 50rpx;height: 50rpx;"></image>
+  </navigator>
+  <view id="bg"></view>
+  <view id="bg1"></view>
+
+
+  <view id="yuan1">
+    <image id="yuan1_img" src="https://s2.kagirl.cn/template/pic/sgjh20182/yuan.png"></image>
+  </view>
+  <view id="yuan2">
+    <image id="yuan2_img" src="https://s2.kagirl.cn/template/pic/sgjh20182/yuan.png"></image>
+  </view>
+  <image id="yuan3" src="https://s2.kagirl.cn/template/pic/sgjh20182/yuan.png"></image>
+
+  <image id="dian1" src="https://s1.kagirl.cn/template/pic/sgjh20182/dian1.png"></image>
+  <image id="dian2" src="https://s2.kagirl.cn/template/pic/sgjh20182/dian2.png"></image>
+  <image id="dian4" src="https://s2.kagirl.cn/template/pic/sgjh20182/dian2.png"></image>
+  <image id="dian3" src="https://s1.kagirl.cn/template/pic/sgjh20182/dian1.png"></image>
+
+  <view id="huhie" style="{{huhie}}">
+    <view class="die_content">
+      <image class="die_left" src="https://s1.kagirl.cn/template/pic/sgjh20182/die1.png"></image>
+      <image class="die_shen" src="https://s2.kagirl.cn/template/pic/sgjh20182/dieshen.png"></image>
+      <image class="die_right" src="https://s1.kagirl.cn/template/pic/sgjh20182/die2.png"></image>
+    </view>
+  </view>
+
+  <view id="pagetitle">
+    <image id="title_bg" mode="widthFix" src="https://s2.kagirl.cn/template/pic/sgjh20182/title_bg.png"
+      style="{{title_bg}}"></image>
+    <image id="sgjh" mode="widthFix" src="https://s1.kagirl.cn/template/pic/sgjh20182/sgjh.png" style="{{sgjh}}">
+    </image>
+
+    <!-- <image id="xian1" src="https://s2.kagirl.cn/template/pic/sgjh20182/xian.png" style="{{xian1}}"></image>
+    <image id="xian2" src="https://s2.kagirl.cn/template/pic/sgjh20182/xian.png" style="{{xian2}}"></image>
+    <image id="xian3" src="https://s2.kagirl.cn/template/pic/sgjh20182/xian.png" style="{{xian3}}"></image>
+    <image id="xian4" src="https://s2.kagirl.cn/template/pic/sgjh20182/xian.png" style="{{xian4}}"></image> -->
+
+    <view class="titletable">
+      <view id="titlecontent" style="{{titlecontent}}">相遇皆因有缘</view>
+
+      <view id="shuxian1" class="shuxian" style="{{shuxian1}}">
+      </view>
+      <view id="shuxian2" class="shuxian" style="{{shuxian2}}">
+      </view>
+      <view id="shuxian3" class="shuxian" style="{{shuxian3}}">
+      </view>
+
+    </view>
+
+    <!-- <image id="title_quan1" src="https://s1.kagirl.cn/template/pic/sgjh20182/quan.png" style="{{title_quan1}}"></image>
+    <image id="title_quan2" src="https://s1.kagirl.cn/template/pic/sgjh20182/quan.png" style="{{title_quan2}}"></image>
+    <image id="title_quan3" src="https://s1.kagirl.cn/template/pic/sgjh20182/quan.png" style="{{title_quan3}}"></image>
+    <image id="title_quan4" src="https://s1.kagirl.cn/template/pic/sgjh20182/quan.png" style="{{title_quan4}}"></image> -->
+
+  </view>
+
+  <!-- <view id="page1_ctn" class="page_ctn"
+    style="width: 436px; height: 296.14px; top: 229.43px; left: 32px; animation: 5s cubic-bezier(0, 0, 0.67, 0.96) 0s 1 normal both running page1;">
+    <view id="page1" class="page"
+      style="width: 420px; height: 280.14px; background-size: 420px 280.14px; background-image: url(&quot;https://s1pic.kagirl.cn/ac_10133440474821830?imageMogr2/auto-orient/thumbnail/1000x/&quot;); background-repeat: no-repeat;">
+      <span id="word1" class="showwords"></span>
+    </view>
+  </view>
+
+  <view id="page2_ctn" class="page_ctn" style="width: 436px; height: 294.88px; top: 230.06px; left: 32px;">
+    <view id="page2" class="page"
+      style="width: 420px; height: 278.88px; background-size: 420px 278.88px; background-image: url(&quot;https://s1pic.kagirl.cn/ac_10133439895218368?imageMogr2/auto-orient/thumbnail/1000x/&quot;); background-repeat: no-repeat;">
+      <span id="word2" class="showwords"></span>
+    </view>
+  </view>
+
+  <view id="page3_ctn" class="page_ctn"
+    style="width: 436px; height: 316.3px; top: 219.35px; left: 32px; animation: 5s cubic-bezier(0, 0, 0.67, 0.96) 0s 1 normal both running page3;">
+    <view id="page3" class="page"
+      style="width: 420px; height: 300.3px; background-size: 420px 300.3px; background-image: url(&quot;https://s1pic.kagirl.cn/ac_10133440265098956?imageMogr2/auto-orient/thumbnail/1000x/&quot;); background-repeat: no-repeat;">
+      <span id="word3" class="showwords"></span>
+    </view>
+  </view> -->
+
+  <image id="bg_xia" mode="widthFix" src="https://s2.kagirl.cn/template/pic/sgjh20182/bg_xia.png"></image>
+
+  <!-- <view id="shi" style="{{shi}}">
+    <image id="shi_img" src="https://s1.kagirl.cn/template/pic/sgjh20182/shi.png"></image>
+  </view>
+  <view id="guang" style="{{guang}}">
+    <image id="guang_img" src="https://s2.kagirl.cn/template/pic/sgjh20182/guang.png"></image>
+  </view>
+  <view id="jing" style="{{jing}}">
+    <image id="jing_img" src="https://s1.kagirl.cn/template/pic/sgjh20182/jing.png"></image>
+  </view>
+  <view id="hao" style="{{hao}}">
+    <image id="hao_img" src="https://s2.kagirl.cn/template/pic/sgjh20182/hao.png"></image>
+  </view> -->
+
+  <!-- <image id="quan1" src="https://s1.kagirl.cn/template/pic/sgjh20182/quan.png"></image>
+  <image id="quan2" src="https://s1.kagirl.cn/template/pic/sgjh20182/quan.png"></image>
+  <image id="quan3" src="https://s1.kagirl.cn/template/pic/sgjh20182/quan.png"></image>
+  <image id="quan4" src="https://s1.kagirl.cn/template/pic/sgjh20182/quan.png"></image>
+  <image id="quan5" src="https://s1.kagirl.cn/template/pic/sgjh20182/quan.png"></image>
+  <image id="quan6" src="https://s1.kagirl.cn/template/pic/sgjh20182/quan.png"></image>
+  <image id="quan7" src="https://s1.kagirl.cn/template/pic/sgjh20182/quan.png"></image>
+  <image id="quan8" src="https://s1.kagirl.cn/template/pic/sgjh20182/quan.png"></image>
+  <image id="quan9" src="https://s1.kagirl.cn/template/pic/sgjh20182/quan.png"></image>
+  <image id="quan10" src="https://s1.kagirl.cn/template/pic/sgjh20182/quan.png"></image>
+
+  <image id="quan11" src="https://s1.kagirl.cn/template/pic/sgjh20182/quan.png"></image>
+  <image id="quan12" src="https://s1.kagirl.cn/template/pic/sgjh20182/quan.png"></image>
+  <image id="quan13" src="https://s1.kagirl.cn/template/pic/sgjh20182/quan.png"></image>
+  <image id="quan14" src="https://s1.kagirl.cn/template/pic/sgjh20182/quan.png"></image>
+  <image id="quan15" src="https://s1.kagirl.cn/template/pic/sgjh20182/quan.png"></image>
+  <image id="quan16" src="https://s1.kagirl.cn/template/pic/sgjh20182/quan.png"></image>
+  <image id="quan17" src="https://s1.kagirl.cn/template/pic/sgjh20182/quan.png"></image>
+  <image id="quan18" src="https://s1.kagirl.cn/template/pic/sgjh20182/quan.png"></image>
+  <image id="quan19" src="https://s1.kagirl.cn/template/pic/sgjh20182/quan.png"></image>
+  <image id="quan20" src="https://s1.kagirl.cn/template/pic/sgjh20182/quan.png"></image> -->
+
+</view>

happyphoto/sgjh2018/sgjh2018.wxss

@@ -0,0 +1,1051 @@
+#container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden
+}
+
+#container>view,
+#container>view {
+  position: absolute
+}
+
+.abs {
+  position: absolute
+}
+
+#bg {
+  width: 100%;
+  height: 100%;
+  background-image: url('https://s1.kagirl.cn/template/pic/sgjh20182/bg.jpg');
+  background-size: cover;
+  background-position: center;
+  position: absolute;
+  top: 0;
+  left: 0
+}
+
+#bg1 {
+  width: 100%;
+  height: 100%;
+  background-image: url('https://s1.kagirl.cn/template/pic/sgjh20182/bg1.png');
+  background-size: cover;
+  background-position: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  -webkit-animation: fadeout .8s ease-out infinite alternate both
+}
+
+#bg_xia {
+  position: absolute;
+  width: 100%;
+  bottom: 0;
+  left: 0
+}
+
+#yuan1 {
+  position: absolute;
+  top: -10px;
+  left: -10px;
+  -webkit-animation: fadeout .2s ease-out infinite alternate both
+}
+
+#yuan1_img {
+  width: 140rpx;
+  height: 140rpx;
+  -webkit-transform: rotateY(180deg);
+}
+
+#yuan2 {
+  position: absolute;
+  top: -25px;
+  right: 20px;
+  -webkit-animation: fadeout .2s ease-out infinite alternate both;
+}
+
+#yuan2_img {
+  width: 140rpx;
+  height: 140rpx;
+  -webkit-transform: rotate(-55deg);
+}
+
+#yuan3 {
+  position: absolute;
+  width: 160rpx;
+  height: 160rpx;
+  top: 300px;
+  right: 0;
+  -webkit-animation: fadeout .2s ease-out infinite alternate both;
+}
+
+#dian1 {
+  position: absolute;
+  top: 492px;
+  left: -12px;
+  width: 80rpx;
+  height: 80rpx;
+  -webkit-animation: scale_l .7s ease-out infinite alternate both;
+}
+
+#dian2 {
+  position: absolute;
+  top: 525px;
+  left: 10px;
+  width: 80rpx;
+  height: 80rpx;
+  -webkit-animation: fadeout 1s ease-out infinite alternate both
+}
+
+#dian3 {
+  position: absolute;
+  top: 512px;
+  left: 44px;
+  width: 80rpx;
+  height: 80rpx;
+  -webkit-animation: fadeout .5s step-star infinite alternate both
+}
+
+#dian4 {
+  position: absolute;
+  top: 700rpx;
+  left: 60rpx;
+  opacity: 0;
+  width: 80rpx;
+  height: 80rpx;
+  -webkit-animation: fadein .8s ease-out infinite alternate both
+}
+
+#quan1 {
+  position: absolute;
+  top: -20px;
+  left: 50px;
+  -webkit-animation: dian1 6s ease-out infinite both
+}
+
+#quan2 {
+  position: absolute;
+  top: -40px;
+  left: 80px;
+  -webkit-animation: dian2 5s 1s ease-out infinite both
+}
+
+#quan3 {
+  position: absolute;
+  top: -50px;
+  left: 110px;
+  -webkit-animation: dian1 7s ease-out infinite both
+}
+
+#quan4 {
+  position: absolute;
+  top: -20px;
+  left: 150px;
+  -webkit-animation: dian2 6s 1s ease-out infinite both
+}
+
+#quan5 {
+  position: absolute;
+  top: -30px;
+  left: 200px;
+  -webkit-animation: dian2 7s 2s ease-out infinite both
+}
+
+#quan6 {
+  position: absolute;
+  top: -40px;
+  left: 240px;
+  -webkit-animation: dian3 5s 1s ease-out infinite both
+}
+
+#quan7 {
+  position: absolute;
+  top: -50px;
+  left: 280px;
+  -webkit-animation: dian3 7s 2s ease-out infinite both
+}
+
+#quan8 {
+  position: absolute;
+  top: -60px;
+  left: 340px;
+  -webkit-animation: dian3 8s 1s ease-out infinite both
+}
+
+#quan9 {
+  position: absolute;
+  top: -30px;
+  left: 400px;
+  -webkit-animation: dian1 6s ease-out infinite both
+}
+
+#quan10 {
+  position: absolute;
+  top: -40px;
+  left: 450px;
+  -webkit-animation: dian2 8s ease-out infinite both
+}
+
+#quan11 {
+  position: absolute;
+  bottom: -5px;
+  left: 50px;
+  -webkit-animation: dian4 6s ease-out infinite both
+}
+
+#quan12 {
+  position: absolute;
+  bottom: -25px;
+  left: 80px;
+  -webkit-animation: dian6 5s 1s ease-out infinite both
+}
+
+#quan13 {
+  position: absolute;
+  bottom: -35px;
+  left: 110px;
+  -webkit-animation: dian4 7s ease-out infinite both
+}
+
+#quan14 {
+  position: absolute;
+  bottom: -5px;
+  left: 150px;
+  -webkit-animation: dian6 6s 1s ease-out infinite both
+}
+
+#quan15 {
+  position: absolute;
+  bottom: -15px;
+  left: 200px;
+  -webkit-animation: dian6 7s 2s ease-out infinite both
+}
+
+#quan16 {
+  position: absolute;
+  bottom: -25px;
+  left: 240px;
+  -webkit-animation: dian6 5s 1s ease-out infinite both
+}
+
+#quan17 {
+  position: absolute;
+  bottom: -35px;
+  left: 280px;
+  -webkit-animation: dian4 7s 2s ease-out infinite both
+}
+
+#quan18 {
+  position: absolute;
+  bottom: -45px;
+  left: 340px;
+  -webkit-animation: dian4 8s 1s ease-out infinite both
+}
+
+#quan19 {
+  position: absolute;
+  bottom: -15px;
+  left: 400px;
+  -webkit-animation: dian5 6s ease-out infinite both
+}
+
+#quan20 {
+  position: absolute;
+  bottom: -25px;
+  left: 450px;
+  -webkit-animation: dian5 8s ease-out infinite both
+}
+
+#huhie {
+  position: absolute;
+  top: 600px;
+  right: -120px;
+}
+
+.die_content {
+  width: 150px;
+  height: 70px;
+  -webkit-perspective: 500;
+  -webkit-transform: rotate(20deg) scale(.3)
+}
+
+.die_left {
+  position: absolute;
+  top: -70rpx;
+  left: -41px;
+  width: 220rpx;
+  height: 220rpx;
+  -webkit-transform-origin: 80% 90%;
+  -webkit-transform: rotateX(180deg);
+  -webkit-animation: die_left .8s linear infinite alternate both
+}
+
+.die_shen {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 180rpx;
+  height: 180rpx;
+}
+
+.die_right {
+  position: absolute;
+  top: -80rpx;
+  left: 110rpx;
+  width: 220rpx;
+  height: 220rpx;
+  -webkit-transform-origin: 0% 90%;
+  -webkit-transform: rotateX(180deg);
+  -webkit-animation: die_right .8s linear infinite alternate both
+}
+
+#shi {
+  position: absolute;
+  bottom: 147px;
+  left: 213px;
+  -webkit-transform: translateY(200px)
+}
+
+#guang {
+  position: absolute;
+  bottom: 134px;
+  left: 282px;
+  -webkit-transform: translateY(200px)
+}
+
+#jing {
+  position: absolute;
+  bottom: 162px;
+  left: 351px;
+  -webkit-transform: translateY(200px)
+}
+
+#hao {
+  position: absolute;
+  bottom: 125px;
+  left: 415px;
+  -webkit-transform: translateY(200px)
+}
+
+#shi_img {
+  -webkit-transform: scale(.7);
+  -webkit-animation: shi_img 1.6s ease-out infinite alternate both
+}
+
+#guang_img {
+  -webkit-transform: scale(.7);
+  -webkit-animation: guang_img 1.4s ease-out infinite alternate both
+}
+
+#jing_img {
+  -webkit-transform: scale(.7);
+  -webkit-animation: shi_img 1.3s ease-out infinite alternate both
+}
+
+#hao_img {
+  -webkit-transform: scale(.7);
+  -webkit-animation: guang_img 1.5s ease-out infinite alternate both
+}
+
+#title_bg {
+  width: 400rpx;
+  /* opacity: 0; */
+}
+
+#sgjh {
+  position: absolute;
+  top: -95rpx;
+  left: 260rpx;
+  /* opacity: 0; */
+  width: 100rpx;
+}
+
+#title_quan1 {
+  position: absolute;
+  top: -30px;
+  left: 20px;
+  opacity: 0
+}
+
+#title_quan2 {
+  position: absolute;
+  top: 335px;
+  right: -40px;
+  opacity: 0
+}
+
+#title_quan3 {
+  position: absolute;
+  top: 25px;
+  left: 100px;
+  opacity: 0
+}
+
+#title_quan4 {
+  position: absolute;
+  top: 155px;
+  right: -40px;
+  opacity: 0
+}
+
+#xian1 {
+  position: absolute;
+  top: 246px;
+  left: -60px;
+  opacity: 0
+}
+
+#xian2 {
+  position: absolute;
+  top: 290px;
+  left: -60px;
+  opacity: 0
+}
+
+#xian3 {
+  position: absolute;
+  top: -50px;
+  right: -95px;
+  opacity: 0
+}
+
+#xian4 {
+  position: absolute;
+  top: -6px;
+  right: -95px;
+  opacity: 0
+}
+
+#pagetitle {
+  position: absolute;
+  width: 500rpx;
+  height: 700rpx;
+  left: 200rpx;
+  top: 20%;
+}
+
+.titletable {
+  position: absolute;
+  width: 140px;
+  height: 260px;
+  top: 60rpx;
+  left: 10rpx;
+  display: table;
+  -webkit-writing-mode: vertical-lr
+}
+
+#titlecontent {
+  vertical-align: middle;
+  display: table-cell;
+  text-align: center;
+  font-size: 22px;
+  line-height: 28px;
+  color: #fff;
+  letter-spacing: 6px;
+  opacity: 0
+}
+
+.text_shu {
+  position: relative;
+  top: 0;
+  display: inline-block;
+  display: none;
+  width: 24px;
+  word-wrap: break-word
+}
+
+.shuxian {
+  position: absolute;
+  top: 5px;
+  left: 70px;
+  height: 96%;
+  width: 1px;
+  background-image: url(https://s1.kagirl.cn/template/pic/sgjh20182/shuxian.png);
+  background-size: 100% 100%;
+  display: none;
+  opacity: 0
+}
+
+#shuxian1 {
+  -webkit-transform-origin: bottom
+}
+
+#shuxian2 {
+  -webkit-transform-origin: top
+}
+
+#shuxian3 {
+  -webkit-transform-origin: bottom
+}
+
+@-webkit-keyframes fadein {
+  0% {
+    opacity: 0
+  }
+
+  100% {
+    opacity: 1
+  }
+}
+
+@-webkit-keyframes fadeout {
+  0% {
+    opacity: 1
+  }
+
+  100% {
+    opacity: 0
+  }
+}
+
+@-webkit-keyframes rotate_l {
+  0% {
+    -webkit-transform: rotate(0)
+  }
+
+  100% {
+    -webkit-transform: rotate(-3deg)
+  }
+}
+
+@-webkit-keyframes rotate_r {
+  0% {
+    -webkit-transform: rotate(0)
+  }
+
+  100% {
+    -webkit-transform: rotate(3deg)
+  }
+}
+
+@-webkit-keyframes translate_up {
+  0% {
+    -webkit-transform: translateY(0)
+  }
+
+  100% {
+    -webkit-transform: translateY(-10px)
+  }
+}
+
+@-webkit-keyframes translate_down {
+  0% {
+    -webkit-transform: translateY(0)
+  }
+
+  100% {
+    -webkit-transform: translateY(10px)
+  }
+}
+
+@-webkit-keyframes translate_l {
+  0% {
+    -webkit-transform: translateX(0)
+  }
+
+  100% {
+    -webkit-transform: translateX(-10px)
+  }
+}
+
+@-webkit-keyframes translate_r {
+  0% {
+    -webkit-transform: translateX(0)
+  }
+
+  100% {
+    -webkit-transform: translateX(10px)
+  }
+}
+
+@-webkit-keyframes translate_r {
+  0% {
+    -webkit-transform: translateX(0)
+  }
+
+  100% {
+    -webkit-transform: translateX(20px)
+  }
+}
+
+@-webkit-keyframes scale_s {
+  0% {
+    -webkit-transform: scale(1.1)
+  }
+
+  100% {
+    -webkit-transform: scale(1)
+  }
+}
+
+@-webkit-keyframes scale_l {
+  0% {
+    -webkit-transform: scale(1)
+  }
+
+  100% {
+    -webkit-transform: scale(1.1)
+  }
+}
+
+@-webkit-keyframes dian1 {
+  0% {
+    opacity: .7;
+    -webkit-transform: translateY(0) scale(.6)
+  }
+
+  20% {
+    opacity: .7
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(230px) scale(.6)
+  }
+}
+
+@-webkit-keyframes dian2 {
+  0% {
+    opacity: .7;
+    -webkit-transform: translateY(0) scale(.6)
+  }
+
+  20% {
+    opacity: .7
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(160px) scale(.6)
+  }
+}
+
+@-webkit-keyframes dian3 {
+  0% {
+    opacity: .7;
+    -webkit-transform: translateY(0) scale(1)
+  }
+
+  20% {
+    opacity: .7
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(200px) scale(1)
+  }
+}
+
+@-webkit-keyframes dian4 {
+  0% {
+    opacity: .7;
+    -webkit-transform: translateY(0) scale(.6)
+  }
+
+  20% {
+    opacity: .7
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(-230px) scale(.6)
+  }
+}
+
+@-webkit-keyframes dian5 {
+  0% {
+    opacity: .7;
+    -webkit-transform: translateY(0) scale(.6)
+  }
+
+  20% {
+    opacity: .7
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(-160px) scale(.6)
+  }
+}
+
+@-webkit-keyframes dian6 {
+  0% {
+    opacity: .7;
+    -webkit-transform: translateY(0) scale(1)
+  }
+
+  20% {
+    opacity: .7
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(-200px) scale(1)
+  }
+}
+
+@-webkit-keyframes guang {
+  0% {
+    -webkit-transform: translateY(200px)
+  }
+
+  65% {
+    -webkit-transform: translateY(-10px)
+  }
+
+  83% {
+    -webkit-transform: translateY(10px)
+  }
+
+  100% {
+    -webkit-transform: translateY(10px)
+  }
+}
+
+@-webkit-keyframes shi_img {
+  0% {
+    -webkit-transform: translateY(0) scale(.7)
+  }
+
+  100% {
+    -webkit-transform: translateY(-10px) scale(.7)
+  }
+}
+
+@-webkit-keyframes guang_img {
+  0% {
+    -webkit-transform: translateY(0) scale(.7)
+  }
+
+  100% {
+    -webkit-transform: translateY(10px) scale(.7)
+  }
+}
+
+@-webkit-keyframes die_left {
+  0% {
+    -webkit-transform: rotateX(0) rotate(0) skew(0deg, 0deg)
+  }
+
+  100% {
+    -webkit-transform: rotateX(180deg) rotate(-15deg) skew(0deg, 0deg)
+  }
+}
+
+@-webkit-keyframes die_right {
+  0% {
+    -webkit-transform: rotateX(0) rotate(0) skew(0deg, 0deg)
+  }
+
+  100% {
+    -webkit-transform: rotateX(180deg) rotate(-30deg) skew(34deg, 14deg)
+  }
+}
+
+@-webkit-keyframes hudie {
+  0% {
+    -webkit-transform: translate(0, 0)
+  }
+
+  100% {
+    -webkit-transform: translate(-680px, -500px)
+  }
+}
+
+@-webkit-keyframes title_bgin {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(1.1)
+  }
+
+  52% {
+    opacity: 1;
+    -webkit-transform: scale(1)
+  }
+
+  72% {
+    opacity: 1;
+    -webkit-transform: scale(1.04)
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: scale(1)
+  }
+}
+
+@-webkit-keyframes title_bgout {
+  0% {
+    opacity: 1;
+    -webkit-transform: scale(1)
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(1.5)
+  }
+}
+
+@-webkit-keyframes sgjhin {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate(0, -50px)
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translate(0, 0)
+  }
+}
+
+@-webkit-keyframes sgjhout {
+  0% {
+    opacity: 1;
+    -webkit-transform: translate(0, 0)
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate(50px, -50px)
+  }
+}
+
+@-webkit-keyframes xian1in {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate(-50px, 50px)
+  }
+
+  52% {
+    opacity: 1;
+    -webkit-transform: translate(0, 0)
+  }
+
+  72% {
+    opacity: 1;
+    -webkit-transform: translate(-10px, 10px)
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translate(0, 0)
+  }
+}
+
+@-webkit-keyframes xian1out {
+  0% {
+    opacity: 1;
+    -webkit-transform: translate(0, 0)
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate(-50px, 50px)
+  }
+}
+
+@-webkit-keyframes xian2in {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate(-50px, 50px)
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translate(0, 0)
+  }
+}
+
+@-webkit-keyframes xian3in {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate(50px, -50px)
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translate(0, 0)
+  }
+}
+
+@-webkit-keyframes xian3out {
+  0% {
+    opacity: 1;
+    -webkit-transform: translate(0, 0)
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate(50px, -50px)
+  }
+}
+
+@-webkit-keyframes title_quan1in {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(0)
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: scale(1)
+  }
+}
+
+@-webkit-keyframes title_quan3in {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(0)
+  }
+
+  50% {
+    opacity: 1;
+    -webkit-transform: scale(1.1)
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: scale(1)
+  }
+}
+
+@-webkit-keyframes title_quan1out {
+  0% {
+    opacity: 1;
+    -webkit-transform: translate(0, 0)
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate(-50px, -50px)
+  }
+}
+
+@-webkit-keyframes title_quan2out {
+  0% {
+    opacity: 1;
+    -webkit-transform: translate(0, 0)
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate(50px, 50px)
+  }
+}
+
+@-webkit-keyframes shuxianin {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(0)
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: scale(1)
+  }
+}
+
+.page_ctn {
+  position: absolute;
+  left: 40px;
+  border: solid 8px #fff;
+  box-shadow: 4px 4px 4px rgba(255, 255, 255, .1);
+  opacity: 0
+}
+
+.showwords {
+  font-size: 18px;
+  color: #fff;
+  position: absolute;
+  z-index: 1;
+  bottom: 20px;
+  left: 15%;
+  width: 70%;
+  line-height: 30px;
+  text-align: center;
+  text-shadow: 1px 1px 2px rgba(0, 0, 0, .4);
+  letter-spacing: 2px
+}
+
+@-webkit-keyframes page1 {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(1.2) rotateY(0) skew(0deg, 0deg)
+  }
+
+  15% {
+    opacity: 1;
+    -webkit-transform: scale(1) rotateY(0) skew(0deg, 0deg)
+  }
+
+  48% {
+    opacity: 1;
+    -webkit-transform: scale(1.05) rotateY(0) skew(0deg, 0deg)
+  }
+
+  85% {
+    opacity: 1;
+    -webkit-transform: scale(1) rotateY(0) skew(0deg, 0deg)
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(1) rotateY(180deg) skew(0deg, 0deg)
+  }
+}
+
+@-webkit-keyframes page2 {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(1) skew(0deg, 20deg) rotateY(-180deg)
+  }
+
+  15% {
+    opacity: 1;
+    -webkit-transform: scale(1) skew(0deg, 0deg) rotateY(0)
+  }
+
+  48% {
+    opacity: 1;
+    -webkit-transform: scale(1.05) skew(0deg, 0deg) rotateY(0)
+  }
+
+  85% {
+    opacity: 1;
+    -webkit-transform: scale(1) skew(0deg, 0deg) rotateY(0)
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(1) skew(0deg, 20deg) rotateY(180deg)
+  }
+}
+
+@-webkit-keyframes page3 {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(1) skew(0deg, 20deg) rotateY(180deg)
+  }
+
+  15% {
+    opacity: 1;
+    -webkit-transform: scale(1) skew(0deg, 0deg) rotateY(0)
+  }
+
+  48% {
+    opacity: 1;
+    -webkit-transform: scale(1.05) skew(0deg, 0deg) rotateY(0)
+  }
+
+  85% {
+    opacity: 1;
+    -webkit-transform: scale(1) skew(0deg, 0deg) rotateY(0)
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(1) skew(0deg, 20deg) rotateY(-180deg)
+  }
+}

happyphoto/yujiandongtian2022/yujiandongtian2022.js

@@ -0,0 +1,224 @@
+// temp1/yujiandongtian2022/yujiandongtian2022.js
+Page({
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    // 背景音乐
+    bgmusic: {
+      music: null,
+      playing: false
+    },
+    ads: null,
+    hasLoadAdConfig: false,
+    photoIndex: 0,
+    templateName: 'yujiandongtian2022',
+    imageURLList: [],
+    examplePhotos: [
+      'ac_317918916r8020.jpeg',
+      'ac_318236669r1319.jpeg',
+      'ac_317922035r8317.jpeg',
+      'ac_317922036r7219.jpeg',
+      'ac_317925006r4661.jpeg',
+      'ac_317924076r7251.jpeg',
+      'ac_317924074r7850.jpeg',
+      'ac_317924908r5638.jpeg',
+      'ac_317920724r9814.jpeg',
+      'ac_317919339r2625.jpeg',
+    ],
+    imageWidths: [],
+    imageHeights: [],
+    imageStyles: [],
+    page1BlockStyle: '',
+    page1Image: ``,
+    page2BlockStyle: '',
+    page2Image: ``,
+    page3BlockStyle: '',
+    page3Image: ``,
+
+    photo_load: "",
+    biaotiimg: "",
+    pagetitle: "",
+    bg1imgBox: "",
+    bg1img: "",
+    snowBox: "",
+    snow: "",
+    tabimgBox: "",
+    tabimg: "",
+    bg2imgBox: "",
+    bg2img: "",
+    kuangtopBox: "",
+    kuangbotBox: "",
+    snowhua: "",
+
+    timeouts: []
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+    this.setData({
+      imageURLList: this.data.examplePhotos.map(item => {
+        return `https://novel-video.hongdes.cn/kawaalbum/${this.data.templateName}/example/${item}`
+      })
+    })
+    this.initAnimation()
+  },
+
+  initAnimation() {
+    const _this = this
+    this.setData({
+      photoIndex: 0
+    })
+    _this.setData({
+      photo_load: "animation: fadeOut 0.5s linear both",
+      biaotiimg: "animation: biaotiimg_an 4.3s linear both",
+      pagetitle: "animation: pagetitle_an 5.4s 3.2s linear both",
+      bg1imgBox: "animation: bg1imgBox_an 8.8s linear both",
+      bg1img: "animation: bg1img_an 6.7s steps(1) both",
+      snowBox: "animation: fadeIn 0.9s linear both",
+      snow: "animation: snow_an 3.1s steps(1) infinite",
+    })
+    _this.data.timeouts.push(setTimeout(function () {
+      _this.setData({
+        tabimgBox: "animation: fadeIn 0.3s linear both",
+        tabimg: "animation: tabimg_an 1.2s steps(1) both"
+      })
+    }, 7700))
+    _this.data.timeouts.push(setTimeout(function () {
+      _this.setData({
+        bg2imgBox: "animation: fadeIn 0.9s linear both",
+        bg2img: "animation: bg2img_an 3.4s steps(1) infinite",
+        kuangtopBox: "animation: kuangtopBox_an 1.2s linear both",
+        kuangbotBox: "animation: kuangbotBox_an 1.2s linear both",
+      })
+      _this.showPage()
+    }, 8600))
+  },
+
+  showPage() {
+    const _this = this
+    if (this.data.photoIndex === this.data.examplePhotos.length - 1) {
+      // 图片轮询完重新开始
+      this.setData({
+        'photoIndex': 0
+      })
+    }
+    const pageIndex = this.data.photoIndex % 3 + 1
+    const imageURL = `https://novel-video.hongdes.cn/kawaalbum/${this.data.templateName}/example/${this.data.examplePhotos[this.data.photoIndex]}`
+    wx.getImageInfo({
+      src: imageURL,
+      success(res) {
+        const imageWidth = res.width
+        const imageHeight = res.height
+        let blockStyle = ''
+        if (imageWidth > imageHeight) {
+          //  横版图片
+          blockStyle = 'top:30%;'
+        } else {
+          // 竖版图片
+          blockStyle = 'top:10%;'
+        }
+        _this.setData({
+          snowhua: 'animation: snowhua_an 1.4s steps(1) both;',
+          [`page${pageIndex}BlockStyle`]: `${blockStyle}animation: showimg 7.9s linear both;`,
+          [`page${pageIndex}Image`]: imageURL,
+          [`page${pageIndex === 1 ? 2 : 1}BlockStyle`]: '',
+        })
+
+        _this.data.timeouts.push(setTimeout(function () {
+          _this.setData({
+            snowhua: '',
+          })
+        }, 3000))
+        _this.data.timeouts.push(setTimeout(() => {
+          _this.setData({
+            'photoIndex': _this.data.photoIndex + 1
+          })
+          _this.showPage()
+        }, 6800));
+        _this.data.timeouts.push(setTimeout(function () {
+          _this.setData({
+            [`page${pageIndex}BlockStyle`]: ``,
+          })
+        }, 8000))
+      },
+      fail(err) {
+        console.error(err);
+      }
+    })
+  },
+
+  /**
+ * 播放音乐
+ */
+  initBgMusic() {
+    let _this = this
+    if (!app.globalData.audioContext) {
+      app.globalData.audioContext = wx.createInnerAudioContext()
+    }
+    // obeyMuteSwitch（仅在 iOS 生效）是否遵循静音开关，设置为 false 之后，即使是在静音模式下，也能播放声音
+    wx.setInnerAudioOption({
+      obeyMuteSwitch: false
+    })
+    // 设置音乐循环
+    app.globalData.audioContext.loop = true
+    // 监听音乐播放
+    app.globalData.audioContext.onPlay(() => {
+      _this.setData({
+        'bgmusic.playing': true
+      })
+      console.log('music play', _this.data.bgmusic.playing)
+    })
+    // 监听音乐暂停
+    app.globalData.audioContext.onPause(() => {
+      console.log('music pause')
+      _this.setData({
+        'bgmusic.playing': false
+      })
+    })
+    app.globalData.audioContext.src = this.data.bgmusic.music.url
+    app.globalData.audioContext.play()
+  },
+
+  /**
+   * 音乐播放按钮
+   */
+  musicPlayTap() {
+    app.globalData.audioContext.paused ? app.globalData.audioContext.play() : app.globalData.audioContext.pause()
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+    this.clearTimeoutTask()
+  },
+
+  // 清除定时任务
+  clearTimeoutTask() {
+    this.data.timeouts.forEach(timeout => clearTimeout(timeout));
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

happyphoto/yujiandongtian2022/yujiandongtian2022.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

happyphoto/yujiandongtian2022/yujiandongtian2022.wxml

@@ -0,0 +1,54 @@
+<!--temp1/yujiandongtian2022/yujiandongtian2022.wxml-->
+<view id="container">
+  <navigator open-type="navigateBack" style="position: fixed;top: 60rpx; left: 30rpx;color:#ffffff;z-index: 999">
+    <image src="/assets/images/icons/icon-back-white.png" style="width: 50rpx;height: 50rpx;"></image>
+  </navigator>
+  <view id="opac_box">
+    <view id="bg1img_opac"></view>
+    <view id="snow_opac"></view>
+    <view id="tabimg_opac"></view>
+    <view id="bg2img_opac"></view>
+    <view id="snowhua_opac"></view>
+  </view>
+
+  <view id="bg1imgBox" style="{{bg1imgBox}}">
+    <view id="bg1img" style="{{bg1img}}"></view>
+  </view>
+  <view id="bg2imgBox" style="{{bg2imgBox}}">
+    <view id="bg2img" style="{{bg2img}}"></view>
+  </view>
+  <image src="https://s1.kagirl.cn/pic/yujiandongtian2022/biaoti.png" id="biaotiimg" style="{{biaotiimg}}"></image>
+
+  <view id="pagetitle" style="{{pagetitle}}">
+    <view id="titlecontent">冬来了，想你了！暖暖的问候送给你！</view>
+  </view>
+  <view class="page_block" id="page1_block" style="{{page1BlockStyle}}">
+    <image mode="widthFix" class="page" id="page1" src="{{page1Image}}"></image>
+  </view>
+  <view class="page_block" id="page2_block" style="{{page2BlockStyle}}">
+    <image mode="widthFix" class="page" id="page2" src="{{page2Image}}"></image>
+  </view>
+  <view class="page_block" id="page3_block" style="{{page3BlockStyle}}">
+    <image mode="widthFix" class="page" id="page3" src="{{page3Image}}"></image>
+  </view>
+
+  <view id="snowhuaBox">
+    <view id="snowhua" style="{{snowhua}}"></view>
+  </view>
+  <view id="kuangtopBox" style="{{kuangtopBox}}">
+    <image mode="widthFix" src="https://s1.kagirl.cn/pic/yujiandongtian2022/kuangtop.png" id="kuangtop"></image>
+  </view>
+  <view id="kuangbotBox" style="{{kuangbotBox}}">
+    <image mode="widthFix" src="https://s1.kagirl.cn/pic/yujiandongtian2022/kuangbot.png" id="kuangbot"></image>
+  </view>
+  <view id="tabimgBox" style="{{tabimgBox}}">
+    <view id="tabimg" style="{{tabimg}}"></view>
+  </view>
+  <view id="snowBox" style="{{snowBox}}">
+    <view id="snow" style="{{snow}}"></view>
+  </view>
+  <!-- <view id="photo_load" class="po" style="{{photo_load}}">
+    <view class="photo_load_1"></view>
+    <view class="photo_load_2" id="photoLoadPre">正在加载100%</view>
+  </view> -->
+</view>

happyphoto/yujiandongtian2022/yujiandongtian2022.wxss

@@ -0,0 +1,1970 @@
+/* temp1/yujiandongtian2022/yujiandongtian2022.wxss */
+#container view,
+#container image {
+  position: absolute
+}
+
+#container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden
+}
+
+.page_block {
+  width: 80%;
+  height: 100%;
+  left: 10%;
+  top: 10%;
+  opacity: 0;
+}
+
+.page {
+  width: 100%;
+}
+
+@-webkit-keyframes fadeIn {
+  0% {
+    opacity: 0
+  }
+
+  100% {
+    opacity: 1
+  }
+}
+
+@-webkit-keyframes fadeOut {
+  0% {
+    opacity: 1
+  }
+
+  100% {
+    opacity: 0
+  }
+}
+
+#photo_load {
+  margin: auto;
+  width: 170px;
+  height: 120px;
+  border-radius: 6px;
+  background: rgba(0, 0, 0, .75);
+  top: 0;
+  bottom: 50px;
+  left: 0;
+  right: 0
+}
+
+.photo_load_1 {
+  margin-top: 25px;
+  width: 100%;
+  height: 30px;
+  background: url(https://s2.kagirl.cn/template/pic/public/loading.gif) no-repeat center center;
+  background-size: 30px 30px
+}
+
+.photo_load_2 {
+  color: #fff;
+  font-family: Arial;
+  font-size: 18px;
+  text-align: center;
+  opacity: .75;
+  width: 100%;
+  top: 70px
+}
+
+#biaotiimg {
+  width: 700rpx;
+  height: 400rpx;
+  left: 18px;
+  top: 35%;
+  opacity: 0;
+}
+
+@-webkit-keyframes biaotiimg_an {
+  0% {
+    opacity: 0;
+    transform: translate(-100px, 500px) scale(.264) rotate(-64.2deg)
+  }
+
+  24.3% {
+    opacity: 1;
+    transform: translate(0, 0) scale(1) rotate(0)
+  }
+
+  48.5% {
+    opacity: 1;
+    transform: translate(0, 0) scale(1.04) rotate(0)
+  }
+
+  74.7% {
+    opacity: 1;
+    transform: translate(0, 0) scale(1) rotate(0)
+  }
+
+  100% {
+    opacity: 0;
+    transform: translate(0, 0) scale(1.356) rotate(0)
+  }
+}
+
+#pagetitle {
+  display: table;
+  text-align: center;
+  width: 300px;
+  height: 177px;
+  box-sizing: border-box;
+  left: 80rpx;
+  top: 38%;
+  opacity: 0
+}
+
+#titlecontent {
+  vertical-align: middle;
+  display: table-cell;
+  text-align: center;
+  word-break: break-all;
+  position: relative !important;
+  overflow: hidden;
+  font-size: 28px;
+  font-weight: 700;
+  width: 267px;
+  height: 106px;
+  color: #fff;
+  text-shadow: 0 0 5px #2836c1, 0 0 10px #2836c1, 0 0 10px #2836c1
+}
+
+@-webkit-keyframes pagetitle_an {
+  0% {
+    opacity: 0;
+    transform: translate(0, -200px) scale(.234) rotate(0)
+  }
+
+  19.8% {
+    opacity: 1;
+    transform: translate(0, 0) scale(1) rotate(0)
+  }
+
+  39.7% {
+    opacity: 1;
+    transform: translate(0, 0) scale(.949) rotate(0)
+  }
+
+  58.8% {
+    opacity: 1;
+    transform: translate(0, 0) scale(1) rotate(0)
+  }
+
+  79.4% {
+    opacity: 1;
+    transform: translate(0, 0) scale(.949) rotate(0)
+  }
+
+  100% {
+    opacity: 0;
+    transform: translate(0, 0) scale(1) rotate(0)
+  }
+}
+
+.wordspan {
+  font-size: 26px;
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin: auto;
+  width: 80%;
+  vertical-align: middle;
+  line-height: 35px;
+  text-align: center;
+  letter-spacing: 2px;
+  bottom: 20%;
+  color: #fff;
+  text-shadow: 0 0 5px #2836c1, 0 0 10px #2836c1, 0 0 10px #2836c1
+}
+
+#kuangtopBox {
+  width: 100%;
+  height: 268rpx;
+  top: -10px;
+  opacity: 0
+}
+
+@-webkit-keyframes kuangtopBox_an {
+  0% {
+    opacity: 0;
+    transform: translate(0, -80px)
+  }
+
+  100% {
+    opacity: 1;
+    transform: translate(0, 0)
+  }
+}
+
+#kuangtop {
+  width: 100%;
+  height: 268px;
+  -webkit-animation: kuangtop_an 1.8s linear infinite
+}
+
+@-webkit-keyframes kuangtop_an {
+  0% {
+    transform: translate(0, 0)
+  }
+
+  50% {
+    transform: translate(0, -8px)
+  }
+
+  100% {
+    transform: translate(0, 0)
+  }
+}
+
+#kuangbotBox {
+  width: 100%;
+  height: 600rpx;
+  bottom: -20rpx;
+  opacity: 0
+}
+
+@-webkit-keyframes kuangbotBox_an {
+  0% {
+    opacity: 0;
+    transform: translate(0, 80px)
+  }
+
+  100% {
+    opacity: 1;
+    transform: translate(0, 0)
+  }
+}
+
+#kuangbot {
+  width: 100%;
+  bottom: 0;
+  -webkit-animation: kuangbot_an 1.8s linear infinite
+}
+
+@-webkit-keyframes kuangbot_an {
+  0% {
+    transform: translate(0, 0)
+  }
+
+  50% {
+    transform: translate(0, 8px)
+  }
+
+  100% {
+    transform: translate(0, 0)
+  }
+}
+
+@-webkit-keyframes showimg {
+  0% {
+    opacity: 0;
+    transform: translate(0, 0) scale(.245)
+  }
+
+  14.3% {
+    opacity: 1;
+    transform: translate(0, 0) scale(1.036)
+  }
+
+  28.6% {
+    transform: translate(0, 0) scale(1)
+  }
+
+  42.8% {
+    transform: translate(0, 0) scale(1.036)
+  }
+
+  57.1% {
+    transform: translate(0, 0) scale(1)
+  }
+
+  71.9% {
+    transform: translate(0, 0) scale(1.036)
+  }
+
+  86.2% {
+    opacity: 1;
+    transform: translate(0, 0) scale(1)
+  }
+
+  100% {
+    opacity: 0;
+    transform: translate(0, 0) scale(1.412)
+  }
+}
+
+#bg1imgBox {
+  width: 100%;
+  height: 100%
+}
+
+@-webkit-keyframes bg1imgBox_an {
+
+  0%,
+  43.6% {
+    opacity: 1;
+    transform: scale(1.135)
+  }
+
+  98% {
+    opacity: 1
+  }
+
+  100% {
+    opacity: 0;
+    transform: scale(1)
+  }
+}
+
+#bg1img {
+  width: 100%;
+  height: 100%;
+  background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_001.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center
+}
+
+@keyframes bg1img_an {
+  0% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_001.png")
+  }
+
+  0.62% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_002.png")
+  }
+
+  1.24% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_003.png")
+  }
+
+  1.86% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_004.png")
+  }
+
+  2.48% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_005.png")
+  }
+
+  3.11% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_006.png")
+  }
+
+  3.73% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_007.png")
+  }
+
+  4.35% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_008.png")
+  }
+
+  4.97% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_009.png")
+  }
+
+  5.59% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_010.png")
+  }
+
+  6.21% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_011.png")
+  }
+
+  6.83% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_012.png")
+  }
+
+  7.45% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_013.png")
+  }
+
+  8.07% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_014.png")
+  }
+
+  8.70% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_015.png")
+  }
+
+  9.32% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_016.png")
+  }
+
+  9.94% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_017.png")
+  }
+
+  10.56% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_018.png")
+  }
+
+  11.18% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_019.png")
+  }
+
+  11.80% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_020.png")
+  }
+
+  12.42% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_021.png")
+  }
+
+  13.04% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_022.png")
+  }
+
+  13.66% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_023.png")
+  }
+
+  14.29% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_024.png")
+  }
+
+  14.91% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_025.png")
+  }
+
+  15.53% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_026.png")
+  }
+
+  16.15% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_027.png")
+  }
+
+  16.77% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_028.png")
+  }
+
+  17.39% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_029.png")
+  }
+
+  18.01% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_030.png")
+  }
+
+  18.63% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_031.png")
+  }
+
+  19.25% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_032.png")
+  }
+
+  19.88% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_033.png")
+  }
+
+  20.50% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_034.png")
+  }
+
+  21.12% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_035.png")
+  }
+
+  21.74% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_036.png")
+  }
+
+  22.36% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_037.png")
+  }
+
+  22.98% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_038.png")
+  }
+
+  23.60% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_039.png")
+  }
+
+  24.22% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_040.png")
+  }
+
+  24.84% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_041.png")
+  }
+
+  25.47% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_042.png")
+  }
+
+  26.09% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_043.png")
+  }
+
+  26.71% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_044.png")
+  }
+
+  27.33% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_045.png")
+  }
+
+  27.95% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_046.png")
+  }
+
+  28.57% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_047.png")
+  }
+
+  29.19% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_048.png")
+  }
+
+  29.81% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_049.png")
+  }
+
+  30.43% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_050.png")
+  }
+
+  31.06% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_051.png")
+  }
+
+  31.68% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_052.png")
+  }
+
+  32.30% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_053.png")
+  }
+
+  32.92% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_054.png")
+  }
+
+  33.54% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_055.png")
+  }
+
+  34.16% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_056.png")
+  }
+
+  34.78% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_057.png")
+  }
+
+  35.40% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_058.png")
+  }
+
+  36.02% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_059.png")
+  }
+
+  36.65% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_060.png")
+  }
+
+  37.27% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_061.png")
+  }
+
+  37.89% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_062.png")
+  }
+
+  38.51% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_063.png")
+  }
+
+  39.13% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_064.png")
+  }
+
+  39.75% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_065.png")
+  }
+
+  40.37% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_066.png")
+  }
+
+  40.99% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_067.png")
+  }
+
+  41.61% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_068.png")
+  }
+
+  42.24% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_069.png")
+  }
+
+  42.86% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_070.png")
+  }
+
+  43.48% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_071.png")
+  }
+
+  44.10% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_072.png")
+  }
+
+  44.72% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_073.png")
+  }
+
+  45.34% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_074.png")
+  }
+
+  45.96% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_075.png")
+  }
+
+  46.58% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_076.png")
+  }
+
+  47.20% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_077.png")
+  }
+
+  47.83% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_078.png")
+  }
+
+  48.45% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_079.png")
+  }
+
+  49.07% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_080.png")
+  }
+
+  49.69% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_081.png")
+  }
+
+  50.31% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_082.png")
+  }
+
+  50.93% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_083.png")
+  }
+
+  51.55% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_084.png")
+  }
+
+  52.17% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_085.png")
+  }
+
+  52.80% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_086.png")
+  }
+
+  53.42% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_087.png")
+  }
+
+  54.04% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_088.png")
+  }
+
+  54.66% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_089.png")
+  }
+
+  55.28% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_090.png")
+  }
+
+  55.90% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_091.png")
+  }
+
+  56.52% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_092.png")
+  }
+
+  57.14% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_093.png")
+  }
+
+  57.76% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_094.png")
+  }
+
+  58.39% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_095.png")
+  }
+
+  59.01% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_096.png")
+  }
+
+  59.63% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_097.png")
+  }
+
+  60.25% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_098.png")
+  }
+
+  60.87% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_099.png")
+  }
+
+  61.49% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_100.png")
+  }
+
+  62.11% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_101.png")
+  }
+
+  62.73% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_102.png")
+  }
+
+  63.35% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_103.png")
+  }
+
+  63.98% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_104.png")
+  }
+
+  64.60% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_105.png")
+  }
+
+  65.22% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_106.png")
+  }
+
+  65.84% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_107.png")
+  }
+
+  66.46% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_108.png")
+  }
+
+  67.08% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_109.png")
+  }
+
+  67.70% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_110.png")
+  }
+
+  68.32% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_111.png")
+  }
+
+  68.94% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_112.png")
+  }
+
+  69.57% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_113.png")
+  }
+
+  70.19% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_114.png")
+  }
+
+  70.81% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_115.png")
+  }
+
+  71.43% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_116.png")
+  }
+
+  72.05% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_117.png")
+  }
+
+  72.67% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_118.png")
+  }
+
+  73.29% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_119.png")
+  }
+
+  73.91% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_120.png")
+  }
+
+  74.53% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_121.png")
+  }
+
+  75.16% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_122.png")
+  }
+
+  75.78% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_123.png")
+  }
+
+  76.40% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_124.png")
+  }
+
+  77.02% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_125.png")
+  }
+
+  77.64% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_126.png")
+  }
+
+  78.26% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_127.png")
+  }
+
+  78.88% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_128.png")
+  }
+
+  79.50% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_129.png")
+  }
+
+  80.12% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_130.png")
+  }
+
+  80.75% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_131.png")
+  }
+
+  81.37% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_132.png")
+  }
+
+  81.99% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_133.png")
+  }
+
+  82.61% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_134.png")
+  }
+
+  83.23% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_135.png")
+  }
+
+  83.85% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_136.png")
+  }
+
+  84.47% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_137.png")
+  }
+
+  85.09% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_138.png")
+  }
+
+  85.71% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_139.png")
+  }
+
+  86.34% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_140.png")
+  }
+
+  86.96% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_141.png")
+  }
+
+  87.58% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_142.png")
+  }
+
+  88.20% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_143.png")
+  }
+
+  88.82% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_144.png")
+  }
+
+  89.44% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_145.png")
+  }
+
+  90.06% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_146.png")
+  }
+
+  90.68% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_147.png")
+  }
+
+  91.30% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_148.png")
+  }
+
+  91.93% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_149.png")
+  }
+
+  92.55% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_150.png")
+  }
+
+  93.17% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_151.png")
+  }
+
+  93.79% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_152.png")
+  }
+
+  94.41% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_153.png")
+  }
+
+  95.03% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_154.png")
+  }
+
+  95.65% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_155.png")
+  }
+
+  96.27% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_156.png")
+  }
+
+  96.89% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_157.png")
+  }
+
+  97.52% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_158.png")
+  }
+
+  98.14% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_159.png")
+  }
+
+  98.76% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_160.png")
+  }
+
+  100%,
+  99.38% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg1_161.png")
+  }
+}
+
+#snowBox {
+  width: 100%;
+  height: 100%;
+  opacity: 0
+}
+
+#snow {
+  width: 100%;
+  height: 100%;
+  background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_01.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center
+}
+
+@keyframes snow_an {
+  0% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_01.png")
+  }
+
+  1.33% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_02.png")
+  }
+
+  2.67% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_03.png")
+  }
+
+  4.00% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_04.png")
+  }
+
+  5.33% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_05.png")
+  }
+
+  6.67% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_06.png")
+  }
+
+  8.00% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_07.png")
+  }
+
+  9.33% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_08.png")
+  }
+
+  10.67% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_09.png")
+  }
+
+  12.00% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_10.png")
+  }
+
+  13.33% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_11.png")
+  }
+
+  14.67% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_12.png")
+  }
+
+  16.00% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_13.png")
+  }
+
+  17.33% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_14.png")
+  }
+
+  18.67% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_15.png")
+  }
+
+  20.00% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_16.png")
+  }
+
+  21.33% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_17.png")
+  }
+
+  22.67% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_18.png")
+  }
+
+  24.00% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_19.png")
+  }
+
+  25.33% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_20.png")
+  }
+
+  26.67% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_21.png")
+  }
+
+  28.00% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_22.png")
+  }
+
+  29.33% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_23.png")
+  }
+
+  30.67% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_24.png")
+  }
+
+  32.00% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_25.png")
+  }
+
+  33.33% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_26.png")
+  }
+
+  34.67% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_27.png")
+  }
+
+  36.00% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_28.png")
+  }
+
+  37.33% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_29.png")
+  }
+
+  38.67% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_30.png")
+  }
+
+  40.00% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_31.png")
+  }
+
+  41.33% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_32.png")
+  }
+
+  42.67% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_33.png")
+  }
+
+  44.00% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_34.png")
+  }
+
+  45.33% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_35.png")
+  }
+
+  46.67% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_36.png")
+  }
+
+  48.00% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_37.png")
+  }
+
+  49.33% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_38.png")
+  }
+
+  50.67% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_39.png")
+  }
+
+  52.00% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_40.png")
+  }
+
+  53.33% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_41.png")
+  }
+
+  54.67% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_42.png")
+  }
+
+  56.00% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_43.png")
+  }
+
+  57.33% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_44.png")
+  }
+
+  58.67% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_45.png")
+  }
+
+  60.00% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_46.png")
+  }
+
+  61.33% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_47.png")
+  }
+
+  62.67% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_48.png")
+  }
+
+  64.00% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_49.png")
+  }
+
+  65.33% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_50.png")
+  }
+
+  66.67% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_51.png")
+  }
+
+  68.00% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_52.png")
+  }
+
+  69.33% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_53.png")
+  }
+
+  70.67% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_54.png")
+  }
+
+  72.00% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_55.png")
+  }
+
+  73.33% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_56.png")
+  }
+
+  74.67% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_57.png")
+  }
+
+  76.00% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_58.png")
+  }
+
+  77.33% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_59.png")
+  }
+
+  78.67% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_60.png")
+  }
+
+  80.00% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_61.png")
+  }
+
+  81.33% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_62.png")
+  }
+
+  82.67% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_63.png")
+  }
+
+  84.00% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_64.png")
+  }
+
+  85.33% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_65.png")
+  }
+
+  86.67% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_66.png")
+  }
+
+  88.00% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_67.png")
+  }
+
+  89.33% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_68.png")
+  }
+
+  90.67% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_69.png")
+  }
+
+  92.00% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_70.png")
+  }
+
+  93.33% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_71.png")
+  }
+
+  94.67% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_72.png")
+  }
+
+  96.00% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_73.png")
+  }
+
+  97.33% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_74.png")
+  }
+
+  100%,
+  98.67% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sn_75.png")
+  }
+}
+
+#tabimgBox {
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+}
+
+#tabimg {
+  width: 100%;
+  height: 100%;
+  background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/tb_01.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+@keyframes tabimg_an {
+  0% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/tb_01.png")
+  }
+
+  3.45% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/tb_02.png")
+  }
+
+  6.90% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/tb_03.png")
+  }
+
+  10.34% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/tb_04.png")
+  }
+
+  13.79% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/tb_05.png")
+  }
+
+  17.24% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/tb_06.png")
+  }
+
+  20.69% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/tb_07.png")
+  }
+
+  24.14% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/tb_08.png")
+  }
+
+  27.59% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/tb_09.png")
+  }
+
+  31.03% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/tb_10.png")
+  }
+
+  34.48% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/tb_11.png")
+  }
+
+  37.93% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/tb_12.png")
+  }
+
+  41.38% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/tb_13.png")
+  }
+
+  44.83% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/tb_14.png")
+  }
+
+  48.28% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/tb_15.png")
+  }
+
+  51.72% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/tb_16.png")
+  }
+
+  55.17% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/tb_17.png")
+  }
+
+  58.62% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/tb_18.png")
+  }
+
+  62.07% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/tb_19.png")
+  }
+
+  65.52% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/tb_20.png")
+  }
+
+  68.97% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/tb_21.png")
+  }
+
+  72.41% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/tb_22.png")
+  }
+
+  75.86% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/tb_23.png")
+  }
+
+  79.31% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/tb_24.png")
+  }
+
+  82.76% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/tb_25.png")
+  }
+
+  86.21% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/tb_26.png")
+  }
+
+  89.66% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/tb_27.png")
+  }
+
+  93.10% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/tb_28.png")
+  }
+
+  100%,
+  96.55% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/tb_29.png")
+  }
+}
+
+#bg2imgBox {
+  width: 100%;
+  height: 100%;
+  opacity: 0
+}
+
+#bg2img {
+  width: 100%;
+  height: 100%;
+  background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_01.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center
+}
+
+@keyframes bg2img_an {
+  0% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_01.png")
+  }
+
+  1.22% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_02.png")
+  }
+
+  2.44% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_03.png")
+  }
+
+  3.66% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_04.png")
+  }
+
+  4.88% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_05.png")
+  }
+
+  6.10% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_06.png")
+  }
+
+  7.32% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_07.png")
+  }
+
+  8.54% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_08.png")
+  }
+
+  9.76% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_09.png")
+  }
+
+  10.98% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_10.png")
+  }
+
+  12.20% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_11.png")
+  }
+
+  13.41% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_12.png")
+  }
+
+  14.63% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_13.png")
+  }
+
+  15.85% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_14.png")
+  }
+
+  17.07% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_15.png")
+  }
+
+  18.29% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_16.png")
+  }
+
+  19.51% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_17.png")
+  }
+
+  20.73% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_18.png")
+  }
+
+  21.95% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_19.png")
+  }
+
+  23.17% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_20.png")
+  }
+
+  24.39% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_21.png")
+  }
+
+  25.61% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_22.png")
+  }
+
+  26.83% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_23.png")
+  }
+
+  28.05% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_24.png")
+  }
+
+  29.27% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_25.png")
+  }
+
+  30.49% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_26.png")
+  }
+
+  31.71% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_27.png")
+  }
+
+  32.93% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_28.png")
+  }
+
+  34.15% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_29.png")
+  }
+
+  35.37% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_30.png")
+  }
+
+  36.59% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_31.png")
+  }
+
+  37.80% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_32.png")
+  }
+
+  39.02% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_33.png")
+  }
+
+  40.24% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_34.png")
+  }
+
+  41.46% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_35.png")
+  }
+
+  42.68% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_36.png")
+  }
+
+  43.90% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_37.png")
+  }
+
+  45.12% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_38.png")
+  }
+
+  46.34% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_39.png")
+  }
+
+  47.56% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_40.png")
+  }
+
+  48.78% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_41.png")
+  }
+
+  50.00% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_42.png")
+  }
+
+  51.22% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_43.png")
+  }
+
+  52.44% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_44.png")
+  }
+
+  53.66% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_45.png")
+  }
+
+  54.88% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_46.png")
+  }
+
+  56.10% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_47.png")
+  }
+
+  57.32% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_48.png")
+  }
+
+  58.54% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_49.png")
+  }
+
+  59.76% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_50.png")
+  }
+
+  60.98% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_51.png")
+  }
+
+  62.20% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_52.png")
+  }
+
+  63.41% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_53.png")
+  }
+
+  64.63% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_54.png")
+  }
+
+  65.85% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_55.png")
+  }
+
+  67.07% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_56.png")
+  }
+
+  68.29% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_57.png")
+  }
+
+  69.51% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_58.png")
+  }
+
+  70.73% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_59.png")
+  }
+
+  71.95% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_60.png")
+  }
+
+  73.17% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_61.png")
+  }
+
+  74.39% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_62.png")
+  }
+
+  75.61% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_63.png")
+  }
+
+  76.83% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_64.png")
+  }
+
+  78.05% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_65.png")
+  }
+
+  79.27% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_66.png")
+  }
+
+  80.49% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_67.png")
+  }
+
+  81.71% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_68.png")
+  }
+
+  82.93% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_69.png")
+  }
+
+  84.15% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_70.png")
+  }
+
+  85.37% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_71.png")
+  }
+
+  86.59% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_72.png")
+  }
+
+  87.80% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_73.png")
+  }
+
+  89.02% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_74.png")
+  }
+
+  90.24% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_75.png")
+  }
+
+  91.46% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_76.png")
+  }
+
+  92.68% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_77.png")
+  }
+
+  93.90% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_78.png")
+  }
+
+  95.12% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_79.png")
+  }
+
+  96.34% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_80.png")
+  }
+
+  97.56% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_81.png")
+  }
+
+  100%,
+  98.78% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/bgg2_82.png")
+  }
+}
+
+#snowhuaBox {
+  width: 100%;
+  height: 100%
+}
+
+#snowhua {
+  width: 100%;
+  height: 100%;
+  background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sh_01.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  opacity: 0
+}
+
+@keyframes snowhua_an {
+  0% {
+    opacity: 0;
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sh_01.png")
+  }
+
+  2.86% {
+    opacity: 1;
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sh_02.png")
+  }
+
+  5.71% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sh_03.png")
+  }
+
+  8.57% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sh_04.png")
+  }
+
+  11.43% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sh_05.png")
+  }
+
+  14.29% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sh_06.png")
+  }
+
+  17.14% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sh_07.png")
+  }
+
+  20.00% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sh_08.png")
+  }
+
+  22.86% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sh_09.png")
+  }
+
+  25.71% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sh_10.png")
+  }
+
+  28.57% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sh_11.png")
+  }
+
+  31.43% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sh_12.png")
+  }
+
+  34.29% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sh_13.png")
+  }
+
+  37.14% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sh_14.png")
+  }
+
+  40.00% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sh_15.png")
+  }
+
+  42.86% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sh_16.png")
+  }
+
+  45.71% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sh_17.png")
+  }
+
+  48.57% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sh_18.png")
+  }
+
+  51.43% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sh_19.png")
+  }
+
+  54.29% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sh_20.png")
+  }
+
+  57.14% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sh_21.png")
+  }
+
+  60.00% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sh_22.png")
+  }
+
+  62.86% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sh_23.png")
+  }
+
+  65.71% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sh_24.png")
+  }
+
+  68.57% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sh_25.png")
+  }
+
+  71.43% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sh_26.png")
+  }
+
+  74.29% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sh_27.png")
+  }
+
+  77.14% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sh_28.png")
+  }
+
+  80.00% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sh_29.png")
+  }
+
+  82.86% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sh_30.png")
+  }
+
+  85.71% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sh_31.png")
+  }
+
+  88.57% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sh_32.png")
+  }
+
+  91.43% {
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sh_33.png")
+  }
+
+  94.29% {
+    opacity: 1;
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sh_34.png")
+  }
+
+  100%,
+  97.14% {
+    opacity: 0;
+    background-image: url("https://s1.kagirl.cn/pic/yujiandongtian2022/sh_35.png")
+  }
+}
+
+#opac_box {
+  position: absolute;
+  opacity: 0
+}
+
+#bg1img_opac {
+  position: absolute;
+  -webkit-animation: bg1img_an 3s steps(1) infinite
+}
+
+#snow_opac {
+  position: absolute;
+  -webkit-animation: snow_an 2s 4s steps(1) infinite
+}
+
+#tabimg_opac {
+  position: absolute;
+  -webkit-animation: tabimg_an 2s 6s steps(1) infinite
+}
+
+#bg2img_opac {
+  position: absolute;
+  -webkit-animation: bg2img_an 3s 8s steps(1) infinite
+}
+
+#snowhua_opac {
+  position: absolute;
+  -webkit-animation: snowhua_an 2s 11s steps(1) infinite
+}

happyphoto/yujianqiutian2023/yujianqiutian2023.js

@@ -0,0 +1,192 @@
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    // 背景音乐
+    bgmusic: {
+      music: null,
+      playing: false
+    },
+    ads: null,
+    hasLoadAdConfig: false,
+    photoIndex: 0,
+    examplePhotos: [
+      'ac_527831862795.jpeg',
+      'ac_527831968525.jpeg',
+      'ac_527832032890.jpeg',
+      'ac_527832064227.jpeg',
+      'ac_527832099230.jpeg',
+      'ac_527832214467.jpeg',
+      'ac_527832265952.jpeg',
+      'ac_527832389834.jpeg',
+      'ac_527832424179.jpeg',
+      'ac_527832663439.jpeg',
+    ],
+    imageWidths: [],
+    imageHeights: [],
+    imageStyles: [],
+    page1BlockStyle: '',
+    page1Block1Style: '',
+    page1ImageStyle: ``,
+    page2BlockStyle: '',
+    page2Block1Style: '',
+    page2ImageStyle: ``,
+    page3BlockStyle: '',
+    page3Block1Style: '',
+    page3ImageStyle: ``,
+
+    phudieBlockSytle: '', // 蝴蝶特效
+    rhudieBlockSytle: '',
+    yhudieBlockSytle: '',
+    timeouts: []
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+    this.initAnimation()
+  },
+
+  initAnimation() {
+    this.setData({
+      photoIndex: 0
+    })
+    this.showPage()
+  },
+
+  showPage() {
+    const _this = this
+    if (this.data.photoIndex === this.data.examplePhotos.length - 1) {
+      // 图片轮询完重新开始
+      this.setData({
+        'photoIndex': 0
+      })
+    }
+    const pageIndex = this.data.photoIndex % 3 + 1
+    const anStyle = this.data.photoIndex % 2 + 1
+    const imageURL = `https://novel-video.hongdes.cn/kawaalbum/yujianqiutian2023/example/${this.data.examplePhotos[this.data.photoIndex]}`
+    wx.getImageInfo({
+      src: imageURL,
+      success(res) {
+        const imageWidth = res.width
+        const imageHeight = res.height
+        let blockStyle = ''
+        if (imageWidth > imageHeight) {
+          //  横版图片
+          blockStyle = 'top:30%;'
+        } else {
+          // 竖版图片
+          blockStyle = 'top:10%;'
+        }
+        _this.setData({
+          [`page${pageIndex}BlockStyle`]: `${blockStyle}animation: show${anStyle}page-an 2s linear both`,
+          [`page${pageIndex}Block1Style`]: `animation: show1page1-an 3s linear infinite`,
+          [`page${pageIndex}ImageStyle`]: imageURL,
+        })
+
+        if (pageIndex === 1) {
+          _this.setData({
+            phudieBlockSytle: `animation: phudie_run 5s 2s ease-out both;`,
+            rhudieBlockSytle: '',
+            yhudieBlockSytle: ''
+          })
+        } else if (pageIndex === 2) {
+          _this.setData({
+            phudieBlockSytle: ``,
+            rhudieBlockSytle: 'animation: rhudie_run 5s 2s ease-out both;',
+            yhudieBlockSytle: ''
+          })
+        } else {
+          _this.setData({
+            phudieBlockSytle: ``,
+            rhudieBlockSytle: '',
+            yhudieBlockSytle: 'animation: yhudie_run 5s 2s ease-out both;'
+          })
+        }
+
+        _this.data.timeouts.push(setTimeout(() => {
+          _this.setData({
+            [`page${pageIndex}BlockStyle`]: `animation: show${anStyle}page-out 2s linear both`,
+            'photoIndex': _this.data.photoIndex + 1
+          })
+          _this.showPage();
+        }, 5000));
+      }
+    })
+  },
+
+  /**
+ * 播放音乐
+ */
+  initBgMusic() {
+    let _this = this
+    if (!app.globalData.audioContext) {
+      app.globalData.audioContext = wx.createInnerAudioContext()
+    }
+    // obeyMuteSwitch（仅在 iOS 生效）是否遵循静音开关，设置为 false 之后，即使是在静音模式下，也能播放声音
+    wx.setInnerAudioOption({
+      obeyMuteSwitch: false
+    })
+    // 设置音乐循环
+    app.globalData.audioContext.loop = true
+    // 监听音乐播放
+    app.globalData.audioContext.onPlay(() => {
+      _this.setData({
+        'bgmusic.playing': true
+      })
+      console.log('music play', _this.data.bgmusic.playing)
+    })
+    // 监听音乐暂停
+    app.globalData.audioContext.onPause(() => {
+      console.log('music pause')
+      _this.setData({
+        'bgmusic.playing': false
+      })
+    })
+    app.globalData.audioContext.src = this.data.bgmusic.music.url
+    app.globalData.audioContext.play()
+  },
+
+  /**
+   * 音乐播放按钮
+   */
+  musicPlayTap() {
+    app.globalData.audioContext.paused ? app.globalData.audioContext.play() : app.globalData.audioContext.pause()
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+    this.clearTimeoutTask()
+  },
+
+  // 清除定时任务
+  clearTimeoutTask() {
+    this.data.timeouts.forEach(timeout => clearTimeout(timeout));
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

happyphoto/yujianqiutian2023/yujianqiutian2023.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

happyphoto/yujianqiutian2023/yujianqiutian2023.wxml

@@ -0,0 +1,60 @@
+<view id="container">
+    <navigator open-type="navigateBack" style="position: fixed;top: 60rpx; left: 30rpx;color:#ffffff;z-index: 999">
+        <image src="/assets/images/icons/icon-back-white.png" style="width: 50rpx;height: 50rpx;"></image>
+    </navigator>
+    <view id="start"></view>
+
+    <view id="photo_div">
+        <view id="container_bg">
+        </view>
+        <view class="page_block" id="page1_block" style="{{page1BlockStyle}}">
+            <view class="page_sub_block" id="page1_block1" style="{{page1Block1Style}}">
+                <image class="page_image" id="page1" mode="widthFix" src="{{page1ImageStyle}}"></image>
+            </view>
+        </view>
+
+        <view class="page_block" id="page2_block" style="{{page2BlockStyle}}">
+            <view class="page_sub_block" id="page2_block1" style="{{page2Block1Style}}">
+                <image class="page_image" id="page2" mode="widthFix" src="{{page2ImageStyle}}"></image>
+            </view>
+        </view>
+
+        <view class="page_block" id="page3_block" style="{{page3BlockStyle}}">
+            <view class="page_sub_block" id="page3_block1" style="{{page3Block1Style}}">
+                <image class="page_image" id="page3" mode="widthFix" src="{{page3ImageStyle}}"></image>
+            </view>
+        </view>
+
+        <view id="title_kuang">
+            <view id="title_quan"></view>
+            <view id="title_yezi_block">
+                <view id="title_yezi"></view>
+            </view>
+        </view>
+        <view id="pagetitle">
+            <view id="titlecontent"></view>
+        </view>
+        <view id="luoye"></view>
+        <view id="luoye_block">
+            <view id="luoye_4"></view>
+            <view id="luoye_5"></view>
+            <view id="luoye_9"></view>
+            <view id="luoye_8"></view>
+            <view id="luoye_2"></view>
+            <view id="luoye_3"></view>
+            <view id="luoye_6"></view>
+
+            <view id="phudie_block" style="{{phudieBlockSytle}}">
+                <view id="phudie"></view>
+            </view>
+            <view id="rhudie_block" style="{{rhudieBlockSytle}}">
+                <view id="rhudie"></view>
+            </view>
+            <view id="yhudie_block" style="{{yhudieBlockSytle}}">
+                <view id="yhudie"></view>
+            </view>
+        </view>
+
+        <!-- <view id="zhuan" style="animation: 2.4s steps(1) 5s 1 normal both running zhuan_an;"></view> -->
+    </view>
+</view>

happyphoto/yujianqiutian2023/yujianqiutian2023.wxss

@@ -0,0 +1,1579 @@
+#container view,
+#container image {
+  position: absolute
+}
+
+#container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden
+}
+
+.block {
+  position: absolute;
+  opacity: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden
+}
+
+.page_block {
+  opacity: 0;
+  width: 80%;
+  height: 100%;
+  left: 10%;
+  top: 10%;
+  transform: translate(50%, 50%);
+}
+
+#luoye_block {
+  width: 100%;
+  height: 100%;
+}
+
+.page_sub_block {
+  opacity: 1;
+  width: 100%;
+  height: 100%;
+  transform-origin: 50% 50%;
+  /* border: 5px solid #fff;
+  box-shadow: 0 0 2px #fff */
+}
+
+.page_image {
+  width: 100%;
+  height: 100%;
+  background-size: 100% 100%;
+  transform-origin: 50% 50%;
+  border: 5px solid #fff;
+  box-shadow: 0 0 2px #fff
+}
+
+.page {
+  width: 500px;
+  height: 100%;
+  background-size: cover;
+  background-position: center;
+  margin: auto;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  opacity: 0
+}
+
+.wordspan {
+  opacity: 0;
+  font-size: 26px;
+  color: #fff;
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin: auto;
+  width: 80%;
+  vertical-align: middle;
+  line-height: 35px;
+  text-align: center;
+  letter-spacing: 2px;
+  bottom: 10%
+}
+
+#pagetitle {
+  display: table;
+  text-align: center;
+  box-sizing: border-box;
+  width: 399px;
+  height: 401px;
+  left: 50%;
+  top: 47%;
+  transform: translate(-50%, -50%);
+  opacity: 0;
+  text-shadow: 0 0 5px #fac431, 0 0 10px #fac431, 0 0 10px #fac431
+}
+
+@-webkit-keyframes pagetitle_an {
+  0% {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0)
+  }
+
+  100% {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1)
+  }
+
+}
+
+@-webkit-keyframes pagetitle_out {
+  0% {
+    opacity: 1;
+    transform: translate(-50%, -50%)
+  }
+
+  100% {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0)
+  }
+
+}
+
+#titlecontent {
+  vertical-align: middle;
+  display: table-cell;
+  text-align: center;
+  word-break: break-all;
+  position: relative !important;
+  overflow: hidden;
+  font-size: 28px;
+  line-height: 48px;
+  font-weight: 700;
+  color: #fff;
+  padding: 15%
+}
+
+@-webkit-keyframes fadeIn {
+  0% {
+    opacity: 0
+  }
+
+  100% {
+    opacity: 1
+  }
+
+}
+
+@-webkit-keyframes fadeOut {
+  0% {
+    opacity: 1
+  }
+
+  100% {
+    opacity: 0
+  }
+
+}
+
+#photo_load {
+  margin: auto;
+  width: 170px;
+  height: 120px;
+  border-radius: 6px;
+  background: rgba(0, 0, 0, .75);
+  top: 0;
+  bottom: 50px;
+  left: 0;
+  right: 0
+}
+
+.photo_load_1 {
+  margin-top: 25px;
+  width: 100%;
+  height: 30px;
+  background: url('https://s2.kagirl.cn/template/pic/public/loading.gif') no-repeat center center;
+  background-size: 30px 30px
+}
+
+.photo_load_2 {
+  color: #fff;
+  font-family: Arial;
+  font-size: 18px;
+  text-align: center;
+  opacity: .75;
+  width: 100%;
+  top: 70px
+}
+
+#photo_div {
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+}
+
+#container_bg {
+  opacity: 0;
+  position: absolute;
+  overflow: hidden;
+  left: 0;
+  bottom: 0;
+  width: 500px;
+  height: 100%;
+  background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/bg.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat
+}
+
+#luoye_4 {
+  position: absolute;
+  overflow: hidden;
+  left: -200px;
+  top: -100px;
+  width: 313px;
+  height: 275px;
+  background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/luoye_4.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  transform-origin: 0% 67%;
+  animation: luoye_4_an 2.5s linear infinite
+}
+
+#luoye_5 {
+  position: absolute;
+  right: -153px;
+  top: -50px;
+  width: 311px;
+  height: 263px;
+  background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/luoye_5.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  transform-origin: 100% 0%;
+  animation: luoye_5_an 2.5s linear infinite;
+  overflow: hidden
+}
+
+@keyframes luoye_5_an {
+  0% {
+    transform: rotate(0)
+  }
+
+  50% {
+    transform: rotate(-1.5deg)
+  }
+
+  100% {
+    transform: rotate(0)
+  }
+
+}
+
+@keyframes luoye_4_an {
+  0% {
+    transform: rotate(0)
+  }
+
+  50% {
+    transform: rotate(3deg)
+  }
+
+  100% {
+    transform: rotate(0)
+  }
+
+}
+
+#luoye_9 {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 500px;
+  height: 160px;
+  background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/luoye_9.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  animation: luoye_9_an 2.5s linear infinite;
+  overflow: hidden
+}
+
+@keyframes luoye_9_an {
+  0% {
+    transform: skewX(-.8deg)
+  }
+
+  50% {
+    transform: skewX(.1deg)
+  }
+
+  100% {
+    transform: skewX(-.8deg)
+  }
+
+}
+
+#luoye_8 {
+  position: absolute;
+  left: -200px;
+  bottom: 350px;
+  width: 98px;
+  height: 60px;
+  background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/luoye_8.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  animation: luoye_8_an 5s 1s ease-out infinite;
+  overflow: hidden
+}
+
+@keyframes luoye_8_an {
+  0% {
+    transform: translate(0, 0) rotate(0)
+  }
+
+  75% {
+    transform: translate(600px, 400px) rotate(-20deg)
+  }
+
+  100% {
+    transform: translate(600px, 400px) rotate(-20deg)
+  }
+
+}
+
+#luoye_2 {
+  position: absolute;
+  left: 200px;
+  top: -200px;
+  width: 34px;
+  height: 39px;
+  background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/luoye_2.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  animation: luoye_2_an 9s 3s ease-out infinite;
+  overflow: hidden
+}
+
+@keyframes luoye_2_an {
+  0% {
+    transform: translate(0, 0) rotate(0)
+  }
+
+  75% {
+    transform: translate(100px, 1500px) rotate(-60deg)
+  }
+
+  100% {
+    transform: translate(100px, 1500px) rotate(-60deg)
+  }
+
+}
+
+#luoye_3 {
+  position: absolute;
+  left: -100px;
+  top: -100px;
+  width: 74px;
+  height: 74px;
+  background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/luoye_3.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  animation: luoye_3_an 7.5s 6s ease-out infinite;
+  overflow: hidden
+}
+
+@keyframes luoye_3_an {
+  0% {
+    transform: translate(0, 0) rotate(0)
+  }
+
+  75% {
+    transform: translate(600px, 600px) rotate(-90deg)
+  }
+
+  100% {
+    transform: translate(600px, 600px) rotate(-90deg)
+  }
+
+}
+
+#luoye_6 {
+  position: absolute;
+  right: -20px;
+  bottom: 300px;
+  width: 87px;
+  height: 99px;
+  background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/luoye_6.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  animation: luoye_6_an 8.5s 5s ease-out infinite;
+  overflow: hidden
+}
+
+@keyframes luoye_6_an {
+  0% {
+    transform: translate(0, 0) rotate(0)
+  }
+
+  75% {
+    transform: translate(-300px, 500px) rotate(100deg)
+  }
+
+  100% {
+    transform: translate(-300px, 500px) rotate(100deg)
+  }
+
+}
+
+#start {
+  width: 100%;
+  height: 100%;
+  background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_001.png");
+  background-size: 100% 100%;
+  overflow: hidden
+}
+
+#zhuan {
+  width: 500px;
+  height: 100%;
+  background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_00.png");
+  background-size: 100% 100%;
+  overflow: hidden
+}
+
+@keyframes start_an {
+  0% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_001.png")
+  }
+
+  0.80% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_002.png")
+  }
+
+  1.60% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_003.png")
+  }
+
+  2.40% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_004.png")
+  }
+
+  3.20% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_005.png")
+  }
+
+  4.00% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_006.png")
+  }
+
+  4.80% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_007.png")
+  }
+
+  5.60% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_008.png")
+  }
+
+  6.40% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_009.png")
+  }
+
+  7.20% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_010.png")
+  }
+
+  8.00% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_011.png")
+  }
+
+  8.80% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_012.png")
+  }
+
+  9.60% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_013.png")
+  }
+
+  10.40% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_014.png")
+  }
+
+  11.20% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_015.png")
+  }
+
+  12.00% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_016.png")
+  }
+
+  12.80% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_017.png")
+  }
+
+  13.60% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_018.png")
+  }
+
+  14.40% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_019.png")
+  }
+
+  15.20% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_020.png")
+  }
+
+  16.00% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_021.png")
+  }
+
+  16.80% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_022.png")
+  }
+
+  17.60% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_023.png")
+  }
+
+  18.40% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_024.png")
+  }
+
+  19.20% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_025.png")
+  }
+
+  20.00% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_026.png")
+  }
+
+  20.80% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_027.png")
+  }
+
+  21.60% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_028.png")
+  }
+
+  22.40% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_029.png")
+  }
+
+  23.20% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_030.png")
+  }
+
+  24.00% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_031.png")
+  }
+
+  24.80% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_032.png")
+  }
+
+  25.60% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_033.png")
+  }
+
+  26.40% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_034.png")
+  }
+
+  27.20% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_035.png")
+  }
+
+  28.00% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_036.png")
+  }
+
+  28.80% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_037.png")
+  }
+
+  29.60% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_038.png")
+  }
+
+  30.40% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_039.png")
+  }
+
+  31.20% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_040.png")
+  }
+
+  32.00% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_041.png")
+  }
+
+  32.80% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_042.png")
+  }
+
+  33.60% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_043.png")
+  }
+
+  34.40% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_044.png")
+  }
+
+  35.20% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_045.png")
+  }
+
+  36.00% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_046.png")
+  }
+
+  36.80% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_047.png")
+  }
+
+  37.60% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_048.png")
+  }
+
+  38.40% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_049.png")
+  }
+
+  39.20% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_050.png")
+  }
+
+  40.00% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_051.png")
+  }
+
+  40.80% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_052.png")
+  }
+
+  41.60% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_053.png")
+  }
+
+  42.40% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_054.png")
+  }
+
+  43.20% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_055.png")
+  }
+
+  44.00% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_056.png")
+  }
+
+  44.80% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_057.png")
+  }
+
+  45.60% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_058.png")
+  }
+
+  46.40% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_059.png")
+  }
+
+  47.20% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_060.png")
+  }
+
+  48.00% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_061.png")
+  }
+
+  48.80% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_062.png")
+  }
+
+  49.60% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_063.png")
+  }
+
+  50.40% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_064.png")
+  }
+
+  51.20% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_065.png")
+  }
+
+  52.00% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_066.png")
+  }
+
+  52.80% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_067.png")
+  }
+
+  53.60% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_068.png")
+  }
+
+  54.40% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_069.png")
+  }
+
+  55.20% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_070.png")
+  }
+
+  56.00% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_071.png")
+  }
+
+  56.80% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_072.png")
+  }
+
+  57.60% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_073.png")
+  }
+
+  58.40% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_074.png")
+  }
+
+  59.20% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_075.png")
+  }
+
+  60.00% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_076.png")
+  }
+
+  60.80% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_077.png")
+  }
+
+  61.60% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_078.png")
+  }
+
+  62.40% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_079.png")
+  }
+
+  63.20% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_080.png")
+  }
+
+  64.00% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_081.png")
+  }
+
+  64.80% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_082.png")
+  }
+
+  65.60% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_083.png")
+  }
+
+  66.40% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_084.png")
+  }
+
+  67.20% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_085.png")
+  }
+
+  68.00% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_086.png")
+  }
+
+  68.80% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_087.png")
+  }
+
+  69.60% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_088.png")
+  }
+
+  70.40% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_089.png")
+  }
+
+  71.20% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_090.png")
+  }
+
+  72.00% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_091.png")
+  }
+
+  72.80% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_092.png")
+  }
+
+  73.60% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_093.png")
+  }
+
+  74.40% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_094.png")
+  }
+
+  75.20% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_095.png")
+  }
+
+  76.00% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_096.png")
+  }
+
+  76.80% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_097.png")
+  }
+
+  77.60% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_098.png")
+  }
+
+  78.40% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_099.png")
+  }
+
+  79.20% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_100.png")
+  }
+
+  80.00% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_101.png")
+  }
+
+  80.80% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_102.png")
+  }
+
+  81.60% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_103.png")
+  }
+
+  82.40% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_104.png")
+  }
+
+  83.20% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_105.png")
+  }
+
+  84.00% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_106.png")
+  }
+
+  84.80% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_107.png")
+  }
+
+  85.60% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_108.png")
+  }
+
+  86.40% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_109.png")
+  }
+
+  87.20% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_110.png")
+  }
+
+  88.00% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_111.png")
+  }
+
+  88.80% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_112.png")
+  }
+
+  89.60% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_113.png")
+  }
+
+  90.40% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_114.png")
+  }
+
+  91.20% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_115.png")
+  }
+
+  92.00% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_116.png")
+  }
+
+  92.80% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_117.png")
+  }
+
+  93.60% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_118.png")
+  }
+
+  94.40% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_119.png")
+  }
+
+  95.20% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_120.png")
+  }
+
+  96.00% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_121.png")
+  }
+
+  96.80% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_122.png")
+  }
+
+  97.60% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_123.png")
+  }
+
+  98.40% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_124.png")
+  }
+
+  100%,
+  99.20% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/start_125.png")
+  }
+
+}
+
+@keyframes zhuan_an {
+  0% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_00.png")
+  }
+
+  1.67% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_01.png")
+  }
+
+  3.33% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_02.png")
+  }
+
+  5.00% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_03.png")
+  }
+
+  6.67% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_04.png")
+  }
+
+  8.33% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_05.png")
+  }
+
+  10.00% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_06.png")
+  }
+
+  11.67% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_07.png")
+  }
+
+  13.33% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_08.png")
+  }
+
+  15.00% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_09.png")
+  }
+
+  16.67% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_10.png")
+  }
+
+  18.33% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_11.png")
+  }
+
+  20.00% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_12.png")
+  }
+
+  21.67% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_13.png")
+  }
+
+  23.33% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_14.png")
+  }
+
+  25.00% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_15.png")
+  }
+
+  26.67% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_16.png")
+  }
+
+  28.33% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_17.png")
+  }
+
+  30.00% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_18.png")
+  }
+
+  31.67% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_19.png")
+  }
+
+  33.33% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_20.png")
+  }
+
+  35.00% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_21.png")
+  }
+
+  36.67% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_22.png")
+  }
+
+  38.33% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_23.png")
+  }
+
+  40.00% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_24.png")
+  }
+
+  41.67% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_25.png")
+  }
+
+  43.33% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_26.png")
+  }
+
+  45.00% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_27.png")
+  }
+
+  46.67% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_28.png")
+  }
+
+  48.33% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_29.png")
+  }
+
+  50.00% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_30.png")
+  }
+
+  51.67% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_31.png")
+  }
+
+  53.33% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_32.png")
+  }
+
+  55.00% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_33.png")
+  }
+
+  56.67% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_34.png")
+  }
+
+  58.33% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_35.png")
+  }
+
+  60.00% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_36.png")
+  }
+
+  61.67% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_37.png")
+  }
+
+  63.33% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_38.png")
+  }
+
+  65.00% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_39.png")
+  }
+
+  66.67% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_40.png")
+  }
+
+  68.33% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_41.png")
+  }
+
+  70.00% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_42.png")
+  }
+
+  71.67% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_43.png")
+  }
+
+  73.33% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_44.png")
+  }
+
+  75.00% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_45.png")
+  }
+
+  76.67% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_46.png")
+  }
+
+  78.33% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_47.png")
+  }
+
+  80.00% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_48.png")
+  }
+
+  81.67% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_49.png")
+  }
+
+  83.33% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_50.png")
+  }
+
+  85.00% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_51.png")
+  }
+
+  86.67% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_52.png")
+  }
+
+  88.33% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_53.png")
+  }
+
+  90.00% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_54.png")
+  }
+
+  91.67% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_55.png")
+  }
+
+  93.33% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_56.png")
+  }
+
+  95.00% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_57.png")
+  }
+
+  96.67% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_58.png")
+  }
+
+  100%,
+  98.33% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/zhuan_59.png")
+  }
+
+}
+
+#title_kuang {
+  opacity: 0;
+  position: absolute;
+  top: 30%;
+  left: 68px;
+  width: 364px;
+  height: 363px
+}
+
+#title_quan {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 364px;
+  height: 363px;
+  background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/quan.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  overflow: hidden
+}
+
+#title_yezi_block {
+  opacity: 0;
+  position: absolute;
+  left: 120px;
+  bottom: 0;
+  width: 280px;
+  height: 185px;
+  transform-origin: 0% 100%
+}
+
+#title_yezi {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 280px;
+  height: 185px;
+  background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/luoye_11.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  transform-origin: 0% 100%;
+  overflow: hidden
+}
+
+@keyframes title_kuang_an {
+  0% {
+    opacity: 0;
+    transform: translateY(-800px) scale(.2)
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1)
+  }
+
+}
+
+@keyframes title_yezi_in_an {
+  0% {
+    opacity: 0;
+    transform: rotate(60deg) scale(0)
+  }
+
+  100% {
+    opacity: 1;
+    transform: rotate(0) scale(1)
+  }
+
+}
+
+@keyframes title_yezi_an {
+  0% {
+    opacity: 1;
+    transform: rotate(0)
+  }
+
+  50% {
+    opacity: 1;
+    transform: rotate(5deg)
+  }
+
+  100% {
+    opacity: 1;
+    transform: rotate(0)
+  }
+
+}
+
+@-webkit-keyframes show1page-an {
+  0% {
+    transform: translate(-300px, -500px) rotate(-45deg) scale(.5);
+    opacity: 0
+  }
+
+  100% {
+    transform: translate(0, 0) rotate(-2deg) scale(1);
+    opacity: 1
+  }
+
+}
+
+@-webkit-keyframes show1page-out {
+  0% {
+    transform: translateY(0) rotate(-2deg) scale(1);
+    opacity: 1
+  }
+
+  100% {
+    transform: translateY(1000px) rotate(90deg) scale(.5);
+    opacity: 0
+  }
+
+}
+
+@-webkit-keyframes show1page1-an {
+  0% {
+    transform: translateY(0)
+  }
+
+  50% {
+    transform: translateY(10px)
+  }
+
+  100% {
+    transform: translateY(0)
+  }
+
+}
+
+@-webkit-keyframes show2page-an {
+  0% {
+    transform: translate(300px, -500px) rotate(45deg) scale(.5);
+    opacity: 0
+  }
+
+  100% {
+    transform: translate(0, 0) rotate(2deg) scale(1);
+    opacity: 1
+  }
+
+}
+
+@-webkit-keyframes show2page-out {
+  0% {
+    transform: translateY(0) rotate(2deg) scale(1);
+    opacity: 1
+  }
+
+  100% {
+    transform: translateY(1000px) rotate(-90deg) scale(.5);
+    opacity: 0
+  }
+
+}
+
+#phudie_block {
+  position: absolute;
+  left: 100px;
+  bottom: -200px;
+  width: 149px;
+  height: 116px;
+  overflow: hidden;
+  /* animation: phudie_run 5s 2s ease-out both; */
+}
+
+#phudie {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 149px;
+  height: 116px;
+  background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/phudie_00.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  animation: phudie_an .44s linear infinite;
+  overflow: hidden
+}
+
+#rhudie_block {
+  position: absolute;
+  left: 250px;
+  bottom: -120px;
+  width: 149px;
+  height: 116px;
+  overflow: hidden;
+}
+
+#rhudie {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 149px;
+  height: 116px;
+  background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/rhudie_00.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  animation: rhudie_an .44s steps(1) infinite;
+  overflow: hidden
+}
+
+#yhudie_block {
+  position: absolute;
+  right: -150px;
+  top: 300px;
+  width: 150px;
+  height: 176px;
+  overflow: hidden;
+
+}
+
+#yhudie {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 150px;
+  height: 176px;
+  background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/yhudie_00.png");
+  background-size: 150px 176px;
+  background-repeat: no-repeat;
+  animation: yhudie_an .44s steps(1) infinite;
+  overflow: hidden;
+}
+
+@keyframes phudie_run {
+  0% {
+    transform: translate(0, 0) rotate(30deg)
+  }
+
+  70n% {
+    transform: translate(400px, -750px) rotate(80deg)
+  }
+
+  100% {
+    transform: translate(400px, -750px) rotate(80deg)
+  }
+
+}
+
+@keyframes rhudie_run {
+  0% {
+    transform: translate(0, 0) rotate(-30deg)
+  }
+
+  70% {
+    transform: translate(-400px, -500px) rotate(-50deg)
+  }
+
+  100% {
+    transform: translate(-400px, -500px) rotate(-50deg)
+  }
+
+}
+
+@keyframes yhudie_run {
+  0% {
+    transform: translate(0, 0) rotate(-20deg)
+  }
+
+  80% {
+    transform: translate(-650px, -450px) rotate(-60deg)
+  }
+
+  100% {
+    transform: translate(-650px, -450px) rotate(-60deg)
+  }
+
+}
+
+@keyframes rhudie_an {
+  0% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/rhudie_00.png")
+  }
+
+  9.09% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/rhudie_01.png")
+  }
+
+  18.18% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/rhudie_02.png")
+  }
+
+  27.27% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/rhudie_03.png")
+  }
+
+  36.36% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/rhudie_04.png")
+  }
+
+  45.45% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/rhudie_05.png")
+  }
+
+  54.55% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/rhudie_06.png")
+  }
+
+  63.64% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/rhudie_07.png")
+  }
+
+  72.73% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/rhudie_08.png")
+  }
+
+  81.82% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/rhudie_09.png")
+  }
+
+  100%,
+  90.91% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/rhudie_10.png")
+  }
+
+}
+
+@keyframes phudie_an {
+  0% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/phudie_00.png")
+  }
+
+  9.09% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/phudie_01.png")
+  }
+
+  18.18% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/phudie_02.png")
+  }
+
+  27.27% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/phudie_03.png")
+  }
+
+  36.36% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/phudie_04.png")
+  }
+
+  45.45% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/phudie_05.png")
+  }
+
+  54.55% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/phudie_06.png")
+  }
+
+  63.64% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/phudie_07.png")
+  }
+
+  72.73% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/phudie_08.png")
+  }
+
+  81.82% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/phudie_09.png")
+  }
+
+  100%,
+  90.91% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/phudie_10.png")
+  }
+
+}
+
+@keyframes yhudie_an {
+  0% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/yhudie_00.png")
+  }
+
+  10.00% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/yhudie_01.png")
+  }
+
+  20.00% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/yhudie_02.png")
+  }
+
+  30.00% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/yhudie_03.png")
+  }
+
+  40.00% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/yhudie_04.png")
+  }
+
+  50.00% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/yhudie_05.png")
+  }
+
+  60.00% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/yhudie_06.png")
+  }
+
+  70.00% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/yhudie_07.png")
+  }
+
+  80.00% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/yhudie_08.png")
+  }
+
+  100%,
+  90.00% {
+    background-image: url("https://s1.kagirl.cn/template/yujianqiutian2023/yhudie_09.png")
+  }
+
+}

pages/video/video.js

@@ -17,6 +17,81 @@ import {
 const app = getApp()
 let interstitialAd = null
 
+const HAPPY_PHOTO_LIST = [
+    {
+        adType: 'video',
+        cover_image: '',
+        title: 'material202304',
+        tmpName: 'material202304',
+        views: 223,
+        lock: false,
+    },
+    {
+        adType: 'video',
+        cover_image: '',
+        title: 'moon',
+        tmpName: 'moon',
+        views: 223,
+        lock: false,
+    },
+    {
+        adType: 'video',
+        cover_image: '',
+        title: 'qiangwei',
+        tmpName: 'qiangwei',
+        views: 223,
+        lock: false,
+    },
+    {
+        adType: 'video',
+        cover_image: '',
+        title: 'qingren17',
+        tmpName: 'qingren17',
+        views: 223,
+        lock: false,
+    },
+    {
+        adType: 'video',
+        cover_image: '',
+        title: 'qingrenjie2020',
+        tmpName: 'qingrenjie2020',
+        views: 223,
+        lock: false,
+    },
+    {
+        adType: 'video',
+        cover_image: '',
+        title: 'rose',
+        tmpName: 'rose',
+        views: 223,
+        lock: false,
+    },
+    {
+        adType: 'video',
+        cover_image: '',
+        title: 'sqjh2018',
+        tmpName: 'sqjh2018',
+        views: 223,
+        lock: false,
+    },
+    {
+        adType: 'video',
+        cover_image: '',
+        title: 'yujiandongtian2022',
+        tmpName: 'yujiandongtian2022',
+        views: 223,
+        lock: false,
+    },
+    {
+        adType: 'video',
+        cover_image: '',
+        title: 'yujianqiutian2023',
+        tmpName: 'yujianqiutian2023',
+        views: 223,
+        lock: false,
+    },
+]
+
 Page({
     data: {
         videoList: [],
@@ -325,6 +400,12 @@ Page({
         console.log('getVideoCategories', this.data.globalConfig)
         // 筛选出type=1的视频分类
         const videoCategories = this.data.globalConfig.categoryList.filter(item => item.type === 1)
+        // 添加幸福相册分类
+        videoCategories.push({
+            id: 999,
+            name: '幸福相册'
+        })
+
 
         console.log('videoCategories', videoCategories)
 
@@ -356,7 +437,13 @@ Page({
             videoList: [],
             hasMore: true
         })
-        this.loadVideoList()
+        if (this.data.currentCategoryId !== 999) {
+            this.loadVideoList()
+        } else {
+            this.setData({
+                videoList: HAPPY_PHOTO_LIST
+            })
+        }
     },
 
     // 加载视频列表
@@ -585,6 +672,13 @@ Page({
         }
     },
 
+    onPhotoTap (e) {
+        const {info} = e.currentTarget.dataset;
+        wx.navigateTo({
+            url: `/happyphoto/${info.tmpName}/${info.tmpName}`
+        })
+    },
+
     // 下拉刷新
     onPullDownRefresh() {
         this.setData({

pages/video/video.json

@@ -2,7 +2,5 @@
   "navigationStyle": "custom",
   "enablePullDownRefresh": true,
   "backgroundTextStyle": "dark",
-  "usingComponents": {},
-  "enableShareAppMessage": true,
-  "enableShareTimeline": true
-} 
+  "usingComponents": {}
+}

pages/video/video.wxml

@@ -18,97 +18,181 @@
   </view>
 
   <!-- 视频列表 -->
-  <scroll-view
-    scroll-y
-    class="list-container"
-    bindscrolltolower="loadMore"
-    enable-back-to-top
-    enhanced="{{ true }}"
-    show-scrollbar="{{ false }}"
-    bounces="{{ true }}"
-    fast-deceleration="{{ true }}"
-  >
-    <view class="list">
-      <block wx:for="{{ videoList }}" wx:key="id" wx:for-index="idx">
-        <!-- 视频广告 -->
-        <view wx:if="{{item.adType === 'videoAd' && hasLoadAdConfig}}" class="ad-custom-card">
-          <ad unit-id="{{templateAdId}}" ad-type="video" ad-theme="white" data-field="videoError"
-            data-name="首页-视频1" data-adId="{{templateAdId}}" bindload="appletsAdLoad"
-            binderror="appletsAdError" bindclose="appletsAdClose" style="height: 100%;margin-bottom: 20rpx;"></ad>
-        </view>
-        <view wx:if="{{ item.adType === 'video' }}">
-          <!-- 视频卡片 -->
-          <view class="video-item" bindtap="onVideoTap" data-info="{{ item }}" data-id="{{ item.id }}" data-index="{{idx}}">
-            <view class="video-cover-container">
-              <image
-                class="video-cover"
-                src="{{ item.cover_image }}"
-                mode="aspectFill"
-              />
-              <view class="play-button-container">
-                <view class="play-button" wx:if="{{ !item.lock }}">
-                  <image
-                    class="play-icon"
-                    src="/assets/images/icon-video-play.png"
-                  ></image>
-                </view>
+  <block wx:if="{{currentCategoryId !== 999}}">
+    <scroll-view
+            scroll-y
+            class="list-container"
+            bindscrolltolower="loadMore"
+            enable-back-to-top
+            enhanced="{{ true }}"
+            show-scrollbar="{{ false }}"
+            bounces="{{ true }}"
+            fast-deceleration="{{ true }}"
+    >
+      <view class="list">
+        <block wx:for="{{ videoList }}" wx:key="id" wx:for-index="idx">
+          <!-- 视频广告 -->
+          <view wx:if="{{item.adType === 'videoAd' && hasLoadAdConfig}}" class="ad-custom-card">
+            <ad unit-id="{{templateAdId}}" ad-type="video" ad-theme="white" data-field="videoError"
+                data-name="首页-视频1" data-adId="{{templateAdId}}" bindload="appletsAdLoad"
+                binderror="appletsAdError" bindclose="appletsAdClose" style="height: 100%;margin-bottom: 20rpx;"></ad>
+          </view>
+          <view wx:if="{{ item.adType === 'video' }}">
+            <!-- 视频卡片 -->
+            <view class="video-item" bindtap="onVideoTap" data-info="{{ item }}" data-id="{{ item.id }}" data-index="{{idx}}">
+              <view class="video-cover-container">
+                <image
+                        class="video-cover"
+                        src="{{ item.cover_image }}"
+                        mode="aspectFill"
+                />
+                <view class="play-button-container">
+                  <view class="play-button" wx:if="{{ !item.lock }}">
+                    <image
+                            class="play-icon"
+                            src="/assets/images/icon-video-play.png"
+                    ></image>
+                  </view>
 
-                <view class="play-button-lock" wx:else>
-                  <image
-                    class="play-icon"
-                    src="/assets/images/icon-lock.png"
-                  ></image>
-                  <view class="play-button-lock-title">观看广告解锁完整内容</view>
+                  <view class="play-button-lock" wx:else>
+                    <image
+                            class="play-icon"
+                            src="/assets/images/icon-lock.png"
+                    ></image>
+                    <view class="play-button-lock-title">观看广告解锁完整内容</view>
+                  </view>
                 </view>
               </view>
-            </view>
 
-            <view class="video-title">{{ item.title }}</view>
-            <view class="video-play-count">{{ item.views }}w+人播放</view>
-            <view class="share-button" catchtap="onShareTap">
-              <image
-                class="share-icon"
-                src="/assets/images/icons/icon-wechat.png"
-                catchtap="onShareTap"
-              ></image>
-              <text>分享</text>
-              <button class="share-cover-button" open-type="share" data-video="{{ item }}" catchtap></button>
+              <view class="video-title">{{ item.title }}</view>
+              <view class="video-play-count">{{ item.views }}w+人播放</view>
+              <view class="share-button" catchtap="onShareTap">
+                <image
+                        class="share-icon"
+                        src="/assets/images/icons/icon-wechat.png"
+                        catchtap="onShareTap"
+                ></image>
+                <text>分享</text>
+                <button class="share-cover-button" open-type="share" data-video="{{ item }}" catchtap></button>
+              </view>
             </view>
           </view>
-        </view>
-         <!-- 卡片原生广告 -->
-         <view wx:if="{{item.adType === 'templateAd' && hasLoadAdConfig }}" class="ad-custom-card-1">
+          <!-- 卡片原生广告 -->
+          <view wx:if="{{item.adType === 'templateAd' && hasLoadAdConfig }}" class="ad-custom-card-1">
             <ad-custom unit-id="{{templateAdId}}" data-field="templateError" data-name="首页页-卡片原生"
-              data-adId="{{templateAdId}}" capture-bind:tap="appletsAdClick" bindload="appletsAdLoad"
-              binderror="appletsAdError" style="height: 100%;margin-bottom: 20rpx;"></ad-custom>
+                       data-adId="{{templateAdId}}" capture-bind:tap="appletsAdClick" bindload="appletsAdLoad"
+                       binderror="appletsAdError" style="height: 100%;margin-bottom: 20rpx;"></ad-custom>
           </view>
-      </block>
-    </view>
-
-    <!-- 加载状态 -->
-    <view class="loading-status">
-      <!-- loading 提示 -->
-      <view class="loading" wx:if="{{ loading }}">
-        <view class="loading-spinner"></view>
-        <text>加载中...</text>
+        </block>
       </view>
 
-      <!-- 没有更多 -->
-      <view
-        class="finished"
-        wx:if="{{ !loading && videoList.length > 0 && !hasMore }}"
-      >
-        <text>没有更多视频了</text>
+      <!-- 加载状态 -->
+      <view class="loading-status">
+        <!-- loading 提示 -->
+        <view class="loading" wx:if="{{ loading }}">
+          <view class="loading-spinner"></view>
+          <text>加载中...</text>
+        </view>
+
+        <!-- 没有更多 -->
+        <view
+                class="finished"
+                wx:if="{{ !loading && videoList.length > 0 && !hasMore }}"
+        >
+          <text>没有更多视频了</text>
+        </view>
+
+        <!-- 空状态 -->
+        <view class="empty" wx:if="{{ !loading && videoList.length === 0 }}">
+          <image class="empty-icon" src="/assets/images/empty.png"></image>
+          <text>暂无视频内容</text>
+        </view>
       </view>
+    </scroll-view>
+  </block>
+
+  <!-- 幸福相册列表 -->
+  <block wx:else>
+    <scroll-view
+            scroll-y
+            class="list-container"
+            bindscrolltolower="loadMore"
+            enable-back-to-top
+            enhanced="{{ true }}"
+            show-scrollbar="{{ false }}"
+            bounces="{{ true }}"
+            fast-deceleration="{{ true }}"
+    >
+      <view class="list">
+        <block wx:for="{{ videoList }}" wx:key="id" wx:for-index="idx">
+          <!-- 视频广告 -->
+          <view wx:if="{{ item.adType === 'video' }}">
+            <!-- 视频卡片 -->
+            <view class="video-item" bindtap="onPhotoTap" data-info="{{ item }}" data-id="{{ item.id }}" data-index="{{idx}}">
+              <view class="video-cover-container">
+                <image
+                        class="video-cover"
+                        src="{{ item.cover_image }}"
+                        mode="aspectFill"
+                />
+                <view class="play-button-container">
+                  <view class="play-button" wx:if="{{ !item.lock }}">
+                    <image
+                            class="play-icon"
+                            src="/assets/images/icon-video-play.png"
+                    ></image>
+                  </view>
 
-      <!-- 空状态 -->
-      <view class="empty" wx:if="{{ !loading && videoList.length === 0 }}">
-        <image class="empty-icon" src="/assets/images/empty.png"></image>
-        <text>暂无视频内容</text>
+                  <view class="play-button-lock" wx:else>
+                    <image
+                            class="play-icon"
+                            src="/assets/images/icon-lock.png"
+                    ></image>
+                    <view class="play-button-lock-title">观看广告解锁完整内容</view>
+                  </view>
+                </view>
+              </view>
+
+              <view class="video-title">{{ item.title }}</view>
+              <view class="video-play-count">{{ item.views }}w+人播放</view>
+              <view class="share-button" catchtap="onShareTap">
+                <image
+                        class="share-icon"
+                        src="/assets/images/icons/icon-wechat.png"
+                        catchtap="onShareTap"
+                ></image>
+                <text>分享</text>
+                <button class="share-cover-button" open-type="share" data-video="{{ item }}" catchtap></button>
+              </view>
+            </view>
+          </view>
+        </block>
       </view>
-    </view>
-  </scroll-view>
 
+      <!-- 加载状态 -->
+      <view class="loading-status">
+        <!-- loading 提示 -->
+        <view class="loading" wx:if="{{ loading }}">
+          <view class="loading-spinner"></view>
+          <text>加载中...</text>
+        </view>
+
+        <!-- 没有更多 -->
+        <view
+                class="finished"
+                wx:if="{{ !loading && videoList.length > 0 && !hasMore }}"
+        >
+          <text>没有更多视频了</text>
+        </view>
+
+        <!-- 空状态 -->
+        <view class="empty" wx:if="{{ !loading && videoList.length === 0 }}">
+          <image class="empty-icon" src="/assets/images/empty.png"></image>
+          <text>暂无视频内容</text>
+        </view>
+      </view>
+    </scroll-view>
+  </block>
   <!-- 刷新按钮 -->
   <view class="refresh-container" bindtap="refreshList">
     <image class="refresh-bg" src="/assets/images/icons/refresh-bg.png"></image>

project.config.json

@@ -27,6 +27,6 @@
     "tabIndent": "auto",
     "tabSize": 2
   },
-  "appid": "wx6c4bb5ef1e6c1e70",
+  "appid": "wx04b705205757217b",
   "testRoot": "minitest/"
 }

project.private.config.json

@@ -10,16 +10,16 @@
     "miniprogram": {
       "list": [
         {
-          "name": "内容库",
+          "name": "pages/video/video",
           "pathName": "pages/video/video",
-          "query": "shared_video_id=412355&tag_id=2317&share_count=1&type=tuiguang&jump=1",
+          "query": "shared_video_id=411802&tag_id=2072&share_count=1&type=tuiguang&jump=1&from=test",
           "launchMode": "default",
           "scene": 1007
         },
         {
-          "name": "pages/video/video",
+          "name": "内容库",
           "pathName": "pages/video/video",
-          "query": "shared_video_id=411802&tag_id=2072&share_count=1&type=tuiguang&jump=1",
+          "query": "shared_video_id=412355&tag_id=2317&share_count=1&type=tuiguang&jump=1",
           "launchMode": "default",
           "scene": 1007
         },