devbox
爱喝兽奶帝天荒
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【博主推荐】html好看的邀请函(附源码)_csdn免费邀请函模板

作者：爱喝兽奶帝天荒 | 2024-07-17 20:43:24

赞

踩

csdn免费邀请函模板

html制作电子邀请函

文章导航

利用HTML制作一个好看的电子邀请函，可以在这个基础上修改自己的相关信息，然后直接使用，可以直接发布运行访问。里面包含多种邀请函风格，可以用于结婚邀请函，宴请邀请函，年会邀请函，会议邀请函，节日邀请函，活动邀请函等。

– html + js + css

– 适配手机端的邀请函

前言

1.相关风格切换，可以修改背景图片，和文字样式等改变主题风格，变成自己喜欢的风格。
相关链接：html好看的字体 - html好看的动画效果 - 程序员前后端源码- 免费音乐下载

2.如果需要留言、二维码、部署服务器等相关特殊要求，可以联系我。

1. 3D星空邀请函

1.1 邀请函效果

动态效果：因为视频是横向的，界面是竖向的，所以视频效果看的会有一些不太理想，不过运行访问的代码是好看的，视频效果仅作参考。

3D星空邀请函

静态效果
请添加图片描述

1.2 邀请函代码

可以自定义图片文字和动作效果，可以自定义动画时间长短，可以自定义背景音乐，可以自定义文字字体和颜色，在原版框架上支持自定义更改效果，里面有psd图片源文件，也可以自己找好的图片素材。可以直接部署服务器，然后查阅。

index.html

<div class="swiper-wrapper">

<div class="swiper-slide slide-1 ">
 <img src="img/page1/logo.png"  class="logo animated" data-ani-name="fadeIn" data-ani-duration="1s" data-ani-delay="0.5s" />
 <div class="animated" data-ani-name="slideInRight" data-ani-duration="1s" data-ani-delay="1s">
 <img src="img/page1/3.png"  class="page1-img2"/>
 </div>
 <div class="animated" data-ani-name="bounceInDown" data-ani-duration="1s" data-ani-delay="1.2s">
 <img src="img/page1/4.png" / class="page1-img3">
 <div class="page1-footer">
       马上启航 - 加入我们
<div style="padding:5px;"></div>
       联系热线:010-1234567
 </div>
 </div>
</div>
<div class="swiper-slide slide-2 other-bg ">
 <p class="page1-item-text animated" data-ani-name="bounceInDown" data-ani-duration="1s" data-ani-delay="0s">-火热召集各方优秀博客文案中-</p>
 <div class="page1-jrwm animated" data-ani-name="bounceIn" data-ani-duration="2s" data-ani-delay="0.7s">
 <img src="img/page2/1.png" />
 </div>
 <div class="animated" data-ani-name="slideInLeft" data-ani-duration="1s" data-ani-delay="1s">
 <img src="img/page2/3.png" / class="page2-img3 pt-center"> 
 <div class="page2-info pt-center">
     <div style="color:#EFC443;font-weight:bold;">CSDN博客占比</div>
     <p>
        CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
     </p>
 </div>
 </div>
 <div class="animated" data-ani-name="slideInRight" data-ani-duration="1s" data-ani-delay="1.2s">
 <div class="page2-info pt-center number2">
     <div style="color:#EFC443;font-weight:bold;">知乎占比</div>
     <p>
        知乎,中文互联网高质量的问答社区和创作者聚集的原创内容平台,于 2011 年 1 月正式上线,以「让人们更好的分享知识、经验和见解,找到自己的解答」为品牌使命。
     </p>
 </div> 
 </div>
</div>     
<div class="swiper-slide slide-2 other-bg   slide-3">
 <p class="page1-item-text animated" data-ani-name="bounceInDown" data-ani-duration="1s" data-ani-delay="0s">-火热召集各方优秀博客文案中-</p>
 <div class="page1-jrwm animated" data-ani-name="bounceIn" data-ani-duration="2s" data-ani-delay="0.7s">
 <img src="img/page2/1.png" />
 </div>
 <div class="animated" data-ani-name="slideInLeft" data-ani-duration="1s" data-ani-delay="1s">
 <img src="img/page2/2.png"  class="page2-img3 pt-center" /> 
 <div class="page2-info pt-center">
     <div style="color:#EFC443;font-weight:bold;">移动互联网生活无处不在</div>
     <p>
        《中国互联网络发展状况统计报告》显示，截至2017年6月，中国网民规模达到7.51亿；租房、打车、叫外卖，互联网生活更加便捷。
     </p>
 </div>
 </div>
 <div class="animated" data-ani-name="slideInRight" data-ani-duration="1s" data-ani-delay="1.2s">
 <img src="img/page2/8.png"  class="page2-img9 pt-center" />  
 <div class="page2-info pt-center number2">
     <div style="color:#EFC443;font-weight:bold;">万物互联时代</div>
     <p>
       万物互联（IoE）定义为将人，流程，数据和事物结合一起使得网络连接变得更加相关，更有价值。万物互联将信息转化为行动，给企业，个人和国家创造新的功能，并带来更加丰富的体验和前所未有的经济发展机遇
     </p>
 </div> 
 </div>
</div>
<div class="swiper-slide slide-4 other-bg ">
 <p class="page1-item-text animated" data-ani-name="bounceInDown" data-ani-duration="1s" data-ani-delay="0s">-火热召集各方优秀博客文案中-</p>
 <div class="page1-jrwm cm-jrwm  animated" data-ani-name="bounceIn" data-ani-duration="1.5s" data-ani-delay="0.8s">
 <img src="img/page4/1.png" width="100%"/>
 </div>
 <img src="img/page4/2.png"  class="page4-img2 pt-center animated" data-ani-name="swing" data-ani-duration="1.5s" data-ani-delay="1s"/> 
 <div class="page4-circle-box pt-center">
        <div class="circle-li animated" data-ani-name="bounceInLeft" data-ani-duration="1.5s" data-ani-delay="1.3s">
            <img src="img/page4/3.png" />
            <span>
                   CSDN的时代到来了
            </span>
        </div>
        <div class="circle-li animated" data-ani-name="bounceInLeft" data-ani-duration="1.5s" data-ani-delay="1.6s">
            <img src="img/page4/4.png" />
            <span>
                   知乎的时代到来了
            </span>
        </div>
        <div class="circle-li animated" data-ani-name="bounceInLeft" data-ani-duration="1.5s" data-ani-delay="1.9s">
            <img src="img/page4/5.png" />
            <span>
                   万物互联的时代到来了
            </span>
        </div>
 </div> 
</div>
<div class="swiper-slide slide-4 other-bg slide-12" >
   <p class="page1-item-text animated" data-ani-name="bounceInDown" data-ani-duration="1s" data-ani-delay="0s">-火热召集各方优秀博客文案中-</p>
   <div class="animated " data-ani-name="flipInX" data-ani-duration="1.5s" data-ani-delay="0.5s" >
        <div class="page1-jrwm cm-jrwm"><img src="img/page12/01.png" width="100%"></div>
        <div class="page10-tips pt-center">与众多知名品牌强强联手</div>
   </div> 
   <div class="animated" data-ani-name="bounceInUp" data-ani-duration="2s" data-ani-delay="1s">
    <div class="page11-circle-box page12-circle-box pt-center">
           <img src="img/page12/02.png" />
           <img src="img/page12/03.png" />
           <img src="img/page12/04.png" />
           <img src="img/page12/05.png" />
           <img src="img/page12/06.png" />
           <img src="img/page12/07.png" />
           <img src="img/page12/08.png" />
           <img src="img/page12/09.png" />
           <img src="img/page12/10.png"/>
           <img src="img/page12/11.png" />
           <img src="img/page12/12.png"/>
           <img src="img/page12/13.png" />
    </div>
   </div> 
</div>
<div class="swiper-slide slide-4 other-bg slide-5 ">
 <p class="page1-item-text animated" data-ani-name="bounceInDown" data-ani-duration="1s" data-ani-delay="0s">-火热召集各方优秀博客文案中-</p>
 <div class="page1-jrwm cm-jrwm animated" data-ani-name="bounceIn" data-ani-duration="1.5s" data-ani-delay="0.8s"><img src="img/page5/1.png" width="100%"/></div>
 <div class="page4-circle-box pt-center page5-circle-box">
        <div class="circle-li animated" data-ani-name="fadeInLeft" data-ani-duration="1.3s" data-ani-delay="1.9s">
            <img src="img/page5/2.png" />
            <span>
                   <b>弹药</b><br/>
                   200万以上投资资金+100万以上流动资金
            </span>
        </div>
        <div class="circle-li animated" data-ani-name="fadeInRight" data-ani-duration="1.6s" data-ani-delay="1.9s">
            <img src="img/page5/3.png" />
            <span>
                   <b>装备</b><br/>
                   拥有400平米以上的办公场所
            </span>
        </div>
        <div class="circle-li animated" data-ani-name="fadeInLeft" data-ani-duration="1.9s" data-ani-delay="1.9s">
            <img src="img/page5/4.png" />
            <span>
                   <b>联盟</b><br/>
                   有想法，有目标，有拼搏认同万物互联
            </span>
        </div>
 </div> 
</div>
<div class="swiper-slide slide-4 other-bg slide-6 ">
 <p class="page1-item-text animated" data-ani-name="bounceInDown" data-ani-duration="1s" data-ani-delay="0s">-火热召集各方优秀博客文案中-</p>
 <div class="page1-jrwm cm-jrwm animated" data-ani-name="bounceIn" data-ani-duration="1.5s" data-ani-delay="0.8s"><img src="img/page6/1.png" width="100%"/></div>
 <div class="pg6-warper pt-center">
     <div class="pg6-slider animated" data-ani-name="fadeInLeft" data-ani-duration="1s" data-ani-delay="1s"><span>01</span><em>服务维护</em></div>
     <div class="pg6-slider animated" data-ani-name="fadeInRight" data-ani-duration="1s" data-ani-delay="1.2s"><span>02</span><em>技术支持</em></div>
     <div class="pg6-slider animated" data-ani-name="fadeInLeft" data-ani-duration="1s" data-ani-delay="1.4s"><span>03</span><em>代码管理</em></div>
     <div class="pg6-slider animated" data-ani-name="fadeInRight" data-ani-duration="1s" data-ani-delay="1.6s"><span>04</span><em>文章管理</em></div>
     <div class="pg6-slider animated" data-ani-name="fadeInLeft" data-ani-duration="1s" data-ani-delay="1.8s"><span>05</span><em>博客管理</em></div>
     <div class="pg6-slider animated" data-ani-name="fadeInRight" data-ani-duration="1s" data-ani-delay="2s"><span>06</span><em>技术指导</em></div>
     <div class="pg6-slider animated" data-ani-name="fadeInLeft" data-ani-duration="1s" data-ani-delay="2.2s"><span>07</span><em>资源共享</em></div>
     <div class="pg6-slider animated" data-ani-name="fadeInRight" data-ani-duration="1s" data-ani-delay="2.4s"><span>08</span><em>问答平台</em></div>
     <div class="pg6-slider animated" data-ani-name="fadeInLeft" data-ani-duration="1s" data-ani-delay="2.6s"><span>09</span><em>客服技术</em></div>
     <div class="pg6-slider animated" data-ani-name="fadeInRight" data-ani-duration="1s" data-ani-delay="2.8s"><span>10</span><em>平台供应</em></div>
 </div>
</div>
    <div class="swiper-slide slide-4 other-bg slide-7 ">
 <p class="page1-item-text animated" data-ani-name="bounceInDown" data-ani-duration="1s" data-ani-delay="0s">-火热召集各方优秀博客文案中-</p>
 <div class="page1-jrwm cm-jrwm animated" data-ani-name="bounceIn" data-ani-duration="1.5s" data-ani-delay="0.8s"><img src="img/page7/1.png" width="100%"/></div>
 <div class="pg7-warper pt-center">
     <div class="pg7-slider animated" data-ani-name="fadeIn" data-ani-duration="1.5s" data-ani-delay="0s"><span>STEP 01</span>咨询加盟内容</div>
     <div class="pg7-slider animated" data-ani-name="fadeIn" data-ani-duration="1.5s" data-ani-delay="0.5s"><span>STEP 02</span>填写加盟申请表</div>
     <div class="pg7-slider animated" data-ani-name="fadeIn" data-ani-duration="1.5s" data-ani-delay="1s"><span>STEP 03</span>总部调查评估</div>
     <div class="pg7-slider animated" data-ani-name="fadeIn" data-ani-duration="1.5s" data-ani-delay="1.5s"><span>STEP 04</span>签定合作协议</div>
     <div class="pg7-slider animated" data-ani-name="fadeIn" data-ani-duration="1.5s" data-ani-delay="2s"><span>STEP 05</span>总部参观培训</div>
     <div class="pg7-slider animated" data-ani-name="fadeIn" data-ani-duration="1.5s" data-ani-delay="2.5s"><span>STEP 06</span>服务投入使用</div>
 </div>
</div>
<div class="swiper-slide slide-4 other-bg slide-8 ">
 <p class="page1-item-text animated" data-ani-name="bounceInDown" data-ani-duration="1s" data-ani-delay="0s">-火热召集各方优秀博客文案中-</p>
 <div class="page1-jrwm cm-jrwm animated" data-ani-name="bounceIn" data-ani-duration="1.5s" data-ani-delay="0.8s"><img src="img/page8/1.png" width="100%"/></div>
 <div class="pg8-warper pt-center">
     <div class="animated" data-ani-name="bounceIn" data-ani-duration="1.5s" data-ani-delay="1.2s">
     <input type="text" name="" class="input-text" placeholder="意向博客" />
     <input type="text" name="" class="input-text" placeholder="您的姓名"/>
     <input type="text" name="" class="input-text" placeholder="您的手机号码"/>
     <input type="text" name="" class="input-text" placeholder="您的邮箱"/>
     </div>
     <input type="button" name="" value="申请" class="jm-submit animated" data-ani-name="shake" data-ani-duration="1.5s" data-ani-delay="1.5s"  />
 </div>
</div>
<div class="swiper-slide slide-4 other-bg slide-9 ">
   <p class="page1-item-text animated" data-ani-name="bounceInDown" data-ani-duration="1s" data-ani-delay="0s">-火热召集各方优秀博客文案中-</p>
   <div class="animated" data-ani-name="flipInX" data-ani-duration="1.5s" data-ani-delay="0.5s">
   <img src="img/page1/logo.png" / class="page9-img1 pt-center" > 
   <!--<div class="page1-jrwm cm-jrwm"><img src="img/page9/2.png" width="100%"/></div> -->
   </div>
   <div class="pg9-warper pt-center">
   <div class="animated" data-ani-name="flash" data-ani-duration="1.5s" data-ani-delay="1s">
      <p class="tel">010-1234567</p>
      <p class="netweek"><a href="https://blog.csdn.net/weixin_43151418">https://blog.csdn.net/weixin_43151418</a></p>
      <p class="email">1376174032@qq.com</p>
      <p class="address">北京市朝阳区三里屯22号2</p>
   </div>
   <div class="animated" data-ani-name="swing" data-ani-duration="1.5s" data-ani-delay="1.5s">
      <img src="img/page9/7.png"  class="page9-img9" />
      <span class="page9-wx-name">微信公众号二维码</span>
   </div>
   </div>
</div>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200

1.3 源码结构

代码直接运行使用

在这里插入图片描述

2.超炫星空邀请函

2.1 邀请函效果

因为视频是横向的，界面是竖向的，所以视频效果看的会有一些不太理想，不过运行访问的代码是好看的，视频效果仅作参考。

超炫星空邀请函

静态效果
请添加图片描述

2.2 邀请函代码

可以自定义图片文字和动作效果，可以自定义动画时间长短，可以自定义背景音乐，可以自定义文字字体和颜色，在原版框架上支持自定义更改效果，里面有psd图片源文件，也可以自己找好的图片素材。可以直接部署服务器，然后查阅。

index.html

<div class="swiper-slide">
    <div class="four">
       <div class="four-box ani" swiper-animate-effect=" pulse">
           <div class="four-top">
              <div class="four-top-img">
                   <img class="ani" swiper-animate-effect="rotateIn" swiper-animate-delay="0.5s" src="img/yuanhukuang.png">
              </div>
               <span class="ani" swiper-animate-effect="flipInX" swiper-animate-delay="1.5s">博主专栏</span>
           </div>
           <div class="four-main">
               <p class="ani" swiper-animate-effect=" rotateInDownLeft" swiper-animate-delay="2s">html专栏</p>
               <p class="ani" swiper-animate-effect=" rotateInDownRight" swiper-animate-delay="2.5s">资源源码专栏</p>
               <p class="ani" swiper-animate-effect=" rotateInDownLeft" swiper-animate-delay="3s">数据库使用专栏</p>
               <p class="ani" swiper-animate-effect=" rotateInDownRight" swiper-animate-delay="3.5s">svg专栏</p>
               <p class="ani" swiper-animate-effect=" rotateInDownLeft" swiper-animate-delay="4s">uniapp专栏</p>
               <p class="ani" swiper-animate-effect=" rotateInDownRight" swiper-animate-delay="4.5s">JAVA专栏</p>
<p class="ani" swiper-animate-effect=" rotateInDownRight" swiper-animate-delay="5s">C#专栏</p>
           </div>
       </div>
   </div>
</div>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

2.3 源码结构

代码直接运行使用

在这里插入图片描述

3.简约古朴邀请函

3.1 邀请函效果

动态效果：因为视频是横向的，界面是竖向的，所以视频效果看的会有一些不太理想，不过运行访问的代码是好看的，视频效果仅作参考。

简约古朴邀请函

静态效果
请添加图片描述

3.2 邀请函代码

可以自定义图片文字和动作效果，可以自定义动画时间长短，可以自定义背景音乐，可以自定义文字字体和颜色，在原版框架上支持自定义更改效果，里面有psd图片源文件，也可以自己找好的图片素材。可以直接部署服务器，然后查阅。

index.html

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide one">

    <div class="top">
      <img src="img/bg.gif" alt="">
    </div>
 <div style="color:white;">
<img src="img/yaoqh.png" alt="邀请函">
 </div>

    </div>
    <div class="swiper-slide two">
      <div class="text">
      <p class="top ani" style="font-weight:bold;" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay="0.3s">黑风白夕您好：</p>
         <p class="center ani" style="font-size:18px;" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay="1.5s">
   借助于网络，大陆的言情小说经历了从沉寂到兴盛，打破了几十年来台湾地区和香港地区一统天下的局面，到今天，涌现了不少优秀的作者和作品，纵使有这么多好故事，《且试天下》依旧是颇具代表性的一部经典作品，从江湖到庙堂，在情之外还传...
   <br/>
   &nbsp;&nbsp;&nbsp;&nbsp;
   您两的传奇爱情感动了我，特邀请您两参加我的饭局，希望莅临。
   </p>
      <p class="bo ani" style="text-align:right;" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay="2s">时间：02月14日16时50分</p>
      <p class="bo ani" style="text-align:right;" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay="2.5s">地点：北京全聚德</p>
      <p class="bo ani" style="text-align:right;" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay="3s">邀请人：且试天下剧组</p>
    </div>
    </div>
  </div>
</div>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

3.3 源码结构

代码直接运行使用

在这里插入图片描述

4.酷炫古风邀请函

4.1 邀请函效果

动态效果：因为视频是横向的，界面是竖向的，所以视频效果看的会有一些不太理想，不过运行访问的代码是好看的，视频效果仅作参考。

酷炫古风邀请函

静态效果
请添加图片描述

4.2 邀请函代码

可以自定义图片文字和动作效果，可以自定义动画时间长短，可以自定义背景音乐，可以自定义文字字体和颜色，在原版框架上支持自定义更改效果，里面有psd图片源文件，也可以自己找好的图片素材。可以直接部署服务器，然后查阅。

index.html

<div class="page page2">
  <div class="photo-wrap">
    <div class="full-bg js-animate animated animation-1000"
      style="background-image: url(./public/photo/3.jpg);width: 100%;height: 100%;" data-animate="myzoomIn">
    </div>
  </div>
  <div class="ele-wrap">
    <div class="js-animate animated" data-animate="bounceInDown" data-time="0"
      style="position: absolute;top: 60%;width: 80%;left: 15%;text-align: center;">
      <img style="max-width: 100%;" src="./public/meta/wedding.png">
    </div>
    <div style="position: absolute;top: 69%;left: 0;width: 100%;text-align: center;height: 20%;">
      <img class="js-animate animated animation-1000" data-animate="minzoomCycle" data-time="500"
        src="./public/meta/hun.png" style="position: absolute;left: 15%;">
      <img class="js-animate animated animation-1000" data-animate="minzoomCycle" data-time="600"
        src="./public/meta/li.png" style="position: absolute;left: 30%;">
      <img class="js-animate animated animation-1000" data-animate="minzoomCycle" data-time="700"
        src="./public/meta/yao.png" style="position: absolute;left: 44%; top: 5%;">
      <img class="js-animate animated animation-1000" data-animate="minzoomCycle" data-time="800"
        src="./public/meta/qing.png" style="position: absolute;left: 56%;top: 5%;">
      <img class="js-animate animated animation-1000" data-animate="minzoomCycle" data-time="900"
        src="./public/meta/han.png" style="position: absolute;left: 69%;top: 5%;">
    </div>
    <div class="js-animate animated animation-500 radius-box" data-animate="rotateIn" data-time="1500"
      style="position: absolute;top: 80%;text-align: center;">
    </div>
    <div class="js-animate animated animation-500 radius-box" data-animate="rotateIn" data-time="2000"
      style="position: absolute;top: 80%;text-align: center;">
      <div class="js-animate animated animation-500" data-animate="fadeInRight" data-time="2500"
        style="position: absolute;left: 10%;color:orange;">
        新娘: 白风夕
      </div>
      <div class="js-animate animated animation-500" data-animate="fadeInLeft" data-time="2500"
        style="position: absolute;right: 10%;color:orange;">
        新郎: 黑丰息
      </div>
      <div class="js-animate animated animation-800 circle-box" data-animate="myzoomIn" data-time="3000"
        data-sec="shake" data-sectime="800">
        
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/爱喝兽奶帝天荒/article/detail/841896
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。