Skip to content

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

毕业季

parent ef3ad16a
Hide whitespace changes
Inline Side-by-side
Showing with 296 additions and 4 deletions
html/shortLinks/BirthdayLetter.html
View file @ 81b11329
......@@ -7,7 +7,7 @@
<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>
<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">
......
html/shortLinks/GraduationSeason.html 0 → 100644
View file @ 81b11329
<!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/GraduationSeason.css">
<link rel="stylesheet" href="css/animate.min.css">
</head>
<body>
<div class="Box" style="position: fixed;left: 0;top:0">
<div class="bg_1 animated bounceInDown"></div>
<div class="bg_2 animated fadeIn"></div>
<div class="bg_3 animated fadeIn"></div>
<div class="bg_4 "></div>
<div class="bg_5 animated fadeInRight"></div>
<div class="bg_6 animated fadeInLeft"></div>
<div class="bg_7 animated fadeInRight"></div>
<div class="bg_8 animated fadeInLeft"></div>
<div class="bg_9 animated fadeInLeft"></div>
<div class="bg_10 animated fadeInUp"></div>
<div class="text_1 animated fadeInLeft">时光不老，青春不散</div>
<div class="text_2 animated fadeInRight">既是结束，亦是开始</div>
<div class="text_3 animated fadeIn"></div>
<div class="text_4 animated fadeIn">人生至少要有两次冲动</div>
<div class="text_5 animated fadeIn">奋不顾身的恋爱</div>
<div class="text_6 animated fadeIn">
<p>和</p>
<img src="./img/Graduation/g9.png" alt="">
<p>的观光...</p>
</div>
</div>
</body>
<script src="../../js/moveJs/jquery.min.js"></script>
<script>
setTimeout(function () {
$('.bg_6').removeClass('fadeInLeft').addClass('swing')
},2700)
setTimeout(function () {
$('.bg_10').removeClass('animated').removeClass('fadeInUp').addClass('animation')
},4000)
$('.text_6 img').click(function () {
console.log('点击')
})
</script>
</html>
html/shortLinks/css/BirthdayLetter.css
View file @ 81b11329
......@@ -63,7 +63,8 @@ p{
.bg_5{
width: 0.605rem;
height: 2.4rem;
background-image: url('../img/br_5.png');
/*background-image: url('../img/br_5.png');*/
background-image: url('../img/br_5.gif');
background-size: 100% 100%;
background-repeat: no-repeat;
position: absolute;
......@@ -74,7 +75,8 @@ p{
.bg_6{
width: 0.445rem;
height: 1.655rem;
background-image: url('../img/br_6.png');
/*background-image: url('../img/br_6.png');*/
background-image: url('../img/br_6.gif');
background-size: 100% 100%;
background-repeat: no-repeat;
position: absolute;
......@@ -160,6 +162,6 @@ p{
top: 4.75rem;
font-size: 0.09rem;
color: #CDBA9F;
-webkit-animation-delay:5s;
-webkit-animation-delay:2s;
}
html/shortLinks/css/GraduationSeason.css 0 → 100644
View file @ 81b11329
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;
}
.Box{
width: 100%;
height: 100%;
background-image: url('../img/Graduation/g_bg.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
}
.bg_1{
width: 2.1rem;
height: 0.285rem;
background-image: url('../img/Graduation/g11.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: absolute;
top: 0.175rem;
left: 0.835rem;
-webkit-animation-delay:0s;
}
.bg_2{
width: 3.245rem;
height: 1.21rem;
background-image: url('../img/Graduation/g1.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: absolute;
top: 0.835rem;
left: 0.355rem;
-webkit-animation-delay:1s;
}
.bg_3{
width: 0.52rem;
height: 0.52rem;
background-image: url('../img/Graduation/g2.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: absolute;
top: 1rem;
left: 0.78rem;
-webkit-animation-delay:1s;
}
.bg_4{
width: 0.45rem;
height: 0.32rem;
background-image: url('../img/Graduation/g10.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: absolute;
top: 0.725rem;
right: 0.25rem;
}
.bg_5{
width: 0.545rem;
height: 0.36rem;
background-image: url('../img/Graduation/g3.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: absolute;
top: 1.865rem;
right: 0.36rem;
-webkit-animation-delay:1.5s;
}
.bg_6{
width: 0.467rem;
height: 0.387rem;
background-image: url('../img/Graduation/g4.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: absolute;
top: 2.285rem;
left: 0.42rem;
-webkit-animation-delay:1.7s;
animation-iteration-count: 1000;
animation-duration: 3s
}
.bg_7{
width: 0.95rem;
height: 0.8rem;
background-image: url('../img/Graduation/g5.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: absolute;
top: 2.96rem;
right: 0.18rem;
-webkit-animation-delay:1.9s;
}
.bg_8{
width: 0.51rem;
height: 0.445rem;
background-image: url('../img/Graduation/g6.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: absolute;
top: 3.3rem;
left: 0.125rem;
-webkit-animation-delay:2.1s;
}
.bg_9{
width: 1.04rem;
height: 0.655rem;
background-image: url('../img/Graduation/g7.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: absolute;
top: 4.39rem;
left: 0;
-webkit-animation-delay:2.3s;
}
.bg_10{
width: 3.75rem;
height: 3.75rem;
background-image: url('../img/Graduation/g8.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: absolute;
bottom: -1.7rem;
left: 0;
-webkit-animation-delay:2s;
}
.animation{
-webkit-animation:circle 5s infinite linear;
-moz-animation:circle 5s infinite linear;
}
@-webkit-keyframes circle{
0%{ transform:rotate(0deg); }
100%{ transform:rotate(-360deg); }
}
@-moz-keyframes circle{
0%{ transform:rotate(0deg); }
100%{ transform:rotate(-360deg); }
}
.text_1{
width: 100%;
text-align: center;
font-size: 0.18rem;
color: white;
position: absolute;
top: 2.52rem;
left: 0;
-webkit-animation-delay:3s;
}
.text_2{
width: 100%;
text-align: center;
font-size: 0.18rem;
color: white;
position: absolute;
top: 2.82rem;
left: 0;
-webkit-animation-delay:3s;
}
.text_3{
width: 56%;
height: 1px;
background: white;
text-align: center;
font-size: 0.18rem;
color: white;
position: absolute;
top: 3.17rem;
left: 22%;
-webkit-animation-delay:3s;
}
.text_4{
width: 100%;
text-align: center;
font-size: 0.15rem;
color: white;
position: absolute;
top: 3.38rem;
left: 0;
-webkit-animation-delay:3.5s;
}
.text_5{
width: 100%;
text-align: center;
font-size: 0.15rem;
color: white;
position: absolute;
top: 3.68rem;
left: 0;
-webkit-animation-delay:3.8s;
}
.text_6{
width: 100%;
text-align: center;
font-size: 0.13rem;
color: white;
position: absolute;
top: 3.94rem;
left: 0;
-webkit-animation-delay:4s;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.text_6 img{
width: 1.03rem;
height: 0.36rem;
margin: 0 5px;
}
html/shortLinks/img/Graduation/g_bg.png 0 → 100755
View file @ 81b11329
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