700字范文 > HTML+CSS+JS制作结婚邀请函代码(程序员专属情人节表白网站)

HTML+CSS+JS制作结婚邀请函代码(程序员专属情人节表白网站)

时间：2022-05-02 03:56:44

❤ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业：【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (125套) 】
七夕来袭！是时候展现专属于程序员的浪漫了！你打算怎么给心爱的人表达爱意？鲜花礼物？代码表白？还是创意DIY？或者…无论那种形式，快来秀我们一脸吧！

📂文章目录

二、📚网站介绍三、🔗网站效果▶️1.视频演示🧩 2.图片演示四、💒 网站代码🧱HTML结构代码🏠CSS样式代码五、🎁更多源码

二、📚网站介绍

📒网站文件方面：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。

其中：

（1）📜html文件包含：其中index.html是首页、其他html为二级页面；

（2）📑 css文件包含：css全部页面样式,3D动态效果,雪花飘落等等

（3）📄 js文件包含：页面炫酷效果实现

三、🔗网站效果

▶️1.视频演示

93-七夕活动邀请函手机动态模板

🧩 2.图片演示

四、💒 网站代码

🧱HTML结构代码

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"><title>Document</title><link rel="stylesheet" href="css/swiper-3.4.2.min.css"><link rel="stylesheet" href="css/animate.css"><style>* {margin: 0;padding: 0;/*border: 1px solid red;*/}html,body {height: 100%;}body {font-family: Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 14px;color: #000;margin: 0;padding: 0;}.swiper-container {width: 540px;height: 100%;overflow: hidden;}.swiper-slide {text-align: center;font-size: 18px;background: #fff;overflow: hidden;Center slide text vertically display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;}.section1 {background: url(images/beijing_1.png);background-size: 100% 100%;}.img1_1 {position: absolute;top: -5%;left: 0%;width: 100%;height: 110%}.img1_2 {position: absolute;top: 5%;left: 5%;bottom: 5%;right: 5%;width: 90%;height: 90%;opacity: 0.5;}.img1_3 {position: absolute;top: 7%;left: 9%;bottom: 7%;right: 9%;width: 82%;height: 86%;}.img1_4 {position: absolute;top: 23%;left: -18%;transform: rotate(140deg);width: 40%;height: 25%;/*opacity: 0;*/}.img1_5 {position: absolute;top: 33%;left: -15%;transform: rotate(125deg);width: 40%;height: 25%;}@keyframes yezib {0% {top: 45%;left: -55%;}100% {top: 33%;left: -15%;}}.yezib {animation: yezib 2s;}.img1_6 {position: absolute;left: 27%;bottom: -10%;transform: rotate(90deg);width: 45%;height: 25%;}.img1_7 {position: absolute;right: 0%;bottom: -4%;width: 45%;height: 25%;}@keyframes yezid {0% {right: 0%;bottom: -50%;}100% {right: 0%;bottom: -4%;}}.yezid {animation: yezid 3s;}.img1_8 {position: absolute;right: -10%;bottom: 10%;transform: rotate(-130deg);width: 40%;height: 20%;}@keyframes yezie {0% {right: -50%;bottom: 10%;}100% {right: -10%;bottom: 10%;}}.yezie {animation: yezie 2.5s;}.img1_9 {position: absolute;left: 25%;width: 50%;top: 14%;display: none;}.img1_10 {position: absolute;bottom: 38%;left: 25%;width: 50%;display: none;}.img1_11 {position: absolute;bottom: 30%;left: 25%;width: 50%;display: none;}@keyframes tu {0% {top: 107%;}100% {top: 7%;}}.tu1 {animation: tu 1s;}.img2_1 {position: absolute;width: 240%;height: 106%;left: 0%;}.img2_2 {position: absolute;width: 60%;height: 106%;left: 75%;background-color: rgb(35, 25, 77);transform: rotate(-2deg);display: none;}.img2_3 {position: absolute;left: 60%;top: 20%;background-color: rgb(35, 25, 77);font-size: 12px;color: rgba(222, 184, 129, 0.843137);/*display: none;*/}#content1 {position: absolute;width: 100%;height: 100%;font-size: 12px;color: rgba(222, 184, 129, 0.843137);}.img2_4 {position: absolute;left: 100%;bottom: -15%;width: 70%;height: 42%;animation: circle 10s infinite linear;}@-webkit-keyframes circle {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}.img3_1 {position: absolute;top: 0%;left: 0%;width: 100%;height: 100%;}.img3_2 {position: absolute;top: 0%;left: 0%;width: 100%;height: 100%;text-align: center;}.img3_2 ul {/*position: absolute;*/width: 100%;height: 100%;text-align: center;}.img3_2 ul li {/*position: absolute;*/opacity: 0;width: 100%;/*height: 10%;*/}#content2 {/*position: absolute;*/width: 8.4%;height: 100%;font-size: 16px;color: rgba(222, 184, 129, 0.843137);}.img3_2 ul li:last-child {position: absolute;bottom: 0%;left: 0%;width: 100%;height: 20%;opacity: 1;}.img3_3 {width: 100%;height: 100%;}.img4_1 {position: absolute;top: 0%;left: 0%;width: 100%;height: 100%;}.img4_2 {position: absolute;top: 5%;left: 10%;width: 100%;font-size: 20px;height: 5%;opacity: 0;text-align: left;/*background-color: red;*/}.img4_3 {position: absolute;top: 10%;left: 10%;width: 100%;font-size: 20px;height: 5%;opacity: 0;text-align: left;/*background-color: red;*/}@-webkit-keyframes leftin1 {0% {left: -50%;}100% {left: 10%;}}.leftin1 {animation: leftin1 1s ease-out;/*animation-timing-function:ease-out;*/}.img4_4 {position: absolute;top: 15%;left: 10%;width: 100%;font-size: 20px;height: 5%;text-align: left;/*background-color: red;*/}.img4_5 {position: absolute;top: 20%;left: 10%;width: 100%;font-size: 20px;height: 5%;text-align: left;opacity: 0;/*background-color: red;*/}@-webkit-keyframes leftin2 {0% {left: -50%;}100% {left: 10%;}}.leftin2 {animation: leftin2 1s ease-out;/*animation-delay: 1s;*//*animation-timing-function:ease-out;*/}.img4_6 {position: absolute;top: 25%;left: 10%;width: 100%;font-size: 20px;height: 8%;text-align: left;opacity: 0;/*background-color: red;*/}@-webkit-keyframes leftin3 {0% {left: -50%;}100% {left: 10%;}}.leftin3 {animation: leftin2 1s ease-out;/*animation-delay: 1.5s;*//*animation-timing-function:ease-out;*/}.img4_7 {position: absolute;top: 33%;left: 10%;width: 100%;font-size: 20px;height: 5%;text-align: left;/*background-color: red;*/}.img4_8 {position: absolute;top: 38%;left: 10%;width: 100%;font-size: 20px;height: 5%;text-align: left;opacity: 0;/*background-color: red;*/}.img4_9 {position: absolute;top: 43%;left: 10%;width: 100%;font-size: 20px;height: 5%;text-align: left;opacity: 0;/*background-color: red;*/}@-webkit-keyframes leftin4 {0% {left: -50%;}100% {left: 10%;}}.leftin4 {animation: leftin4 1s ease-out;/*animation-delay: 2s;*//*animation-timing-function:ease-out;*/}.img4_10 {position: absolute;top: 62%;left: -8%;width: 110%;height: 50%;transform: rotate(-8deg);opacity: 0;}@-webkit-keyframes rightin1 {0% {left: 32%;}100% {left: -8%;}}.rightin1 {animation: rightin1 1s ease-out;}.img4_11 {position: absolute;top: 50%;left: 5%;width: 90%;height: 50%;opacity: 0;}@-webkit-keyframes rightin2 {0% {left: 45%;}100% {left: 5%;}}.rightin2 {animation: rightin2 1s ease-out;/*animation-delay: 2s;*//*animation-timing-function:ease-out;*/}.img5_1 {position: absolute;top: 0%;left: 0%;width: 100%;height: 100%;}.img5_2 {position: absolute;top: 5%;left: 0%;width: 100%;font-size: 20px;height: 5%;opacity: 0;text-align: center;/*background-color: red;*/}.img5_3 {position: absolute;top: 10%;left: 0%;width: 100%;font-size: 20px;height: 5%;opacity: 0;text-align: center;/*background-color: red;*/}.img5_4 {position: absolute;top: 15%;left: 0%;width: 100%;font-size: 20px;height: 5%;text-align: center;/*opacity: 0;*//*background-color: red;*/}.img5_5 {position: absolute;top: 20%;left: 0%;width: 100%;font-size: 20px;height: 5%;text-align: center;opacity: 0;/*background-color: red;*/}.img5_6 {position: absolute;top: 28%;left: 0%;width: 100%;font-size: 20px;height: 8%;text-align: center;/*opacity: 0;*//*background-color: red;*/}.img5_7 {position: absolute;top: 33%;left: 0%;width: 100%;font-size: 20px;height: 5%;text-align: center;opacity: 0;/*background-color: red;*/}.img5_8 {position: absolute;top: 50%;left: 0%;width: 100%;height: 50%;text-align: center;opacity: 0;/*background-color: red;*/}.img6_2 {position: absolute;top: 20%;left: -13%;width: 80%;height: 80%;/*text-align: right;*/opacity: 0;/*background-color: red;*/}.img6_3 {position: absolute;top: 5%;right: 15%;width: 80%;height: 80%;text-align: right;opacity: 0;/*background-color: red;*/}.img6_4 {position: absolute;top: 10%;right: 15%;width: 80%;height: 80%;text-align: right;opacity: 0;/*background-color: red;*/}.img6_5 {position: absolute;top: 15%;right: 15%;width: 80%;height: 80%;text-align: right;/*opacity: 0;*//*background-color: red;*/}.img6_6 {position: absolute;top: 20%;right: 15%;width: 80%;height: 80%;text-align: right;opacity: 0;/*background-color: red;*/}.img6_7 {position: absolute;top: 28%;right: 15%;width: 80%;height: 80%;text-align: right;/*opacity: 0;*//*background-color: red;*/}.img6_8 {position: absolute;top: 33%;right: 15%;width: 80%;height: 80%;text-align: right;opacity: 0;/*background-color: red;*/}.img6_9 {position: absolute;top: 38%;right: 15%;width: 80%;height: 80%;text-align: right;opacity: 0;/*background-color: red;*/}.img6_10 {position: absolute;top: 43%;right: 15%;width: 80%;height: 80%;text-align: right;opacity: 0;/*background-color: red;*/}.img6_11 {position: absolute;top: 48%;right: 15%;width: 80%;height: 80%;text-align: right;opacity: 0;/*background-color: red;*/}.img7_1 {position: absolute;top: 45%;right: 4%;width: 85%;height: 55%;opacity: 0;/*background-color: red;*/}.img7_2 {position: absolute;width: 100%;text-align: center;top: 5%;left: 0%;opacity: 0;}.img7_3 {position: absolute;width: 100%;text-align: center;top: 10%;left: 0%;opacity: 0;}.img7_4 {position: absolute;width: 100%;text-align: center;top: 15%;left: 0%;/*opacity: 0;*/}.img7_5 {position: absolute;width: 100%;text-align: center;top: 20%;left: 0%;opacity: 0;}.img7_6 {position: absolute;width: 100%;text-align: center;top: 27%;left: 0%;/*opacity: 0;*/}.img7_7 {position: absolute;width: 100%;text-align: center;top: 32%;left: 0%;opacity: 0;}.section8 {background: url(images/beijing_1.png);background-size: 100% 100%;}.img8_1 {position: absolute;top: -5%;left: 0%;width: 100%;height: 110%}.img8_2 {position: absolute;top: 5%;left: 5%;bottom: 5%;right: 5%;width: 90%;height: 90%;opacity: 0.5;}.img8_3 {position: absolute;top: 7%;left: 9%;bottom: 7%;right: 9%;width: 82%;height: 86%;}.img8_4 {position: absolute;top: 23%;left: -18%;transform: rotate(140deg);width: 40%;height: 25%;/*opacity: 0;*/}.img8_5 {position: absolute;top: 33%;left: -15%;transform: rotate(125deg);width: 40%;height: 25%;}.img8_6 {position: absolute;left: 27%;bottom: -10%;transform: rotate(90deg);width: 45%;height: 25%;}.img8_7 {position: absolute;right: 0%;bottom: -4%;width: 45%;height: 25%;}@keyframes yezia {0% {left: -50%;}100% {left: -18%;}}.yezia {animation: yezia 1.5s;}@keyframes yezib {0% {top: 45%;left: -55%;}100% {top: 33%;left: -15%;}}.yezib {animation: yezib 2s;}@keyframes yezic {0% {left: 27%;bottom: -50%;}100% {left: 27%;bottom: -10%;}}.yezic {animation: yezic 3.5s;}@keyframes yezid {0% {right: 0%;bottom: -50%;}100% {right: 0%;bottom: -4%;}}.yezid {animation: yezid 3s;}.img8_8 {position: absolute;right: -10%;bottom: 10%;transform: rotate(-130deg);width: 40%;height: 20%;}@keyframes yezie {0% {right: -50%;bottom: 10%;}100% {right: -10%;bottom: 10%;}}.yezie {animation: yezie 2.5s;}@keyframes biankuang {0% {top: -100%;left: 5%;}100% {top: 5%;left: 5%;bottom: 5%;right: 5%;}}.biankuang {animation: biankuang 1s;}@keyframes tu {0% {top: 107%;}100% {top: 7%;}}.tu1 {animation: tu 1s;}.wenzi1 {position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;opacity: 0;/*white-space: pre;*//*line-height: 100%;*/}.wenzi8_1 {position: relative;width: 50px;font-size: 64px;color: #fff;top: 10%;}.wenzi2 {position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;opacity: 0;/*white-space: pre;*//*line-height: 100%;*/}.wenzi8_2 {position: relative;width: 50px;font-size: 64px;color: #fff;top: 20%;/*opacity: 0;*/}.img8_9 {position: absolute;width: 35%;height: 11%;top: 11%;left: 32%;opacity: 0;}.img8_10 {position: absolute;width: 220%;height: 25%;top: 25%;left: 10%;opacity: 0;}.img8_11 {background: url(images/daoxibeijing.jpg);position: absolute;width: 70%;height: 10%;top: 52%;left: 15%;opacity: 0;}.img8_11_1 {position: absolute;width: 100%;height: 90%;top: 0%;left: 0%;/*opacity: 0;*/}.img_hengxian1 {background: url(images/hengxian.png);background-size: 100% 100%;position: absolute;width: 70%;height: 5%;top: 47%;left: 15%;opacity: 0;}.img_hengxian2 {background: url(images/hengxian.png);background-size: 100% 100%;position: absolute;width: 70%;height: 5%;top: 62%;left: 15%;opacity: 0;}.wenzi3 {position: absolute;width: 100%;height: 10%;top: 72%;left: 0%;text-align: center;font-size: 16px;color: #fff;opacity: 0;}.btn {background: url(images/bgmBtn.svg);background-size: 100% 100%;position: absolute;width: 30px;height: 30px;top: 6%;right: 6%;z-index: 999;}.btnonclick {animation: circle 1s infinite linear;}</style></head><body><div class="swiper-container"><div class="btn"></div><audio id="video" autoplay src="/o_1aj4i1djr340g3h1v2t1e6j1vga9.mp3"></audio><div class="swiper-wrapper"><div class="swiper-slide section1"><img class="img1_1" src="images/1-2.png"><img class="img1_2" src="images/1_biankuang.png"><img class="img1_3" src="images/1-1.png"><img class="img1_4" src="images/shuye_1.png"><img class="img1_5" src="images/shuye_2.png"><img class="img1_6" src="images/shuye_4.png"><img class="img1_7" src="images/shuye_2.png"><img class="img1_8" src="images/shuye_3.png"><img class="img1_9" src="images/xiaozhenbao.png"><img class="img1_10" src="images/yaoqinghan.png"><img class="img1_11" src="images/yingwenzi.png"></div><div class="swiper-slide section2"><img class="img2_1" src="images/ertubeijing.jpg" alt=""><div class="img2_2"></div><div class="img2_3"><span id="content1" style="white-space:pre"></div><img class="img2_4" src="images/ertuhua.png" alt=""></div><div class="swiper-slide section3"><img class="img3_1" src="images/santubeijing.png" alt=""><div class="img3_2"><ul style="height:100%;"><li style="font-size: 64px;color: rgb(171, 124, 68);">丰盛/美好</li><li style="font-size: 20px;color:rgb(2, 21, 120);height:10%;">我们用<span style="font-weight: bold;">工匠</span>精神</li><li style="line-height: inherit; font-size: 12px; background-color: initial; color: rgb(207, 157, 83);"><span id="content2" style="white-space:pre"></span></li><li style="font-size: 20px;font-family: fangzheng_sht;;color:rgb(2, 21, 120);">是人生中最幸福的滋味</li><li><img style="width:70%" src="images/santuwenzia.png" alt=""></li><br><li style="font-size: 20px; font-family: fangzheng_fst;color:rgb(2, 21, 120);">烹调精致美食</li><li><img style="width:30%" src="images/santuwenzib.png" alt=""></li><li><img style="width:70%" src="images/santuwenzic.png" alt=""></li><li><img class="img3_3" src="images/santudi.png" alt=""></li></ul></div></div><div class="swiper-slide section4"><img class="img4_1" src="images/santubeijing.png" alt=""><img class="img4_10" src="images/4-1.png" alt=""><img class="img4_11" src="images/4-2.png" alt=""><div class="img4_2"><span style="font-size: 20px;color:rgb(2, 21, 120);">控得住<span style="font-weight: bold;">混搭风</span></span></div><div class="img4_3"><span style="font-size: 20px;color:rgb(2, 21, 120);">聊得了<span style="font-weight: bold;">穿越剧</span></span></div><div class="img4_4"><span style="font-size: 20px;color:rgb(2, 21, 120);"><span style="font-weight: bold;">/</span></span></div><div class="img4_5"><span style="font-size: 20px;color:rgb(2, 21, 120);">比爷爷年纪更大</span></div><div class="img4_6"><span style="font-size: 32px; font-family: fangzheng_sht; color: rgb(171, 124, 68);">珍宝雀笼点心</span></div><div class="img4_7"><span style="font-size: 20px;color:rgb(2, 21, 120);"><span style="font-weight: bold;">/</span></span></div><div class="img4_8"><span style="font-size: 20px;color:rgb(2, 21, 120);">还能给味觉</span></div><div class="img4_9"><span style="font-size: 20px;color:rgb(2, 21, 120);">奏一曲<span style="font-weight: bold;">交响乐</span></span></div></div><div class="swiper-slide section5"><img class="img5_1" src="images/santubeijing.png" alt=""><img class="img5_8" src="images/5_1.png" alt=""><div class="img5_2"><span style="font-size: 20px; line-height: 20px; color:rgb(2, 21, 120);">在进入谈判桌之前</span></div><div class="img5_3"><span style="font-size: 20px; line-height: 20px; color:rgb(2, 21, 120);">不如先一起喝早茶</span></div><div class="img5_4"><span style="font-size: 20px;color:rgb(2, 21, 120);"><span style="font-weight: bold;">/</span></span></div><div class="img5_5"><span style="font-size: 32px; line-height: 32px; font-family: fangzheng_sht;color:rgb(171, 124, 68);">金箔翡翠虾饺皇</span></div><div class="img5_6"><span style="font-size: 20px;color:rgb(2, 21, 120);"><span style="font-weight: bold;">/</span></span></div><div class="img5_7"><span style="font-size: 20px; line-height: 20px;color:rgb(2, 21, 120);">台上<span style="font-weight: bold;">敌手</span>－台下<span style="font-weight: bold;">好友</span></span></div></div><div class="swiper-slide section6"><img class="img5_1" src="images/santubeijing.png" alt=""><img class="img6_2" src="images/6_1.png" alt=""><div class="img6_3"><span style="font-size: 20px; line-height: 20px; color: rgb(2, 21, 120); letter-spacing: 0px; background-color: initial;">千万别问</span></div><div class="img6_4"><span style="font-size: 20px; line-height: 20px; color: rgb(2, 21, 120);">该如何优雅地吃</span></div><div class="img6_5"><span style="font-size: 20px;color:rgb(2, 21, 120);"><span style="font-weight: bold;">/</span></span></div><div class="img6_6"><span style="font-size: 32px; line-height: 32px; color: rgb(171, 124, 68); letter-spacing: 0px; background-color: initial; font-family: fangzheng_sht;">鲜果拿破仑</span></div><div class="img6_7"><span style="font-size: 20px;color:rgb(2, 21, 120);"><span style="font-weight: bold;">/</span></span></div><div class="img6_8"><span style="font-size: 20px; line-height: 20px; color: rgb(2, 21, 120); letter-spacing: 0px; background-color: initial;">抛开形象</span></div><div class="img6_9"><span style="line-height: 20px; font-weight: bold; font-size: 24px; color: rgb(2, 21, 120);">一口闷</span></div><div class="img6_10"><span style="font-size: 20px; color: inherit; line-height: inherit; letter-spacing: 0px; background-color: initial; color: rgb(2, 21, 120);">懂吃的人</span></div><div class="img6_11"><span style="font-size: 24px; font-weight: bold; color: rgb(2, 21, 120);">最优雅</span></div></div><div class="swiper-slide section7"><img class="img5_1" src="images/santubeijing.png" alt=""><img class="img7_1" src="images/7_1.png" alt=""><div class="img7_2"><span style="font-size: 20px; line-height: 20px; color: rgb(2, 21, 120); letter-spacing: 0px; background-color: initial;">可以把话心情全部赶跑</span></div><div class="img7_3"><span style="font-size: 20px; line-height: 20px; color: rgb(2, 21, 120); letter-spacing: 0px; background-color: initial;">也能让好心情变更美的</span></div><div class="img7_4"><span style="font-size: 20px;color:rgb(2, 21, 120);"><span style="font-weight: bold;">/</span></span></div><div class="img7_5"><span style="font-size: 32px; line-height: 32px; color: rgb(171, 124, 68); letter-spacing: 0px; background-color: initial; font-family: fangzheng_sht;">象生法国鹅肝酥</span></div><div class="img7_6"><span style="font-size: 20px;color:rgb(2, 21, 120);"><span style="font-weight: bold;">/</span></span></div><div class="img7_7"><span style="font-size: 20px; line-height: 20px; color:rgb(2, 21, 120);"><span style="font-weight: bold;">我的你</span>－肯定喜欢</span></div></div><div class="swiper-slide section8"><img class="img8_1" src="images/beijing_8.png"><img class="img8_2" src="images/2_biankuang.png"><img class="img8_3" src="images/8_1.jpg"><img class="img8_4" src="images/shuye_1.png"><img class="img8_5" src="images/shuye_2.png"><img class="img8_6" src="images/shuye_4.png"><img class="img8_7" src="images/shuye_2.png"><img class="img8_8" src="images/shuye_3.png"><div class="wenzi1"><span class="wenzi8_1">珍<br>贵<br>的<br>你</span></div><div class="wenzi2"><span class="wenzi8_2">久<br>等<br>了</span></div><img class="img8_9" src="images/xiaozhenbao3.png" alt=""><img class="img8_10" src="images/521.png" alt=""><div class="img8_11"><img class="img8_11_1" src="images/daoxi.png" alt=""></div><div class="img_hengxian1"></div><div class="img_hengxian2"></div><div class="wenzi3"><span>邀请你与我共享美食（只限观看的你</span></div></div></div><div class="swiper-pagination"></div></div><script src="js/swiper-3.4.2.min.js"></script><script src="js/jquery-3.1.1.min.js"></script><script src="js/typed.min.js"></script><script>var swiper = new Swiper('.swiper-container', {direction: 'vertical',// loop: true,// 如果需要分页器pagination: '.swiper-pagination',onInit: function(swiper) {//Swiper初始化了//alert(swiper.activeIndex);提示Swiper的当前索引console.log("onInit" + swiper.activeIndex);$(".img1_2").addClass("biankuang").css("opacity", 0.5);$(".img1_3").addClass("tu1").css("opacity", 1);$(".img1_4").addClass("yezia").css("opacity", 1);$(".img1_5").addClass("yezib").css("opacity", 1);$(".img1_6").addClass("yezic").css("opacity", 1);$(".img1_7").addClass("yezid").css("opacity", 1);$(".img1_8").addClass("yezie").css("opacity", 1);$(".img1_9").delay(3000).fadeIn();$(".img1_10").delay(4000).fadeIn();$(".img1_11").delay(3500).fadeIn();},onSlideChangeEnd: function(swiper) {console.log("onSlideChangeEnd" + swiper.activeIndex);switch (swiper.activeIndex) {case 0:$(".img1_2").stop(true, true).addClass("biankuang").css("opacity", 0.5);$(".img1_3").stop(true, true).addClass("tu1").css("opacity", 1);$(".img1_4").stop(true, true).addClass("yezia").css("opacity", 1);$(".img1_5").stop(true, true).addClass("yezib").css("opacity", 1);$(".img1_6").stop(true, true).addClass("yezic").css("opacity", 1);$(".img1_7").stop(true, true).addClass("yezid").css("opacity", 1);$(".img1_8").stop(true, true).addClass("yezie").css("opacity", 1);$(".img1_9").stop(true, true).delay(3000).fadeIn();$(".img1_10").stop(true, true).delay(4000).fadeIn();$(".img1_11").stop(true, true).delay(3500).fadeIn();break;case 1:$(".img2_1").animate({left: "-84%"}, 1000, function() {$(".img2_2").stop(true, true).css("display", "block").animate({left: "51%"}, 1000).animate({left: "60%"}, 250).animate({left: "51%"}, 200).animate({left: "55%"}, 150).animate({left: "51%"}, 100, function() {$(".img2_4").stop(true, true).animate({left: "70%"});// $(".img2_3").stop(true,true).show(1000);$("#content1").animate({opacity: 1});$("#content1").fadeIn();$("#content1").text("");$("#content1").typed({strings: ["欧阳应霁曾说：\n\n不在于食材的珍稀 \n烹调的复杂 \n也不在于装潢的奢华 \n\n只有跟对的人在一起 \n彼此相伴、分享美味 \n才最是珍贵"],typeSpeed: 200,loopcount: false,showCursor: false,attr: null,// cursorChar: "~~~",});});});break;case 2:// $(".img3_3").addClass("bounceInUp animated").animate({opacity:"1"});$(".img3_2").children().children().eq(0).delay(7000).animate({opacity: "1"});$(".img3_2").children().children().eq(3).delay(7500).animate({opacity: "1"});$(".img3_2").children().children().eq(1).delay(8000).animate({opacity: "1"});$(".img3_2").children().children().eq(5).delay(8500).animate({opacity: "1"});$(".img3_2").children().children().eq(4).delay(9000).animate({opacity: "1"});$(".img3_2").children().children().eq(6).delay(9500).animate({opacity: "1"});$(".img3_2").children().children().eq(7).delay(10000).animate({opacity: "0"}, function() {$(this).addClass("bounceInDown animated").css("opacity", 1);});$(".img3_2").children().children().eq(8).delay(10500).animate({opacity: "1"}, function() {$(this).addClass("shake animated");});$(".img3_2").children().children().eq(2).css("opacity", "1");$("#content2").fadeIn();$("#content2").typed({strings: ["对的人，固然重要\n但我们认为\n美味是幸福最好的奖赏"],typeSpeed: 200,// loopcount: false,showCursor: false,attr: null,});$("#content2").delay(6500).fadeOut();break;case 3:$(".img4_10").addClass("rightin1").css("opacity", 1);$(".img4_11").addClass("rightin2").css("opacity", 1);$(".img4_2").delay(500).animate({"opacity": 1}, 0, function() {$(this).addClass("leftin1");});$(".img4_3").delay(500).animate({"opacity": 1}, 0, function() {$(this).addClass("leftin1");});$(".img4_5").delay(1000).animate({"opacity": 1}, 0, function() {$(this).addClass("leftin2");});$(".img4_6").delay(1500).animate({"opacity": 1}, 0, function() {$(this).addClass("leftin3");});$(".img4_8").delay(2000).animate({"opacity": 1}, 0, function() {$(this).addClass("leftin3");});$(".img4_9").delay(2500).animate({"opacity": 1}, 0, function() {$(this).addClass("leftin3");});break;case 4:$(".img5_8").addClass("fadeInDown animated");$(".img5_2").delay(1000).animate({"opacity": 1}, 0, function() {$(this).addClass("fadeInUp animated");});$(".img5_3").delay(1000).animate({"opacity": 1}, 0, function() {$(this).addClass("fadeInUp animated");});$(".img5_5").delay(1500).animate({"opacity": 1}, 0, function() {$(this).addClass("fadeInUp animated");});$(".img5_7").delay(2000).animate({"opacity": 1}, 0, function() {$(this).addClass("fadeInUp animated");});break;case 5:$(".img6_2").addClass("fadeInLeft animated");$(".img6_3").delay(1000).animate({"opacity": 1}, 0, function() {$(this).addClass("fadeInRight animated");});$(".img6_4").delay(1000).animate({"opacity": 1}, 0, function() {$(this).addClass("fadeInRight animated");});$(".img6_6").delay(1500).animate({"opacity": 1}, 0, function() {$(this).addClass("fadeInRight animated");});$(".img6_8").delay(2000).animate({"opacity": 1}, 0, function() {$(this).addClass("fadeInRight animated");});$(".img6_9").delay(2000).animate({"opacity": 1}, 0, function() {$(this).addClass("fadeInRight animated");});$(".img6_10").delay(2500).animate({"opacity": 1}, 0, function() {$(this).addClass("fadeInRight animated");});$(".img6_11").delay(2500).animate({"opacity": 1}, 0, function() {$(this).addClass("fadeInRight animated");});break;case 6:$(".img7_1").addClass("fadeInUp animated");$(".img7_2").delay(1000).animate({"opacity": 1}, 0, function() {$(this).addClass("fadeInDown animated");});$(".img7_3").delay(1000).animate({"opacity": 1}, 0, function() {$(this).addClass("fadeInDown animated");});$(".img7_5").delay(1500).animate({"opacity": 1}, 0, function() {$(this).addClass("fadeInDown animated");});$(".img7_7").delay(2000).animate({"opacity": 1}, 0, function() {$(this).addClass("fadeInDown animated");});break;case 7:$(".img8_2").stop(true, true).addClass("biankuang").css("opacity", 0.5);$(".img8_3").stop(true, true).addClass("tu1").css("opacity", 1);$(".img8_4").stop(true, true).addClass("yezia").css("opacity", 1);$(".img8_5").stop(true, true).addClass("yezib").css("opacity", 1);$(".img8_6").stop(true, true).addClass("yezic").css("opacity", 1);$(".img8_7").stop(true, true).addClass("yezid").css("opacity", 1);$(".img8_8").stop(true, true).addClass("yezie").css("opacity", 1);$(".wenzi1").stop(true, true).delay(3000).animate({opacity: 1}, 0, function() {$(this).addClass("fadeIn animated");}).delay(1000).animate({opacity: 0}, 1000, function() {$(this).removeClass("fadeIn animated");});$(".wenzi2").stop(true, true).delay(5500).animate({opacity: 1}, 0, function() {$(this).addClass("fadeIn animated");}).delay(1000).animate({opacity: 0}, 1000, function() {$(this).removeClass("fadeIn animated");$(".img8_9").stop(true, true).delay(1000).animate({opacity: 1}, 0, function() {$(this).fadeIn();});$(".img8_10").stop(true, true).delay(1500).animate({opacity: 1}, 0, function() {$(this).fadeIn();});$(".img8_11").stop(true, true).delay(2500).animate({opacity: 1}, 0, function() {$(this).fadeIn();});$(".img_hengxian1").stop(true, true).delay(2000).animate({opacity: 1}, 0, function() {$(this).fadeIn();});$(".img_hengxian2").stop(true, true).delay(3000).animate({opacity: 1}, 0, function() {$(this).fadeIn();});$(".wenzi3").stop(true, true).delay(3500).animate({opacity: 1}, 0, function() {$(this).fadeIn();});});break;}},onSlideChangeStart: function(swiper) {if (swiper.activeIndex != 0) {$(".img1_2").stop(true, true).removeClass("biankuang").css("opacity", 0);$(".img1_3").stop(true, true).removeClass("tu1").css("opacity", 0);$(".img1_4").stop(true, true).removeClass("yezia").css("opacity", 0);$(".img1_5").stop(true, true).removeClass("yezib").css("opacity", 0);$(".img1_6").stop(true, true).removeClass("yezic").css("opacity", 0);$(".img1_7").stop(true, true).removeClass("yezid").css("opacity", 0);$(".img1_8").stop(true, true).removeClass("yezie").css("opacity", 0);$(".img1_9").stop(true, true).fadeOut();$(".img1_10").stop(true, true).fadeOut();$(".img1_11").stop(true, true).fadeOut();}if (swiper.activeIndex != 1) {$(".img2_1").stop(true, true).css("left", "0%");$(".img2_2").stop(true, true).css("display", "none").css("left", "75%");$("#content1").fadeOut();$(".img2_4").stop(true, true).animate({left: "100%"});}if (swiper.activeIndex != 2) {$(".img3_2").children().children().eq(0).stop(true, true).css("opacity", 0);$(".img3_2").children().children().eq(3).stop(true, true).css("opacity", 0);$(".img3_2").children().children().eq(1).stop(true, true).css("opacity", 0);$(".img3_2").children().children().eq(5).stop(true, true).css("opacity", 0);$(".img3_2").children().children().eq(4).stop(true, true).css("opacity", 0);$(".img3_2").children().children().eq(6).stop(true, true).css("opacity", 0);$(".img3_2").children().children().eq(7).stop(true, true).css("opacity", 0).removeClass("bounceInDown animated");$(".img3_2").children().children().eq(8).stop(true, true).css("opacity", 0).removeClass("shake animated");$(".img3_2").children().children().eq(2).css("opacity", "0");$("#content2").fadeOut();}if (swiper.activeIndex != 3) {$(".img4_10").stop(true, true).removeClass("rightin1").css("opacity", 0);$(".img4_11").stop(true, true).removeClass("rightin2").css("opacity", 0);$(".img4_2").stop(true, true).removeClass("leftin1").css("opacity", 0);$(".img4_3").stop(true, true).removeClass("leftin1").css("opacity", 0);$(".img4_5").stop(true, true).removeClass("leftin2").css("opacity", 0);$(".img4_6").stop(true, true).removeClass("leftin3").css("opacity", 0);$(".img4_8").stop(true, true).removeClass("leftin3").css("opacity", 0);$(".img4_9").stop(true, true).removeClass("leftin3").css("opacity", 0);}if (swiper.activeIndex != 4) {$(".img5_8").stop(true, true).removeClass("fadeInDown animated").css("opacity", 0);$(".img5_2").stop(true, true).removeClass("fadeInUp animated").css("opacity", 0);$(".img5_3").stop(true, true).removeClass("fadeInUp animated").css("opacity", 0);$(".img5_5").stop(true, true).removeClass("fadeInUp animated").css("opacity", 0);$(".img5_7").stop(true, true).removeClass("fadeInUp animated").css("opacity", 0);}if (swiper.activeIndex != 5) {$(".img6_2").stop(true, true).removeClass("fadeInLeft animated").css("opacity", 0);$(".img6_3").stop(true, true).removeClass("fadeInRight animated").css("opacity", 0);$(".img6_4").stop(true, true).removeClass("fadeInRight animated").css("opacity", 0);$(".img6_6").stop(true, true).removeClass("fadeInRight animated").css("opacity", 0);$(".img6_8").stop(true, true).removeClass("fadeInRight animated").css("opacity", 0);$(".img6_9").stop(true, true).removeClass("fadeInRight animated").css("opacity", 0);$(".img6_10").stop(true, true).removeClass("fadeInRight animated").css("opacity", 0);$(".img6_11").stop(true, true).removeClass("fadeInRight animated").css("opacity", 0);}if (swiper.activeIndex != 6) {$(".img7_1").stop(true, true).removeClass("fadeInUp animated").css("opacity", 0);$(".img7_2").stop(true, true).removeClass("fadeInDown animated").css("opacity", 0);$(".img7_3").stop(true, true).removeClass("fadeInDown animated").css("opacity", 0);$(".img7_5").stop(true, true).removeClass("fadeInDown animated").css("opacity", 0);$(".img7_7").stop(true, true).removeClass("fadeInDown animated").css("opacity", 0);};if (swiper.activeIndex != 7) {$(".img8_2").stop(true, true).removeClass("biankuang").css("opacity", 0);$(".img8_3").stop(true, true).removeClass("tu1").css("opacity", 0);$(".img8_4").stop(true, true).removeClass("yezia").css("opacity", 0);$(".img8_5").stop(true, true).removeClass("yezib").css("opacity", 0);$(".img8_6").stop(true, true).removeClass("yezic").css("opacity", 0);$(".img8_7").stop(true, true).removeClass("yezid").css("opacity", 0);$(".img8_8").stop(true, true).removeClass("yezie").css("opacity", 0);$(".wenzi1").stop(true, true).css("opacity", 0).removeClass("fadeIn animated");$(".wenzi2").stop(true, true).css("opacity", 0).removeClass("fadeIn animated");$(".img8_9").stop(true, true).css("opacity", 0).fadeOut();$(".img8_10").stop(true, true).css("opacity", 0).fadeOut();$(".img8_11").stop(true, true).css("opacity", 0).fadeOut();$(".img_hengxian1").stop(true, true).css("opacity", 0).fadeOut();$(".img_hengxian2").stop(true, true).css("opacity", 0).fadeOut();$(".wenzi3").stop(true, true).css("opacity", 0).fadeOut();}}// 如果需要前进后退按钮// nextButton: '.swiper-button-next',// prevButton: '.swiper-button-prev',// 如果需要滚动条// scrollbar: '.swiper-scrollbar',// onSlideChangeEnd: function(Swiper) {//// console.log(swiper.activeIndex);//switch (swiper.activeIndex) {// case 0:// // $(".img1_4").addClass("yezi");// console.log(111);// // alert(111);// break;//}// },})$(function() {var video = document.getElementById("video");$(".btn").addClass("btnonclick");$(".btn").click(function() {if (video.paused) {video.play();$(".btn").addClass("btnonclick");} else {video.pause();$(".btn").removeClass("btnonclick");}})})</script><style>@media screen and (max-width:540px) {.swiper-container {width: 100%;height: 100%;}}</style></body></html>

🏠CSS样式代码

.animated.hinge {-webkit-animation-duration: 2s;animation-duration: 2s;}.animated.flipOutX,.animated.flipOutY,.animated.bounceIn,.animated.bounceOut {-webkit-animation-duration: .75s;animation-duration: .75s;}@-webkit-keyframes bounce {from,20%,53%,80%,to {-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}40%,43% {-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform: translate3d(0, -30px, 0);transform: translate3d(0, -30px, 0);}70% {-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform: translate3d(0, -15px, 0);transform: translate3d(0, -15px, 0);}90% {-webkit-transform: translate3d(0, -4px, 0);transform: translate3d(0, -4px, 0);}}@keyframes bounce {from,20%,53%,80%,to {-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}40%,43% {-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform: translate3d(0, -30px, 0);transform: translate3d(0, -30px, 0);}70% {-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform: translate3d(0, -15px, 0);transform: translate3d(0, -15px, 0);}90% {-webkit-transform: translate3d(0, -4px, 0);transform: translate3d(0, -4px, 0);}}.bounce {-webkit-animation-name: bounce;animation-name: bounce;-webkit-transform-origin: center bottom;transform-origin: center bottom;}

五、🎁更多源码

1.如果我的博客对你有帮助请 “👍点赞” “✍️评论” “💙收藏”一键三连哦！

2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、等!

📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。