溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“怎么使用html+css+javascript制作結婚邀請函”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
<!DOCTYPE html>
<html class=" js-no-overflow-scrolling">
<head>
<meta charset="utf-8">
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>h6電子邀請函</title>
<link rel="stylesheet" type="text/css" href="page-animation.css">
<link rel="stylesheet" type="text/css" href="H5FullscreenPage.css">
<style type="text/css">html, body {
margin: 0;
width: 100%;
height: 100%;
font-family: arial;
text-align: center;
}
* {
margin:0;
padding: 0;
}
ul {
list-style: none;
}
body {
max-width: 640px;
margin: auto;
}</style>
</head>
<script>alert("溫馨提示：手機訪問方可滾動查看下一頁！")</script>
<body class="H5FullscreenPage">
<div class="niben_banc">
<a href="#" onclick=" Tanchuc()">基本信息</a>
<a href="#">保存</a>
</div>
<!-- -->
<!--彈框 -->
<div class="tanchu_xx_web1 Tan_c">
<div class="tcc_beij_x_web" onclick=" off()"></div>
<div class="kuang_li">
<div class="off" onclick=" off()"></div>
<img class="img_bj" src="img/img_web3_03.png" alt="">
<div class="bt">
<h3>請輸入您和您愛侶的名字</h3>
<p>還有你們喜結連理的時間哦</p>
</div>
<div class="bdkuan">
<input type="text" placeholder="新郎">
<input type="text" placeholder="新娘">
<input type="text" placeholder="新郎電話">
<input type="text" placeholder="新娘電話">
<input type="text" placeholder="結婚日期（如：2020年5月20日（星期六）12:00）">
<input type="text" placeholder="地址">
<button>確定</button>
</div>
</div>
<script>function Tanchuc(){
$(".Tan_c").show();
}
function off(){
$(".Tan_c").hide();
}</script>
</div>
<!-- -->
<div class="H5FullscreenPage-wrap">
<!-- -->
<div class="item item1">
<!-- 金色 -->
<div class="part rollInLeft shang_img">
<img src="img/2.png" alt="">
</div>
<div class="part rollInRight shang_img shang_img_b">
<img src="img/21.png" alt="">
</div>
<!-- 線條 -->
<div class="part top_Xial slideUp" data-delay="400"></div>
<div class="part top_Xial top_Xial_b slideDown" data-delay="400"></div>
<!--hua 金花 -->
<div class="part fadeIn jinse_hua" data-delay="1000"> </div>
<div class="part fadeIn jinse_hua jinse_hua_x" data-delay="1000"></div>
<!-- 葉子 -->
<div class="part slideLeft yezi_zuo"></div>
<div class="part slideLeft yezi_zuo yezi_zuo_zq"></div>
<div class="part slideDown yezi_zuo_xx"></div>
<div class="part slideDown yezi_zuo_yrx"></div>
<div class="part zoomIn piao_gif" data-delay="1500">
<img src="img/jingy.gif" alt="">
</div>
<!-- 中間 -->
<div class="part fadeIn kuang_nieg" data-delay="800">
<img src="img/19.png" alt="">
</div>
<div class="part fadeIn kuang_nieg" data-delay="1000">
<img class="nie" src="img/19.png" alt="">
</div>
<!-- 中間葉子 -->
<div class="part fadeIn yezi_zhongk" data-delay="1300"></div>
<div class="part fadeIn yezi_zhongk_x" data-delay="1300"></div>
<!-- 字 -->
<div class="part zhongjiek_Ge" data-delay="1800">
<img src="img/9.png" alt="">
</div>
<div class="part zhongjiek_Ge" data-delay="1800">
<img class="nio" src="img/1.png" alt="">
</div>
<!-- 文字 -->
<div class="part xinniang_xinlang" data-delay="1800">
<p>Mr.志明<b>&</b>春嬌.Miss</p>
<dd>2020/05/20</dd>
<span>You?two?are?the?prince?and?princess?in?a?fairy tale?and?may?you?live?happily?everafter!</span>
</div>
<!-- 修改 -->
<!-- <div class="xiugai_nige"></div> -->
<!-- -->
<!-- <div class="part part1 fadeIn" data-delay="1000"> </div>
<div class="part part2 fadeIn"></div> -->
</div>
<!-- -->
<div class="item item2">
<!-- 金色 -->
<div class="part rollInLeft shang_img">
<img src="img/2.png" alt="">
</div>
<div class="part rollInRight shang_img shang_img_b">
<img src="img/21.png" alt="">
</div>
<!-- 線條 -->
<div class="part top_Xial slideUp" data-delay="400"></div>
<div class="part top_Xial top_Xial_b slideDown" data-delay="400"></div>
<!--hua 金花 -->
<div class="part fadeIn jinse_hua" data-delay="1000"> </div>
<div class="part fadeIn jinse_hua jinse_hua_x" data-delay="1000"></div>
<!-- 葉子 -->
<div class="part slideLeft yezi_zuo"></div>
<div class="part slideLeft yezi_zuo yezi_zuo_zq"></div>
<div class="part slideDown yezi_zuo_xx"></div>
<div class="part slideDown yezi_zuo_yrx"></div>
<div class="part zoomIn piao_gif" data-delay="1500" style=" width: 100%;
height: 100%;
top: 0;">
<img src="img/jingy.gif" alt="">
</div>
<!-- 中間 -->
<div class="part fadeIn kuang_nieg" data-delay="800">
<img src="img/19.png" alt="">
</div>
<div class="part fadeIn kuang_nieg" data-delay="1000">
<img class="nie" src="img/19.png" alt="">
</div>
<!-- 中間葉子 -->
<div class="part fadeIn yezi_zhongk" data-delay="1300"></div>
<div class="part fadeIn yezi_zhongk_x" data-delay="1300"></div>
<!-- 字 -->
<div class="part zhongjiek_Ge rentx_kuang" data-delay="1800">
<div class="rentx">
<img src="img/xinlang1.jpg" alt="">
</div>
</div>
<!-- 文字 -->
<div class="part xinniang_xinlang" data-delay="1800" >
<p>新郎：志明</p>
<dd style=" line-height: .4rem; padding-top:.2rem;">要你擁有會長大的幸福<br>一天比一天像公主，夢都被滿足</dd>
<!-- <span>You?two?are?the?prince?and?princess?in?a?fairy tale?and?may?you?live?happily?everafter!</span> -->
</div>
<!-- -->
<!-- 修改 -->
<div class="xiugai_nige" style=" left: .3rem;top: 5.8rem;"></div>
<!-- -->
</div>
<!-- -->
<div class="item item3">
<!-- 金色 -->
<div class="part rollInLeft shang_img">
<img src="img/2.png" alt="">
</div>
<div class="part rollInRight shang_img shang_img_b">
<img src="img/21.png" alt="">
</div>
<!-- 線條 -->
<div class="part top_Xial slideUp" data-delay="400"></div>
<div class="part top_Xial top_Xial_b slideDown" data-delay="400"></div>
<!--hua 金花 -->
<div class="part fadeIn jinse_hua" data-delay="1000"> </div>
<div class="part fadeIn jinse_hua jinse_hua_x" data-delay="1000"></div>
<!-- 葉子 -->
<div class="part slideLeft yezi_zuo"></div>
<div class="part slideLeft yezi_zuo yezi_zuo_zq"></div>
<div class="part slideDown yezi_zuo_xx"></div>
<div class="part slideDown yezi_zuo_yrx"></div>
<div class="part zoomIn piao_gif" data-delay="1500" style=" width: 100%;
height: 100%;
top: 0;">
<img src="img/jingy.gif" alt="">
</div>
<!-- 中間 -->
<div class="part fadeIn kuang_nieg" data-delay="800">
<img src="img/19.png" alt="">
</div>
<div class="part fadeIn kuang_nieg" data-delay="1000">
<img class="nie" src="img/19.png" alt="">
</div>
<!-- 中間葉子 -->
<div class="part fadeIn yezi_zhongk" data-delay="1300"></div>
<div class="part fadeIn yezi_zhongk_x" data-delay="1300"></div>
<!-- 字 -->
<div class="part zhongjiek_Ge rentx_kuang" data-delay="1800">
<div class="rentx">
<img src="img/ninnaing.jpg" alt="">
</div>
</div>
<!-- 文字 -->
<div class="part xinniang_xinlang" data-delay="1800" >
<p>新娘：春嬌</p>
<dd style=" line-height: .4rem; padding-top:.2rem;">全世界都知道，我不在乎付出多少<br>我想這是幸福的寫照</dd>
<!-- <span>You?two?are?the?prince?and?princess?in?a?fairy tale?and?may?you?live?happily?everafter!</span> -->
</div>
<!-- -->
<!-- 修改 -->
<div class="xiugai_nige" style=" left: .3rem;top: 5.8rem;"></div>
<!-- -->
</div>
<!-- -->
<div class="item item4">
<div class="part rollInLeft shang_img">
<img src="img/2.png" alt="">
</div>
<div class="part rollInRight shang_img shang_img_b">
<img src="img/21.png" alt="">
</div>
<!-- 線條 -->
<div class="part top_Xial slideUp" data-delay="400"></div>
<div class="part top_Xial top_Xial_b slideDown" data-delay="400"></div>
<!--hua 金花 -->
<div class="part fadeIn jinse_hua jinse_hua_no" data-delay="1000"> </div>
<div class="part fadeIn jinse_hua jinse_hua_x jinse_hua_no" data-delay="1000"></div>
<!-- 葉子 -->
<div class="part slideLeft yezi_zuo"></div>
<div class="part slideLeft yezi_zuo yezi_zuo_zq"></div>
<div class="part slideDown yezi_zuo_xx"></div>
<div class="part slideDown yezi_zuo_yrx"></div>
<!-- 中間葉子 -->
<div class="part fadeIn yezi_zhongk yezi_zhongk_dier" data-delay="1300"></div>
<!-- h婚紗照 -->
<div class="part nimen_img slideDown" data-delay="1800">
<img src="img/nin_gs.jpg" alt="">
</div>
<!-- 文字 -->
<div class="part xinniang_xinlang" data-delay="1800" >
<!-- <p>新娘：春嬌</p> -->
<dd style="line-height: .4rem; padding-top:.2rem;">深愛之人藏心不掛嘴<br>久念之人在夢不在眼</dd>
<!-- <span>You?two?are?the?prince?and?princess?in?a?fairy tale?and?may?you?live?happily?everafter!</span> -->
</div>
<!-- 修改 -->
<div class="xiugai_nige"></div>
<!-- -->
<!-- -->
</div>
<!-- -->
<div class="item item5">
<div class="part rollInLeft shang_img">
<img src="img/2.png" alt="">
</div>
<div class="part rollInRight shang_img shang_img_b">
<img src="img/21.png" alt="">
</div>
<!-- 線條 -->
<div class="part top_Xial slideUp" data-delay="400"></div>
<div class="part top_Xial top_Xial_b slideDown" data-delay="400"></div>
<!--hua 金花 -->
<div class="part fadeIn jinse_hua jinse_hua_no" data-delay="1000"> </div>
<div class="part fadeIn jinse_hua jinse_hua_x jinse_hua_no" data-delay="1000"></div>
<!-- 葉子 -->
<div class="part slideLeft yezi_zuo"></div>
<div class="part slideLeft yezi_zuo yezi_zuo_zq"></div>
<div class="part slideDown yezi_zuo_xx"></div>
<div class="part slideDown yezi_zuo_yrx"></div>
<!-- 中間葉子 -->
<div class="part fadeIn yezi_zhongk yezi_zhongk_dier" data-delay="1300"></div>
<!-- 字 -->
<div class="part zhongjiek_Ge zhongjiek_Ge_er" data-delay="1800">
<img src="img/9.png" alt="">
</div>
<div class="part zhongjiek_Ge zhongjiek_Ge_er" data-delay="1800">
<img class="nio" src="img/1.png" alt="">
</div>
<!-- h婚紗照 -->
<div class="part nimen_img nimen_img_text slideDown" data-delay="1800">
<div class="hou_tupian">
<p>在最好的年華</p>
<p>相見</p>
<p>在最美的時光里</p>
<p>相愛</p>
<p> 沉浸在幸福中的我們將于</p>
<p>2020年5月20日（星期六）12:00</p>
<p>舉辦婚禮</p>
<p>誠邀您和您的家人出席</p>
<p>新郎：志明 & 新娘：春嬌</p>
<p>席設</p>
<p>貴州省貴陽市南明區國際大酒店</p>
<p>期待您的到來</p>
<p class="an">
<a href="tel:18275330710">聯系新郎</a>
<a href="tel:18275330710">聯系新娘</a>
</p>
</div>
</div>
<!-- 修改 -->
<!-- <div class="xiugai_nige"></div> -->
<!-- -->
</div>
<!-- -->
</div>
<script type="text/javascript" src="index_Zepto.js"></script>
<script type="text/javascript" src="H5FullscreenPage.js"></script>
<script type="text/javascript">.init({'type':2,'pageShow' : function(dom){
},'pageHide' : function(dom){
//console.log(dom);
}});</script>
</body>
</html>.fadeIn {
animation-name: fadeIn;
-webkit-animation-name: fadeIn;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
}
@keyframes {
0% {
transform: scale(0);
opacity: 0.0;
}
60% {
transform: scale(1.1);
}
80% {
transform: scale(0.9);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 1;
}
}
@-webkit-keyframes {
0% {
-webkit-transform: scale(0);
opacity: 0.0;
}
60% {
-webkit-transform: scale(1.1);
}
80% {
-webkit-transform: scale(0.9);
opacity: 1;
}
100% {
-webkit-transform: scale(1);
opacity: 1;
}
}
.slideLeft{
animation-name: slideLeft;
-webkit-animation-name: slideLeft;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
}
@keyframes {
0% {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@-webkit-keyframes {
0% {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.slideRight{
animation-name: slideRight;
-webkit-animation-name: slideRight;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
}
@keyframes {
0% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@-webkit-keyframes {
0% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.slideUp {
animation-name: slideUp;
-webkit-animation-name: slideUp;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
}
@keyframes {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@-webkit-keyframes {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.slideDown {
animation-name: slideDown;
-webkit-animation-name: slideDown;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
}
@keyframes {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@-webkit-keyframes {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.rotateIn {
animation-name: rotateIn;
-webkit-animation-name: rotateIn;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
}
@keyframes {
0% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, -200deg);
transform: rotate3d(0, 0, 1, -200deg);
opacity: 0;
}
100% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
@-webkit-keyframes {
0% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, -200deg);
transform: rotate3d(0, 0, 1, -200deg);
opacity: 0;
}
100% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
.zoomIn {
animation-name: zoomIn;
-webkit-animation-name: zoomIn;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
}
@-webkit-keyframes {
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
@keyframes {
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
.heartBeat{
animation-name: heartBeat;
-webkit-animation-name: heartBeat;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
@keyframes {
0% {
transform: scale(0.9);
opacity: 0.7;
}
50% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(0.9);
opacity: 0.7;
}
}
@-webkit-keyframes {
0% {
-webkit-transform: scale(0.95);
opacity: 0.7;
}
50% {
-webkit-transform: scale(1);
opacity: 1;
}
100% {
-webkit-transform: scale(0.95);
opacity: 0.7;
}
}
.rollInLeft {
animation-name: rollInLeft;
-webkit-animation-name: rollInLeft;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
}
@-webkit-keyframes {
0% {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes {
0% {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.rollInRight {
animation-name: rollInRight;
-webkit-animation-name: rollInRight;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
}
@-webkit-keyframes {
0% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes {
0% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}“怎么使用html+css+javascript制作結婚邀請函”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
