Skip to content

S
SURPRISED
Commit ef3ad16a authored by Mac's avatar Mac
Browse files
Options

生日函

parent 930cfe62
Expand all Show whitespace changes
Inline Side-by-side
Showing with 219 additions and 0 deletions
html/shortLinks/BirthdayLetter.html 0 → 100644
View file @ ef3ad16a
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover" />
<meta name="format-detection" content="telephone=no" />
<meta content="yes" name="mobile-web-app-capable">
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<title>印象之旅年会</title>
<script type="text/javascript" src="../../js/autosize2.js"></script>
<link rel="stylesheet" href="css/BirthdayLetter.css">
<link rel="stylesheet" href="css/animate.min.css">
</head>
<body>
<div class="Box" style="position: fixed;left: 0;top:0">
<div class="bg_2 animated fadeInLeft"></div>
<div class="bg_3 animated fadeInUp"></div>
<div class="bg_4 animated fadeIn"></div>
<div class="bg_5 animated fadeInUp"></div>
<div class="bg_6 animated fadeInUp"></div>
<div class="bg_7 animated fadeIn"></div>
<div class="bg_8 animated fadeIn"></div>
<div class="bg_9 animated fadeInUp"></div>
<div class="Blessings">
<p class="animated fadeIn">王苒，您好！</p>
<p class="animated fadeIn">不知不觉，我们已相识 230 天</p>
<p class="animated fadeIn">今天是您20岁生日</p>
<p class="animated fadeIn">全球通蜀汉路门市携手印象之 旅,在此祝您：</p>
<span class="animated fadeIn">生日快乐~</span>
</div>
<div class="exclusive animated fadeIn">
<p>您的专属旅游顾问：罗超，17308037817</p>
</div>
</div>
</body>
<script src="../../js/moveJs/jquery.min.js"></script>
</html>
html/shortLinks/css/BirthdayLetter.css 0 → 100644
View file @ ef3ad16a
html,
body {
margin: 0;
padding: 0;
overflow-x: hidden;
height: auto;
}
*{
-webkit-tap-highlight-color: transparent;
}
p{
-webkit-margin-before: 0;
-webkit-margin-after: 0;
}
@font-face {
font-family: mFont;
src: url('./fzybxsjw.ttf');
}
.Box{
width: 100%;
height: 100%;
background-image: url('../img/Birthday_bg.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
}
.bg_2{
width: 100%;
height: 6rem;
background-image: url('../img/br_2.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: absolute;
top: 0.1rem;
left: 0;
-webkit-animation-delay:0s;
}
.bg_3{
width: 3.1rem;
height: 5rem;
background-image: url('../img/br_3.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: absolute;
left: 0.32rem;
top: 0.47rem;
-webkit-animation-delay:1s;
}
.bg_4{
width: 2.78rem;
height: 1.05rem;
background-image: url('../img/br_4.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: absolute;
left: 0.505rem;
top: 0.69rem;
-webkit-animation-delay:1s;
}
.bg_5{
width: 0.605rem;
height: 2.4rem;
background-image: url('../img/br_5.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: absolute;
right: 0.385rem;
top: 2.39rem;
-webkit-animation-delay:2s;
}
.bg_6{
width: 0.445rem;
height: 1.655rem;
background-image: url('../img/br_6.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: absolute;
left: 0.405rem;
top: 3.545rem;
-webkit-animation-delay:1.8s;
}
.bg_7{
width: 1.325rem;
height: 0.925rem;
background-image: url('../img/br_7.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: absolute;
left: 1.175rem;
top: 3.75rem;
-webkit-animation-delay:2.4s;
}
.bg_8{
width: 2.25rem;
height: 1.655rem;
background-image: url('../img/br_8.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: absolute;
left: 0.79rem;
top: 4.73rem;
-webkit-animation-delay:1.5s;
}
.bg_9{
width: 2.15rem;
height: 0.33rem;
background-image: url('../img/br_9.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: absolute;
left: 0.77rem;
bottom: 0.21rem;
-webkit-animation-delay:2.8s;
}
.Blessings{
width: 2.45rem;
position: absolute;
left: 0.505rem;
top: 1.755rem;
font-size: 0.18rem;
font-family: mFont;
color: #F1DECB;
;
}
.Blessings p{
margin-top: 0.07rem;
}
.Blessings p:nth-child(1){
-webkit-animation-delay:2.5s;
}
.Blessings p:nth-child(2){
-webkit-animation-delay:3s;
}
.Blessings p:nth-child(3){
-webkit-animation-delay:3.5s;
}
.Blessings p:nth-child(4){
-webkit-animation-delay:4s;
}
.Blessings span{
display: inline-block;
font-size: 0.24rem;
width: 100%;
margin-top: 0.15rem;
text-align: center;
-webkit-animation-delay:4.5s;
}
.exclusive{
width: 2.6rem;
text-align: center;
position: absolute;
left: 0.505rem;
top: 4.75rem;
font-size: 0.09rem;
color: #CDBA9F;
-webkit-animation-delay:5s;
}
html/shortLinks/css/animate.min.css 0 → 100755
View file @ ef3ad16a
This diff is collapsed.
html/shortLinks/img/Birthday_bg.png 0 → 100755
View file @ ef3ad16a
This diff is collapsed.
html/shortLinks/img/br_2.png 0 → 100644
View file @ ef3ad16a
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment