Skip to content

S
SURPRISED
Commit 02f4f3ae authored by zhangjianguo's avatar zhangjianguo
Browse files
Options

劳动节和母亲节

parent 889d162c
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 405 additions and 0 deletions
html/shortLinks/LaborDay.html 0 → 100644
View file @ 02f4f3ae
<!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/animate.min.css">
<link rel="stylesheet" href="css/LaborDay.css">
</head>
<body>
<div class="Box" style="position: fixed;left: 0;top:0">
<!-- <div class="bg_1 animated fadeIn"></div>-->
<div class="bg1 animated fadeInDown"></div>
<div class="bg2 animated bounceIn"></div>
<div class="bg3 animated bounceIn"></div>
<div class="bg4 animated bounceIn"></div>
<div class="cen_text animated fadeIn">把工作的劳累卸下，让快乐的心情挥发， 走进大自然的怀抱，享受田园风光美好， 愿你天天开心，幸运伴随，身体康健， 一生平安，祝劳动节快乐。</div>
<div class="bg5 animated fadeInLeft"></div>
<div class="bg6 animated fadeInRight"></div>
<div class="bg7 animated fadeInUp"></div>
</div>
</body>
<script src="js/jquery.min.js"></script>
<script>
</script>
</html>
html/shortLinks/MotherDay.html 0 → 100644
View file @ 02f4f3ae
<!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/animate.min.css">
<link rel="stylesheet" href="css/MotherDay.css">
</head>
<body>
<div class="Box" style="position: fixed;left: 0;top:0">
<div class="bg1 animated fadeInDown"></div>
<div class="bg2 animated fadeIn"></div>
<div class="bg3 animated fadeInUp">
<span>小时候总是索取，却不曾说谢谢，直到长大以后才懂得妈妈不容易。母亲节，想送妈妈全世界最好的礼物，感谢她把全世界都给了你。</span>
</div>
<div class="bg4 animated fadeInLeft"></div>
<div class="bg5 animated fadeIn"></div>
<div class="bg6 animated fadeInLeft"></div>
<div class="bg7 animated fadeInRight"></div>
<div class="bg8 animated fadeInLeft"></div>
<div class="bg9 animated fadeInUp"></div>
</div>
</body>
<script src="js/jquery.min.js"></script>
<script>
</script>
</html>
html/shortLinks/css/LaborDay.css 0 → 100644
View file @ 02f4f3ae
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/LaborDay/bg.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.bg1{
width: 3.38rem;
height: 1.05rem;
background-image: url('../img/LaborDay/ldj_bg.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: absolute;
left: 0.185rem;
/*top: 2.74rem;*/
top:0.155rem;
-webkit-animation-delay:0.5s;
}
.bg2{
width: 0.66rem;
height: 0.66rem;
background-image: url('../img/LaborDay/lao.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: absolute;
left: 0.6rem;
/*top: 2.74rem;*/
top:0.35rem;
-webkit-animation-delay:1s;
}
.bg3{
width: 0.66rem;
height: 0.66rem;
background-image: url('../img/LaborDay/dong.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: absolute;
left: 1.55rem;
/*top: 2.74rem;*/
top:0.35rem;
-webkit-animation-delay:1.3s;
}
.bg4{
width: 0.66rem;
height: 0.66rem;
background-image: url('../img/LaborDay/jie.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: absolute;
left: 2.5rem;
/*top: 2.74rem;*/
top:0.35rem;
-webkit-animation-delay:1.6s;
}
.bg5{
width: 3.04rem;
height: 3.04rem;
border-radius: 50%;
background: #CD2920;
position: absolute;
left: 0.355rem;
bottom:0.885rem;
-webkit-animation-delay:2s;
}
.bg6{
width:100%;
height: 3.31rem;
background-image: url('../img/LaborDay/people.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: absolute;
left: 0rem;
/*top: 2.74rem;*/
bottom:0.68rem;
-webkit-animation-delay:2.3s;
}
.bg7{
width:2.105rem;
height: 0.305rem;
background-image: url('../img/LaborDay/logo.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: absolute;
left: 0.825rem;
/*top: 2.74rem;*/
bottom:0.19rem;
-webkit-animation-delay:2.6s;
}
.cen_text{
width: 2.8rem;
height: 1rem;
font-size: 0.16rem;
font-weight: bold;
color: #BB3124;
line-height: 0.25rem;
position: absolute;
left: 0.49rem;
top: 1.415rem;
-webkit-animation-delay:2s;
}
\ No newline at end of file
html/shortLinks/css/MotherDay.css 0 → 100644
View file @ 02f4f3ae
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/MotherDay/bj.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.bg1{
width: 2.805rem;
height: 0.76rem;
background-image: url('../img/MotherDay/copywriting.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: absolute;
left: 0.475rem;
top:1.875rem;
-webkit-animation-delay:0.5s;
}
.bg2{
width: 2.895rem;
height: 2.2rem;
background-image: url('../img/MotherDay/people.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: absolute;
left: 0.425rem;
top:2.755rem;
-webkit-animation-delay:0.8s;
}
.bg3{
width: 100%;
height: 1.235rem;
background-image: url('../img/MotherDay/bg1.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: absolute;
left: 0;
bottom:0.61rem;
-webkit-animation-delay:1.2s;
font-size: 0.14rem;
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
}
.bg3 span{
width: 86%;
}
.bg4{
width: 0.36rem;
height: 0.635rem;
background-image: url('../img/MotherDay/potting.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: absolute;
left: 0.13rem;
bottom:1.535rem;
-webkit-animation-delay:1.5s;
}
.bg5{
width: 1.43rem;
height: 1.075rem;
background-image: url('../img/MotherDay/son.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: absolute;
right: 0rem;
top:0rem;
-webkit-animation-delay:1.8s;
}
.bg6{
width: 0.46rem;
height: 1.715rem;
background-image: url('../img/MotherDay/willow_l.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: absolute;
left: 0rem;
top:0rem;
-webkit-animation-delay:2.3s;
}
.bg7{
width: 1.05rem;
height: 2.045rem;
background-image: url('../img/MotherDay/willow_r.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: absolute;
right: 0rem;
top:0rem;
-webkit-animation-delay:2.3s;
}
.bg8{
width: 0.68rem;
height: 0.55rem;
background-image: url('../img/MotherDay/swallow.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: absolute;
left: 0.54rem;
top:0.4rem;
-webkit-animation-delay:2.6s;
}
.bg9{
width: 2.105rem;
height: 0.305rem;
background-image: url('../img/MotherDay/logo.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: absolute;
left: 0.825rem;
bottom:0.155rem;
-webkit-animation-delay:3s;
}
\ No newline at end of file
html/shortLinks/js/autosize2.js 0 → 100644
View file @ 02f4f3ae
/**
* Created by lovo_bdk on 15-12-17.
*/
// !(function(win, doc){
// function setFontSize() {
// // 获取window 宽度
// // zepto实现 $(window).width()就是这么干的
// var winWidth = window.innerWidth;
// doc.documentElement.style.fontSize = (winWidth / 375) * 100 + 'px' ;
// //设置页面元素根元素的px大小，然后所有rem以此为基准。
// //640为开发时候的页面宽度，20为基准px大小， 可以设置任意数字，方便开发时候rem计算
//
// }
//
// var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';
//
// var timer = null;
//
// win.addEventListener(evt, function () {
// clearTimeout(timer);
//
// timer = setTimeout(setFontSize, 300);
// }, false);
//
// win.addEventListener("pageshow", function(e) {
// if (e.persisted) {
// clearTimeout(timer);
//
// timer = setTimeout(setFontSize, 300);
// }
// }, false);
//
// //初始化
// setFontSize();
//
// }(window, document));
(function(win) {
var docEl = win.document.documentElement,
tid;
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
var rem = width / 375*100;//以750px为原稿，除以100可得各元素的rem
docEl.style.fontSize = rem + "px";
var actualSize = parseFloat(window.getComputedStyle(docEl)["font-size"]);
if (actualSize !== rem) {
var remScaled = rem / ( actualSize / rem );
docEl.style.fontSize = remScaled + "px"
}
}
function dbcRefresh() {
clearTimeout(tid);
tid = setTimeout(refreshRem, 100)
}
win.addEventListener("resize", function() { dbcRefresh() }, false);
win.addEventListener("pageshow", function(e) {
if (e.persisted) { dbcRefresh() }
}, false);
refreshRem();
})(window);
html/shortLinks/js/jquery.min.js 0 → 100644
View file @ 02f4f3ae
This diff is collapsed.
html/shortLinks/js/layer.js 0 → 100644
View file @ 02f4f3ae
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