<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>慕課七夕主題</title>
<link rel='stylesheet' href='style.css' />
<link rel='stylesheet' href='pageA.css' />
<link rel='stylesheet' href='pageB.css' />
<link rel='stylesheet' href='pageC.css' />
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="http://img1.sycdn.imooc.com//down/55ac9ea30001ace700000000.js"></script>
</head>
<body>
<div id='content'>
<ul class='content-wrap'>
<!-- 第一副畫面 -->
<li></li>
<!-- 第二副畫面 -->
<li></li>
<!-- 第三副畫面 -->
<li>
<!-- 背景圖 -->
<div class="c_background">
<div class="c_background_top"></div>
<div class="c_background_middle"></div>
<div class="c_background_botton"></div>
</div>
<!-- 小女孩 -->
<div class="girl"></div>
<div class="bridge-bottom">
<div class="water">
<div id="water1" class="water_1"></div>
<div id="water2" class="water_2"></div>
<div id="water3" class="water_3"></div>
<div id="water4" class="water_4"></div>
</div>
</div>
<!-- 星星 -->
<ul class="stars">
<li class="stars1"></li>
<li class="stars2"></li>
<li class="stars3"></li>
<li class="stars4"></li>
<li class="stars5"></li>
<li class="stars6"></li>
</ul>
<!-- 慕課網logo圖 -->
<div class="logo"></div>
</li>
</ul>
<!-- 飄花 -->
<div id="snowflake"></div>
</div>
<div class="button">
<button>開始飄花</button>
</div>
</body>
<script type="text/javascript">
$(function() {
var snowflakeURl = [
'http://img1.sycdn.imooc.com//55adde120001d34e00410041.png',
'http://img1.sycdn.imooc.com//55adde2a0001a91d00410041.png',
'http://img1.sycdn.imooc.com//55adde5500013b2500400041.png',
'http://img1.sycdn.imooc.com//55adde62000161c100410041.png',
'http://img1.sycdn.imooc.com//55adde7f0001433000410041.png',
'http://img1.sycdn.imooc.com//55addee7000117b500400041.png'
]
///////
//飄雪花 //
///////
function snowflake() {
// 雪花容器
var $flakeContainer = $('#snowflake');
// 隨機六張圖
function getImagesName() {
return snowflakeURl[[Math.floor(Math.random() * 6)]];
}
// 創建一個雪花元素
function createSnowBox() {
var url = getImagesName();
return $('<div class="snowbox" />').css({
'width': 41,
'height': 41,
'position': 'absolute',
'backgroundSize': 'cover',
'zIndex': 100000,
'top': '-41px',
'backgroundImage': 'url(' + url + ')'
}).addClass('snowRoll');
}
// 開始飄花
setInterval(function() {
// 運動的軌跡
var startPositionLeft = Math.random() * visualWidth - 100,
startOpacity = 1,
endPositionTop = visualHeight - 40,
endPositionLeft = startPositionLeft - 100 + Math.random() * 500,
duration = visualHeight * 10 + Math.random() * 5000;
// 隨機透明度，不小于0.5
var randomStart = Math.random();
randomStart = randomStart < 0.5 ? startOpacity : randomStart;
// 創建一個雪花
var $flake = createSnowBox();
// 設計起點位置
$flake.css({
left: startPositionLeft,
opacity : randomStart
});
// 加入到容器
$flakeContainer.append($flake);
// 開始執行動畫
$flake.transition({
top: endPositionTop,
left: endPositionLeft,
opacity: 0.7
}, duration, 'ease-out', function() {
$(this).remove() //結束后刪除
});
}, 200);
}
//開始
$("button:first").click(function() {
snowflake()
})
})
</script>
<script type="text/javascript" src="Swipe.js"></script>
<script type="text/javascript" src="Qixi.js"></script>
</html>
// 動畫結束事件
var animationEnd = (function() {
var explorer = navigator.userAgent;
if (~explorer.indexOf('WebKit')) {
return 'webkitAnimationEnd';
}
return 'animationend';
})();
///////////
//燈動畫 //
///////////
var lamp = {
elem: $('.b_background'),
bright: function() {
this.elem.addClass('lamp-bright');
},
dark: function() {
this.elem.removeClass('lamp-bright');
}
};
var container = $("#content");
var swipe = Swipe(container);
visualWidth = container.width();
visualHeight = container.height();
// 頁面滾動到指定的位置
function scrollTo(time, proportionX) {
var distX = visualWidth * proportionX;
swipe.scrollTo(distX, time);
}
// 獲取數據
var getValue = function(className) {
var $elem = $('' + className + '');
//走路的路線坐標
return {
height: $elem.height(),
top: $elem.position().top
};
};
// 橋的Y軸
var bridgeY = function() {
var data = getValue('.c_background_middle');
return data.top;
}();
////////
//小女孩 //
////////
var girl = {
elem: $('.girl'),
getHeight: function() {
return this.elem.height();
},
setOffset: function() {
this.elem.css({
left: visualWidth / 2,
top: bridgeY - this.getHeight()
});
}
};
// 修正小女孩位置
girl.setOffset();
// 用來臨時調整頁面
swipe.scrollTo(visualWidth * 2, 0);
function doorAction(left, right, time) {
var $door = $('.door');
var doorLeft = $('.door-left');
var doorRight = $('.door-right');
var defer = $.Deferred();
var count = 2;
// 等待開門完成
var complete = function() {
if (count == 1) {
defer.resolve();
return;
}
count--;
}
doorLeft.transition({
'left': left
}, time, complete);
doorRight.transition({
'left': right
}, time, complete);
return defer;
}
// 開門
function openDoor() {
return doorAction('-50%', '100%', 2000);
}
// 關門
function shutDoor() {
return doorAction('0%', '50%', 2000);
}
/**
* 小孩走路
* @param {[type]} container [description]
*/
function BoyWalk() {
var container = $("#content");
// 頁面可視區域
var visualWidth = container.width();
var visualHeight = container.height();
// 獲取數據
var getValue = function(className) {
var $elem = $('' + className + '');
// 走路的路線坐標
return {
height: $elem.height(),
top: $elem.position().top
};
};
// 路的Y軸
var pathY = function() {
var data = getValue('.a_background_middle');
return data.top + data.height / 2;
}();
var $boy = $("#boy");
var boyWidth = $boy.width();
var boyHeight = $boy.height();
// 設置下高度
$boy.css({
top: pathY - boyHeight + 25
});
// 暫停走路
function pauseWalk() {
$boy.addClass('pauseWalk');
}
// 恢復走路
function restoreWalk() {
$boy.removeClass('pauseWalk');
}
// css3的動作變化
function slowWalk() {
$boy.addClass('slowWalk');
}
// 用transition做運動
function stratRun(options, runTime) {
var dfdPlay = $.Deferred();
// 恢復走路
restoreWalk();
// 運動的屬性
$boy.transition(
options,
runTime,
'linear',
function() {
dfdPlay.resolve(); // 動畫完成
});
return dfdPlay;
}
// 開始走路
function walkRun(time, dist, disY) {
time = time || 3000;
// 腳動作
slowWalk();
// 開始走路
var d1 = stratRun({
'left': dist + 'px',
'top': disY ? disY : undefined
}, time);
return d1;
}
// 走進商店
function walkToShop(runTime) {
var defer = $.Deferred();
var doorObj = $('.door');
// 門的坐標
var offsetDoor = doorObj.offset();
var doorOffsetLeft = offsetDoor.left;
var doorOffsetTop = offsetDoor.top;
// 小孩當前的坐標
var posBoy = $boy.position();
var boyPoxLeft = posBoy.left;
var boyPoxTop = posBoy.top;
// 中間位置
var boyMiddle = $boy.width() / 2;
var doorMiddle = doorObj.width() / 2;
var doorTopMiddle = doorObj.height() / 2;
// 當前需要移動的坐標
instanceX = (doorOffsetLeft + doorMiddle) - (boyPoxLeft + boyMiddle);
// Y的坐標
// top = 人物底部的top - 門中見的top值
instanceY = boyPoxTop + boyHeight - doorOffsetTop + (doorTopMiddle);
// 開始走路
var walkPlay = stratRun({
transform: 'translateX(' + instanceX + 'px),translateY(-' + instanceY + 'px),scale(0.5,0.5)',
opacity: 0.1
}, 2000);
// 走路完畢
walkPlay.done(function() {
$boy.css({
opacity: 0
});
defer.resolve();
});
return defer;
}
// 走出店
function walkOutShop(runTime) {
var defer = $.Deferred();
restoreWalk();
// 開始走路
var walkPlay = stratRun({
transform: 'translateX(' + instanceX + 'px),translateY(0),scale(1,1)',
opacity: 1
}, runTime);
// 走路完畢
walkPlay.done(function() {
defer.resolve();
});
return defer;
}
// 計算移動距離
function calculateDist(direction, proportion) {
return (direction == "x" ?
visualWidth : visualHeight) * proportion;
}
return {
// 開始走路
walkTo: function(time, proportionX, proportionY) {
var distX = calculateDist('x', proportionX);
var distY = calculateDist('y', proportionY);
return walkRun(time, distX, distY);
},
// 走進商店
toShop: function() {
return walkToShop.apply(null, arguments);
},
// 走出商店
outShop: function() {
return walkOutShop.apply(null, arguments);
},
// 停止走路
stopWalk: function() {
pauseWalk();
},
setColoer: function(value) {
$boy.css('background-color', value)
},
// 獲取男孩的寬度
getWidth: function() {
return $boy.width();
},
// 復位初始狀態
resetOriginal: function() {
this.stopWalk();
// 恢復圖片
$boy.removeClass('slowWalk slowFlolerWalk').addClass('boyOriginal');
},
// 轉身動作
rotate: function(callback) {
restoreWalk();
$boy.addClass('boy-rotate');
// 監聽轉身完畢
if (callback) {
$boy.on(animationEnd, function() {
callback();
$(this).off();
});
}
},
// 取花
talkFlower: function() {
$boy.addClass('slowFlolerWalk');
}
}
}
/////////
//頁面滑動 //
/////////
/**
* [Swipe description]
* @param {[type]} container [頁面容器節點]
* @param {[type]} options [參數]
*/
function Swipe(container) {
// 獲取第一個子節點
var element = container.find(":first");
var swipe = {};
// li頁面數量
var slides = element.find(">");
// 獲取容器尺寸
var width = container.width();
var height = container.height();
// 設置li頁面總寬度
element.css({
width: (slides.length * width) + 'px',
height: height + 'px'
});
// 設置每一個頁面li的寬度
$.each(slides, function(index) {
var slide = slides.eq(index); // 獲取到每一個li元素
slide.css({
width: width + 'px',
height: height + 'px'
});
});
// 監控完成與移動
swipe.scrollTo = function(x, speed) {
// 執行動畫移動
element.css({
'transition-timing-function' : 'linear',
'transition-duration' : speed + 'ms',
'transform' : 'translate3d(-' + x + 'px,0px,0px)'
});
return this;
};
return swipe;
}
* {
padding: 0;
margin: 0;
}
ol,
ul,
li {
list-style-type: none;
}
/*主體部分*/
#content {
width: 100%;
height: 100%;
/* top: 20%; */
overflow: hidden;
position: absolute;
}
.content-wrap {
position: relative;
}
.content-wrap > li {
float: left;
overflow: hidden;
position: relative;
}
a {
position: absolute;
top: 50%;
left: 40%;
}
.charector {
position: absolute;
left: 0%;
top: 55%;
position: absolute;
width: 100%;
height: 100%;
width: 151px;
height: 291px;
background: url(http://img1.sycdn.imooc.com//55ade248000198ae10550582.png) -0px -291px no-repeat;
}
/*人物暫停*/
.pauseWalk {
-webkit-animation-play-state: paused;
}
.slowWalk {
-webkit-animation-name: person-slow;
-webkit-animation-duration: 950ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: steps(1, start);
-moz-animation-name: person-slow;
-moz-animation-duration: 950ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: steps(1, start)
}
.slowFlolerWalk {
-webkit-animation-name: person-floler-slow;
-webkit-animation-duration: 950ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: step-start;
-moz-animation-name: person-floler-slow;
-moz-animation-duration: 950ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: step-start;
}
/*人物暫停*/
.boyOriginal {
background-position: -150px -0px;
}
/*帶花*/
@-webkit-keyframes person-floler-slow {
0% {
background-position: -453px -0px;
}
25% {
background-position: -904px -0px;
}
50% {
background-position: -451px -0px;
}
75% {
background-position: -753px -0px;
}
100% {
background-position: -300px -0px;
}
}
@-moz-keyframes person-floler-slow {
0% {
background-position: -453px -0px;
}
25% {
background-position: -904px -0px;
}
50% {
background-position: -451px -0px;
}
75% {
background-position: -753px -0px;
}
100% {
background-position: -300px -0px;
}
}
/*普通慢走*/
@-webkit-keyframes person-slow {
0% {
background-position: -0px -291px;
}
25% {
background-position: -602px -0px;
}
50% {
background-position: -302px -291px;
}
75% {
background-position: -151px -291px;
}
100% {
background-position: -0px -291px;
}
}
@-moz-keyframes person-slow {
0% {
background-position: -0px -291px;
}
25% {
background-position: -602px -0px;
}
50% {
background-position: -302px -291px;
}
75% {
background-position: -151px -291px;
}
100% {
background-position: -0px -291px;
}
}
/*男孩轉身*/
.boy-rotate {
-webkit-animation-name: boy-rotate;
-webkit-animation-duration: 850ms;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: step-start;
-webkit-animation-fill-mode: forwards;
-moz-animation-name: boy-rotate;
-moz-animation-duration: 850ms;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: step-start;
-moz-animation-fill-mode: forwards;
}
@-webkit-keyframes boy-rotate {
0% {
background-position: -603px -291px;
}
16.7% {
background-position: -150px -0px;
}
33.4% {
background-position: -453px -291px;
}
50.1% {
background-position: -0px -0px;
}
66.8% {
background-position: -903px -291px;
}
83.5% {
background-position: -753px -291px;
}
100% {
background-position: -603px -291px;
}
}
@-moz-keyframes boy-rotate {
0% {
/*background-position: -603px -291px;*/
}
16.7% {
background-position: -150px -0px;
}
33.4% {
background-position: -453px -291px;
}
50.1% {
background-position: -0px -0px;
}
66.8% {
background-position: -903px -291px;
}
83.5% {
background-position: -753px -291px;
}
100% {
background-position: -603px -291px;
}
}
/*背景圖*/
.a_background {
width: 100%;
height: 100%;
/* background-image: url("../images/QixiA.png");
background-size: 100% 100%;*/
position: absolute;
}
.a_background_top {
width: 100%;
height: 71.6%;
background-image: url("http://img1.sycdn.imooc.com//55addf6900019d8f14410645.png");
background-size: 100% 100%;
}
.a_background_middle {
width: 100%;
height: 13.1%;
background-image: url("http://img1.sycdn.imooc.com//55addf800001ff2e14410118.png");
background-size: 100% 100%;
}
.a_background_botton {
width: 100%;
height: 15.3%;
background-image: url("http://img1.sycdn.imooc.com//55addfcb000189b314410138.png");
background-size: 100% 100%;
}
button {
width: 80px;
height: 50px;
}
.button {
position: absolute;
bottom: 0;
}
/*人物暫停*/
.pauseWalk {
animation-play-state: paused;
}
/*-------- 太陽自轉以及動畫 --------*/
#sun {
background: url("http://img1.sycdn.imooc.com//55ade004000106c202010201.png") no-repeat;
position: absolute;
z-index: 1;
top: -30px;
height: 201px;
width: 201px;
right: 40%;
}
.rotation {
-webkit-animation-name: rotation;
-webkit-animation-duration: 30s;
-webkit-animation-iteration: 1;
-moz-animation-name: rotation;
-moz-animation-duration: 30s;
-moz-animation-iteration: 1;
}
@-webkit-keyframes rotation {
0% {
transform: translateX(0) translateY(0);
}
100% {
transform: translateX(-2000px) translateY(400px);
}
}
@-moz-keyframes rotation {
0% {
transform: translateX(0) translateY(0);
}
100% {
transform: translateX(-2000px) translateY(400px);
}
}
/*天空云*/
.cloud {
z-index: 2;
position: absolute;
}
.cloud1 {
width: 20%;
height: 30%;
left: -5%;
top: 15%;
background: url("http://img1.sycdn.imooc.com//55addfde0001aec501810101.png") no-repeat;
-webkit-animation-name: smallCloud;
-webkit-animation-duration: 30s;
-webkit-animation-iteration: infinite;
-moz-animation-name: smallCloud;
-moz-animation-duration: 30s;
-moz-animation-iteration: infinite
}
.cloud2 {
width: 20%;
height: 30%;
right: -5%;
background: url("http://img1.sycdn.imooc.com//55addff500016df503010140.png") no-repeat;
-webkit-animation-name: largeCloud;
-webkit-animation-duration: 60s;
-webkit-animation-iteration: infinite;
-moz-animation-name: largeCloud;
-moz-animation-duration: 60s;
-moz-animation-iteration: infinite;
}
@-webkit-keyframes smallCloud {
0% {
left: -5%;
}
100% {
left: 100%;
}
}
@-moz-keyframes smallCloud {
0% {
left: -5%;
}
100% {
left: 100%;
}
}
@-webkit-keyframes largeCloud {
0% {
right: -5%;
}
100% {
right: 100%;
}
}
@-moz-keyframes largeCloud {
0% {
right: -5%;
}
100% {
right: 100%;
}
}
/*背景圖*/
.b_background {
width: 100%;
height: 100%;
background-image: url("http://img1.sycdn.imooc.com//55ade06f00015a0d14410901.png");
background-size: 100% 100%;
position: absolute;
}
.b_background_preload {
background: url("http://img1.sycdn.imooc.com//55ade0be0001a37914410901.png") no-repeat -9999px -9999px;
}
.lamp-bright {
background-image: url("http://img1.sycdn.imooc.com//55ade0be0001a37914410901.png");
}
/*商店*/
.shop {
width: 39.5%;
height: 35.5%;
position: absolute;
left: 29%;
top: 36.5%;
}
.door {
position: absolute;
width: 32%;
height: 100%;
top: 32%;
height: 68%;
overflow: hidden;
left: 58.5%;
}
.door-left,
.door-right {
width: 50%;
height: 100%;
position: absolute;
}
.door-left {
left: 0%;
background: url(http://img1.sycdn.imooc.com//55ade1140001050d00910231.png);
background-size: 100% 100%;
}
.door-right {
left: 50%;
background: url(http://img1.sycdn.imooc.com//55ade12100019f5b00910231.png);
background-size: 100% 100%;
}
/*鳥*/
.bird {
min-width: 91px;
min-height: 71px;
top: 10%;
position: absolute;
z-index: 10;
right: -91px;
background: url(http://img1.sycdn.imooc.com//55ade1700001b38302730071.png) -182px 0px no-repeat;
}
.birdFly {
-webkit-animation-name: bird-slow;
-webkit-animation-duration: 400ms;
-webkit-animation-timing-function: step-start;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: bird-slow;
-moz-animation-duration: 400ms;
-moz-animation-timing-function: step-start;
-moz-animation-iteration-count: infinite;
}
/*鳥慢飛*/
@-webkit-keyframes bird-slow {
0% {
background-position: -182px 0px;
}
50% {
background-position: 0px 0px;
}
75% {
background-position: -91px 0px;
}
100% {
background-position: -182px 0px;
}
}
@-moz-keyframes bird-slow {
0% {
background-position: -182px 0px;
}
50% {
background-position: 0px 0px;
}
75% {
background-position: -91px 0px;
}
100% {
background-position: -182px 0px;
}
}
/*背景圖*/
.c_background {
width: 100%;
height: 100%;
background-size: 100% 100%;
position: absolute;
}
.c_background_top {
width: 100%;
height: 71.6%;
background-image: url("http://img1.sycdn.imooc.com//55ade19b0001d92c14410645.png");
background-size: 100% 100%;
}
.c_background_middle {
width: 100%;
height: 13.1%;
background-image: url("http://img1.sycdn.imooc.com//55ade1b3000135c114410118.png");
background-size: 100% 100%;
}
.c_background_botton {
width: 100%;
height: 15.3%;
background-image: url("http://img1.sycdn.imooc.com//55ade1c30001db5d14410138.png");
background-size: 100% 100%;
}
/*天空
/*雪花*/
#snowflake {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
.snowRoll {
position: absolute;
opacity: 0;
-webkit-animation-name: mysnow;
-webkit-animation-duration: 20s;
-moz-animation-name: mysnow;
-moz-animation-duration: 20s;
height: 80px;
}
@-webkit-keyframes mysnow {
0% {
bottom: 100%;
}
50% {
-webkit-transform: rotate(1080deg);
}
100% {
-webkit-transform: rotate(0deg) translate3d(50px, 50px, 50px);
}
}
@-moz-keyframes mysnow {
0% {
bottom: 100%;
}
50% {
-moz-transform: rotate(1080deg);
}
100% {
-moz-transform: rotate(0deg) translate3d(50px, 50px, 50px);
}
}
/*小女孩*/
.girl {
background: url(http://img1.sycdn.imooc.com//55ade30d000100dc10570291.png) -755px -0px no-repeat;
position: absolute;
right: 40%;
top: 37%;
width: 151px;
height: 291px;
}
.girl-rotate {
-webkit-animation-name: girl-rotate;
-webkit-animation-duration: 850ms;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: step-start;
-webkit-animation-fill-mode: forwards;
-moz-animation-name: girl-rotate;
-moz-animation-duration: 850ms;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: step-start;
-moz-animation-fill-mode: forwards;
}
@-webkit-keyframes girl-rotate {
0% {
background-position: -604px -0px;
}
16.7% {
background-position: -151px -0px;
}
33.4% {
background-position: -906px -0px;
}
50.1% {
background-position: -0px -0px;
}
66.8% {
background-position: -302px -0px;
}
83.5% {
background-position: -453px -0px;
}
100% {
background-position: -604px -0px;
}
}
@-moz-keyframes girl-rotate {
0% {
/*background-position: -604px -0px;*/
}
16.7% {
background-position: -151px -0px;
}
33.4% {
background-position: -906px -0px;
}
50.1% {
background-position: -0px -0px;
}
66.8% {
background-position: -302px -0px;
}
83.5% {
background-position: -453px -0px;
}
100% {
background-position: -604px -0px;
}
}
/*橋*/
.bridge-bottom {
position: absolute;
width: 41%;
height: 24%;
left: 29.5%;
top: 76%;
overflow: hidden;
/* -webkit-transform:perspective(8px) rotateX(.8deg); */
}
/*波浪水布局*/
.water {
width: 100%;
height: 100%;
}
.water_1,
.water_2,
.water_3,
.water_4 {
width: 100%;
position: absolute;
height: 50%;
-webkit-animation-name: shake;
-webkit-animation-duration: 40s;
-webkit-animation-direction: alternate;
-webkit-anination-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: shake;
-moz-animation-duration: 40s;
-moz-animation-direction: alternate;
-moz-anination-timing-function: linear;
-moz-animation-iteration-count: infinite;
}
.water_1 {
width: 131px;
height: 15px;
top: 13%;
left: 35%;
background: url(http://img1.sycdn.imooc.com//55ade1e000010f2908540027.png) -261px -0px no-repeat;
}
.water_2 {
width: 161px;
height: 9px;
top: 25%;
left: 45%;
background: url(http://img1.sycdn.imooc.com//55ade1e000010f2908540027.png) -693px -0px no-repeat;
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
}
.water_3 {
width: 261px;
height: 29px;
top: 50%;
left: 15%;
background: url(http://img1.sycdn.imooc.com//55ade1e000010f2908540027.png) -0px -0px no-repeat;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
}
.water_4 {
width: 301px;
height: 12px;
top: 70%;
left: 30%;
background: url(http://img1.sycdn.imooc.com//55ade1e000010f2908540027.png) -392px -0px no-repeat;
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
}
@-webkit-keyframes shake {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0);
}
10%,
30%,
50%,
70%,
90% {
-webkit-transform: translate3d(-30px, 0px, 0);
}
20%,
40%,
60%,
80% {
-webkit-transform: translate3d(30px, 0px, 0);
}
}
@-moz-keyframes shake {
0%, 100% {
-moz-transform: translate3d(0, 0, 0);
}
10%,
30%,
50%,
70%,
90% {
-moz-transform: translate3d(-30px, 0px, 0);
}
20%,
40%,
60%,
80% {
-moz-transform: translate3d(30px, 0px, 0);
}
}
/*星星*/
.stars {
width: 100%;
height: 100%;
position: absolute;
}
.stars > li {
position: absolute;
width: 30px;
height: 31px;
background-image: url("http://img1.sycdn.imooc.com//55ade1fe00016b8900300031.png");
-webkit-animation-name: flash;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-moz-animation-name: flash;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
}
.stars1 {
top: 20%;
left: 30%;
-webkit-animation-duration: 5s;
-moz-animation-duration: 5s;
}
.stars2 {
top: 15%;
left: 20%;
-webkit-animation-duration: 20s;
-moz-animation-duration: 20s;
}
.stars3 {
top: 25%;
left: 85%;
-webkit-animation-duration: 15s;
-moz-animation-duration: 15s;
}
.stars4 {
top: 30%;
left: 70%;
-webkit-animation-duration: 25s;
-moz-animation-duration: 25s;
}
.stars5 {
top: 25%;
left: 20%;
-webkit-animation-duration: 30s;
-moz-animation-duration: 30s;
}
.stars6 {
top: 10%;
left: 65%;
-webkit-animation-duration: 10s;
-moz-animation-duration: 10s;
}
@-webkit-keyframes flash {
0%, 50%, 100% {
opacity: 1;
}
25%,
75% {
opacity: 0;
}
}
@-moz-keyframes flash {
0%, 50%, 100% {
opacity: 1;
}
25%,
75% {
opacity: 0;
}
}
/*文字效果*/
.logo {
width: 185px;
height: 81px;
background-image: url(http://img1.sycdn.imooc.com//55ade2110001708401850081.png);
z-index: 999999;
position: absolute;
left: 50%;
margin-left: -92.5px;
top: 30px;
display: none;
}
.logolightSpeedIn {
display: block;
-webkit-animation-name: lightSpeedIn;
-webkit-animation-timing-function: ease-out;
-webkit-animation-duration: 1s;
-moz-animation-name: lightSpeedIn;
-moz-animation-timing-function: ease-out;
-moz-animation-duration: 1s;
}
@-webkit-keyframes lightSpeedIn {
0% {
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
opacity: 0;
}
60% {
-webkit-transform: skewX(20deg);
opacity: 1;
}
80% {
-webkit-transform: skewX(-5deg);
opacity: 1;
}
100% {
-webkit-transform: none;
opacity: 1;
}
}
@-moz-keyframes lightSpeedIn {
0% {
-moz-transform: translate3d(100%, 0, 0) skewX(-30deg);
opacity: 0;
}
60% {
-moz-transform: skewX(20deg);
opacity: 1;
}
80% {
-moz-transform: skewX(-5deg);
opacity: 1;
}
100% {
-moz-transform: none;
opacity: 1;
}
}
.logoshake {
-webkit-animation-name: logoshake;
-webkit-animation-duration: 0.5s;
-moz-animation-name: logoshake;
-moz-animation-duration: 0.5s;
}
@-webkit-keyframes logoshake {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0);
}
10%,
30%,
50%,
70%,
90% {
-webkit-transform: translate3d(-5px, 0, 0);
}
20%,
40%,
60%,
80% {
-webkit-transform: translate3d(10px, 0, 0);
}
}
@-moz-keyframes logoshake {
0%, 100% {
-moz-transform: translate3d(0, 0, 0);
}
10%,
30%,
50%,
70%,
90% {
-moz-transform: translate3d(-5px, 0, 0);
}
20%,
40%,
60%,
80% {
-moz-transform: translate3d(10px, 0, 0);
}
}
