以下是 html5页面滚动背景图片动画效果代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=2,user-scalable=yes" />
<title>html5页面滚动背景图片动画效果</title>
<link rel="stylesheet" type="text/css" href="jquery.fullPage.css"/>
<link type="text/css" rel="stylesheet" href="style.css"/>
<script src="less.min.js" type="text/javascript"></script>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="jquery.fullPage.min.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
</head>
<body class="pcindex">
<div id="fullpage">
<div class="first section">
<div class="container">
<div class="phonesblock">
<div class="phones">
<img src="img/phone1.png" alt="" class="phone1" />
<img src="img/phone2.png" alt="" class="phone2" />
</div>
</div>
<div class="downblock">
<div class="downwrap">
<img src="img/down2.png" alt="" class="down" />
</div>
</div>
<div class="star">
<div class="vline"></div>
<img src="img/star2.png" alt="" />
</div>
<div class="androiddown"></div>
</div>
</div>
<div class="second section">
<div class="container">
<div class="hablock">
<div class="starmoon">
<img src="img/star-moon.png" alt="" />
</div>
<div class="help">
<img id="help" src="img/help.png" alt="" />
<div class="pop4">
<img src="img/pop2.png" alt="" />
<img src="img/popcontent4.png" alt="" />
</div>
</div>
<div class="answer">
<div class="answers">
<div class="pop1">
<img src="img/pop2.png" alt="" />
<img src="img/popcontent1.png" alt="" />
</div>
<div class="pop2">
<img src="img/pop2.png" alt="" />
<img src="img/popcontent2.png" alt="" />
</div>
<div class="pop3">
<img src="img/pop2.png" alt="" />
<img src="img/popcontent3.png" alt="" />
</div>
</div>
<div class="pillows">
<img src="img/pillows.png"/>
</div>
</div>
</div>
<div class="yewenblock">
<div class="yewen">
<div class="title">夜问？</div>
<div class="content">
<p>
你的一个问题，<br />
成就了这么多的大湿！<br />
无论是情感困惑 <br />
还是十万个为什么，<br />
这里都有人回应你！<br />
</p>
</div>
</div>
</div>
<div class="ball">
<div class="vline"></div>
<img src="img/ball.png"/>
</div>
</div>
</div>
<div class="third section">
<div class="container">
<div class="goodnight">
<div class="hearttalk">
<img class="talk" src="img/hearttalk.png"/>
<img class="gn" src="img/goodnight.png" alt="" />
</div>
</div>
<div class="yehuablock">
<div class="yehua">
<div class="title">夜话 </div>
<div class="content">
<p>
你的一句情话，<br />
不知戳到了多少人的心！<br />
说情话喝鸡汤聊八卦，<br />
谁让练习的妹子太单纯！<br />
</p>
</div>
</div>
</div>
<div class="smile">
<div class="vline"></div>
<img src="img/smile-on-2.png"/>
</div>
</div>
</div>
<div class="fourth section">
<div class="container">
<div class="connblock">
<div class="connection">
<div class="bg1"><img src="img/connbg1.png" alt=""/></div>
<div class="bg2"><img src="img/connbg2.png" alt=""/></div>
<div class="connwrap">
<div class="f2b">
<img src="img/f2.png" alt="" class="f2" />
</div>
<div class="f3b">
<div class="f3wrap">
<img src="img/f3.png" alt="" class="f3" />
</div>
</div>
<div class="f1b">
<img src="img/f1.png" alt="" class="f1" />
</div>
</div>
</div>
</div>
<div class="fujinblock">
<div class="fujin">
<div class="title">附近</div>
<div class="content">
<p>
我靠，<br />
原来我的邻居也这么寂寞！<br />
发现附近未知的声音，<br />
你离Ta只差一个练习！<br />
</p>
</div>
</div>
<div class="loc">
<div class="vline"></div>
<img src="img/loc.png" alt="" />
</div>
</div>
</div>
</div>
<div class="fifth section">
<div class="aboveblock">
<div class="above"></div>
<div class="center">
<div class="housewrap">
<img src="img/house.png" alt="" class="house" />
<div class="cloud">
<img src="img/cloud2.png" alt="" />
</div>
<div class="lunar">
<img src="img/lunar.png" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
JS代码(script.js):
// JavaScript Document/*鐫″墠瀹樼綉棣栭〉 js * by 鐜嬫檽鍐? * */
(function (window,jQuery){
jQuery(document).ready(function ($){
console.log(navigator.userAgent) var p1 = new Image();
p1.src = "img/phone1.png";
var p2 = new Image();
p2.src = "img/phone2.png";
function w1800(){
if ($("html").width() > 1800){
$(".container").addClass("w1800");
$(".fifth .center").addClass("w1800");
}
else{
$(".container").removeClass("w1800");
$(".fifth .center").removeClass("w1800");
}
}
;
w1800();
$('#fullpage').fullpage({
navigation:true,verticalCentered:false,scrollOverflow:true,anchors:['firstPage','secondPage','thirdPage','fourthPage','fifthPage'],afterLoad:function (anchorLink,index){
if (index == 1){
initMobiles();
}
else{
$(".phone1").css("top",$(".phones").height() - $(".phone1").height() / 2.0 + "px");
$(".phone2").css("top",$(".phones").height() - $(".phone2").height() / 2.0 + "px");
}
initPillows();
}
,afterRender:function (){
var pluginContainer = $(this);
//alert("The resulting DOM structure is ready");
//闃叉绗竴椤靛姞杞芥湭娓叉煋濂芥椂 鍑虹幇绗簩椤靛唴瀹? $(".second .starmoon").css("display","block");
smileChange.start();
$(".third .smile img").mouseenter(function (){
smileChange.stop();
//console.log(smileChange.intervalId);
}
).mouseleave(function (){
smileChange.start();
}
);
initHouse();
$(window).resize(function (){
$.fn.fullpage.reBuild();
$(".phone1").stop();
$(".phone2").stop();
}
);
/*imageFitDiv($(".hearttalk"),900.0,748);
*/
}
,afterReBuild:function (){
w1800();
initMobiles();
initPillows();
initPops();
initHearts();
//浣縞onnection閮ㄥ垎鐨刦2 f3澶у皬閲嶆柊璁＄畻 $(".connection .f2,.connection .f2b,.connection .f3,.connection .f3b").removeAttr("style");
initConn();
initHouse();
}
,onLeave:function (index,nextIndex,direction){
$(".phone1").stop();
$(".phone2").stop();
if (index != 1){
}
if (nextIndex == 2){
initPops();
}
if (nextIndex == 3){
initHearts();
}
if (nextIndex == 4){
initConn();
}
if (nextIndex == 5 || nextIndex == 3){
$("#fp-nav").hide();
}
else{
$("#fp-nav").show();
}
}
}
);
(function androiddown(){
$(".androiddown").click(function (){
window.location.href = "http://www.shuiqian.cc/public/Bedtime.apk";
}
);
}
)();
//鍒濆鍖栦袱涓墜鏈? function initMobiles(){
$(".phone1").css("top",$(".phones").height() - $(".phone1").height() / 2.0 + "px");
$(".phone2").css("top",$(".phones").height() - $(".phone2").height() / 2.0 + "px");
$(".phone1").animate({
opacity:0.9,top:"-=" + (923.0 / 2 - 135.0) * $(".phone1").height() / p1.height + "px"}
,2000,function (){
$(".star").animate({
opacity:1}
,1500,function (){
//鏄剧ず涓嬭浇閾炬帴 浜岀淮鐮? imageFitDiv($(".downwrap"),"img.down",882.0,561.0);
$(".first .down").fadeIn(1000,function (){
var o = $("img.down").offset();
console.log(o);
console.log($("img.down").width()) console.log($("img.down").height()) $(".androiddown").css({
width:42.0 / 882 * $("img.down").width() + "px",height:156.0 / 561 * $("img.down").height() + "px",left:o.left + 590.0 / 882 * $("img.down").width() - $(".container").offset().left + "px",top:o.top + 331.0 / 561 * $("img.down").height() + "px"}
);
}
);
}
);
}
);
$(".phone2").animate({
opacity:1,top:"-=" + (801.0 / 2 - 120.0) * $(".phone2").height() / p2.height + "px"}
,2000,function (){
}
);
//鏄熸槦瀹氫綅 $(".star img").css("bottom",$(".star").height() * 0.2 + "px");
}
//浣挎灂澶寸殑鍥剧墖閫傚簲div function initPillows(){
imageFitDiv($(".pillows"),"img",1022.0,137);
//瀵箂tarmoon璁剧疆瀹藉害锛屼互渚夸娇鐢╩argin 0 auto鏉ュ眳涓? $(".hablock .starmoon").width($(".hablock .help img").width());
}
//鍒濆鍖杙op鎻愮ず妗嗙殑浣嶇疆 function initPops(){
imageFitDiv($(".pop1"),"img",282.0,188);
imageFitDiv($(".pop2"),"img",282.0,188);
imageFitDiv($(".pop3"),"img",282.0,188);
//Help閮ㄥ垎 377*313 //澶辨亱浜嗘€庝箞鍔為儴鍒?282*188 $(".pop4").css({
width:$("#help").width()/377*282.0+"px",height:$("#help").height()/313*188.0+"px"}
);
//鍘熷浘pop4鐩稿浜巋elp left 275 $(".pop4").offset({
left:$("#help").offset().left+275.0/377*$("#help").width(),top:$("#help").offset().top}
);
//pop1鍦ㄥ師鍥剧殑浣嶇疆锛歭eft 70 //鍘熷浘 pillows 773 103 popPosition($(".pop1"),70.0 / 773 * $(".pillows img").width(),0);
popPosition($(".pop2"),298.0 / 773 * $(".pillows img").width(),13.0 / 91 * $(".pop1 img").height());
//top璺濈鐩稿浜巔op1 img绠楀嚭 popPosition($(".pop3"),574.0 / 773 * $(".pillows img").width(),-10.0 / 91 * $(".pop1 img").height());
popSpanPosition($(".pop1"));
popSpanPosition($(".pop2"));
popSpanPosition($(".pop3"));
}
function initHearts(){
var w = $(".third .talk").width();
var h = $(".third .talk").height();
var originW = 900.0;
var originH = 748.0;
//475 102 $(".third .gn").css({
width:180.0 / 611 * w + "px",height:149.0 / 508 * h + "px",left:(475 / originW * w) + "px",top:(102 / originH * h) + "px"}
);
}
//浣胯仈绯荤殑鍥剧墖閫傚簲div function initConn(){
//imageFitDiv($(".connection"),"img",312.0,463);
imageFitDiv(".connection",".connwrap",500.0,742.0,"");
originf2bW = $(".fourth .connection .f2b").width();
originf3bW = $(".fourth .connection .f3b").width();
//浣縡2 f3鍥剧墖鐨勫ぇ灏忎笉闅忕埗绾х櫨鍒嗘瘮鍙樺寲鑰屽啀娆″彉鍖? //涓虹洃鍚紶鏍囦簨浠?transform $(".connection .f2").css({
width:$(".connection .f2").width() + 'px',height:$(".connection .f2").height() + 'px'}
);
$(".connection .f3").css({
width:$(".connection .f3").width() + 'px',height:$(".connection .f3").height() + 'px'}
);
//console.log(getNowStyle($(".f3b")[0],"width"));
//鐒跺悗澧炲ぇf2b f3b鐨勫搴?}
//绗簲椤垫埧瀛愭湀浜儴鍒? function initHouse(){
houseFitDiv();
//瀹氫綅涔屼簯 $(".fifth .cloud").css({
width:$(".fifth .house").width() + "px",height:$(".fifth .house").height() + "px"}
);
//瀹氫綅鏈堜寒 澶у浘鐗堟湰 /*$(".fifth .lunar").css({
width:$(".fifth .house").width()+"px",height:$(".fifth .house").height()+"px"}
);
*/
//瀹氫綅鏈堜寒 灏忓浘鐗堟湰 $(".fifth .lunar").css({
width:141.0 / 720 * $(".fifth .house").width() + "px",height:118.0 / 720 * $(".fifth .house").height() + "px",left:361.0 / 720 * $(".fifth .house").height() + "px",top:103.0 / 720 * $(".fifth .house").width() + "px"}
);
}
//浣垮浘鐗囬€傚簲div锛屽楂樼瓑姣斾緥锛屼笉瓒呰繃div function imageFitDiv(div,find,imgOriginWidth,imgOriginHeight){
var w = $(div).width();
var h = $(div).height();
if (w / h >= imgOriginWidth / imgOriginHeight){
$(div).find(find).height(h + "px");
$(div).find(find).width(h / imgOriginHeight * imgOriginWidth + "px");
}
else{
$(div).find(find).width(w + "px");
$(div).find(find).height(w / imgOriginWidth * imgOriginHeight + "px");
}
}
//绗簲椤垫埧瀛愰€傚簲div function houseFitDiv(){
var div = $(".fifth .center");
var w = div.width();
var h = div.height();
if (w / h >= 721.0 / 720){
$(div).find("img.house").height(h / 486.0 * 720 + "px");
$(div).find("img.house,.housewrap").width($(div).find("img.house").height() / 720.0 * 721 + "px");
}
else{
$(div).find("img.house").width(w + "px");
$(div).find("img.house").height(w / 721.0 * 720 + "px");
}
//$(div).find("img.house").wrap("<div class=\"housewrap\"></div>");
}
//瀹氫綅涓変釜pop妗? function popPosition(pop1,left,top){
var pillowOffset = $(".pillows img").offset().left - $(".pillows").offset().left;
$(pop1).css({
left:pillowOffset + left + "px",top:top + "px"}
);
}
//瀹氫綅pop鍐呯殑span鏂囧瓧 function popSpanPosition(pop1){
var span = $(pop1).find("span");
span.css({
left:(span.parent().find("img").width() - span.width()) / 2.0 + "px",top:(span.parent().find("img").height() - span.height()) / 2.0 + "px"}
);
}
var smileChange ={
start:function (){
var that = this;
//鍐呭眰鐨勫唴灞傚嚱鏁扮殑this浼氬嚭闂 this.intervalId = setInterval(function (){
clearTimeout(that.timeoutId);
$(".third .smile img").attr("src","img/smile-on-2.png");
that.timeoutId = setTimeout(function (){
$(".third .smile img").attr("src","img/smile-off-2.png");
}
,500);
//console.log("start timeout ID "+that.timeoutId);
}
,1000);
}
,stop:function (){
console.log("stop timeout id" + this.timeoutId);
clearInterval(this.intervalId);
clearTimeout(this.timeoutId);
console.log("stop interval id" + this.intervalId);
}
,changing:0,intervalId:0,timeoutId:0}
//璁板綍榧犳爣杩涘叆鏃剁殑鍧愭爣 var enterX = 0,enterY = 0;
/* 绗洓椤?瑙嗗樊閮ㄥ垎*/
var originf2bW = 0,originf3bW = 0;
$(".fourth .container") .mouseenter(function (e){
enterX = e.clientX;
enterY = e.clientY;
}
) .mousemove({
find:".fourth .container",section:"connection"}
,parallax) .mouseleave(function (e){
$(".f2b").width(originf2bW).css({
'transform':'none','-webkit-transform':'none'}
);
$(".f3b").width(originf3bW).css({
'transform':'none','-webkit-transform':'none'}
);
$(".fourth .bg1,.fourth .bg2").css({
'transform':'none','-webkit-transform':'none'}
);
}
);
/*绗簲椤?瑙嗗樊閮ㄥ垎*/
//,涓婃鏈堜寒鐨勮搴?姝ゆ鏈堜寒鐨勮搴?涓婃瑙掑害鏄惁鍔犱笂 var lastDeg = 0,deg = 0,degPlused = 0;
$(".fifth .housewrap").mouseenter(function (e){
enterX = e.clientX;
enterY = e.clientY;
}
);
$(".fifth .housewrap").mousemove({
find:".house",section:"house"}
,parallax);
$(".fifth .housewrap").mouseleave(function (e){
$(".fifth .cloud").css({
'left':'0','top':'0'}
);
lastDeg = deg;
$(".fifth .lunar").css({
'transform':"none",'-webkit-transform':"none",'transform':"rotate(" + (-lastDeg) + "deg)",'-webkit-transform':"rotate(" + (-lastDeg) + "deg)",}
);
$(".fifth .house").css({
'transform':"none",'-webkit-transform':"none"}
);
degPlused = 0;
}
);
function parallax(e){
var that = this;
var offset = $(that).offset();
var x1 = offset.left;
var y1 = offset.top;
//find鍙兘鍜屽綋鍓嶅厓绱犵浉鍚? var find = $(this).find(e.data.find)[0];
find || (find = $(this));
var w = $(find).width();
var h = $(find).height();
var centerX = x1 + w / 2.0;
var centerY = y1 + h / 2.0;
var x2 = e.clientX;
var y2 = e.clientY;
var deltaX = x2 - x1;
var deltaY = y2 - y1;
//delta center var dcX = x2 - centerX;
var dcY = y2 - centerY;
//move delta var moveX = x2 - enterX;
var moveY = y2 - enterY;
//绗洓椤?connection閮ㄥ垎 if (e.data.section == "connection"){
//搴婁笂绗戣劯 瑙嗗樊 if (dcX < 0){
if(((-dcX)*0.1) > $(that).find(".f2").width()*0.5){
dcX = 0 - $(that).find(".f2").width()*0.5;
}
var nowf2W = originf2bW - dcX * 0.1;
$(that).find(".f2b").width(nowf2W).css({
'transform':'translate(' + (dcX * 0.1) + 'px,' + (0) + 'px)','-webkit-transform':'translate(' + (dcX * 0.1) + 'px,' + (0) +'px)'}
);
}
else{
if((dcX*0.1) > $(that).find(".f3").width()*0.5){
dcX = $(that).find(".f3").width()*0.5;
}
var nowf3W = originf3bW + dcX * 0.1;
$(that).find(".f3b").width(nowf3W).css({
'transform':'translate(' + (dcX * 0.1) + 'px,' + (0) +'px)','-webkit-transform':'translate(' + (dcX * 0.1) + 'px,' + (0) +'px)'}
);
}
/* //绗戣劯鍒嗗壊绾胯宸? $(that).find(".f1").css({
'transform':'translate(' + '0px,' + (dcY * 0.04)+'px)','-webkit-transform':'translate(' + '0px,' + (dcY * 0.04)+'px)'}
);
*/
//涓や釜鑳屾櫙鍥?瑙嗗樊 $(that).find(".bg1").css({
'transform':'translate(' + (dcX * 0.05) + 'px,' + (dcY * 0.05)+'px)','-webkit-transform':'translate(' + (dcX * 0.05) + 'px,' + (dcY * 0.05)+'px)'}
);
$(that).find(".bg2").css({
'transform':'translate(' + (dcX * 0.08) + 'px,' + (dcY * 0.08)+'px)','-webkit-transform':'translate(' + (dcX * 0.08) + 'px,' + (dcY * 0.08)+'px)'}
);
}
//绗簲椤?house閮ㄥ垎 if (e.data.section == "house"){
//cloud CSS 璁剧疆 $(".fifth .cloud").css({
'left':dcX * 0.05 + "px",'top':dcY * 0.05 + "px"}
);
deg = parseInt(moveY / h * 0.2 * 360);
if (!degPlused){
deg += lastDeg;
}
//lunar CSS 璁剧疆 $(".fifth .lunar").css({
'transform':"translate(" + (-dcX * 0.05) + "px," + (-dcY * 0.1) + "px)",'-webkit-transform':"translate(" + (-dcX * 0.05) + "px," + (-dcY * 0.1) + "px)",'transform':"rotate(" + (-deg) + "deg)",'-webkit-transform':"rotate(" + (-deg) + "deg)"}
);
$(".fifth .house").css({
'transform':"translate(" + (-dcX * 0.02) + "px," + (-dcY * 0.02) + "px)",'-webkit-transform':"translate(" + (-dcX * 0.02) + "px," + (-dcY * 0.02) + "px)"}
);
}
}
var getNowStyle = function (element,attr){
return element.currentStyle ? element.currentStyle[attr]:getComputedStyle(element,null)[attr];
}
}
);
}
)(window,jQuery);
CSS代码(style.css):
@charset "utf-8";/*** 鐫″墠瀹樼綉棣栭〉* by 鐜嬫檽鍐?* 2015/07/28*/
.container{width:100%;height:100%;}
.w1800{margin:0 auto;width:1800px;height:100%;}
@-webkit-keyframes myrotate{0%{-webkit-transform:rotate(0deg);}
100%{-webkit-transform:rotate(360deg);}
}
@-moz-keyframes myrotate{0%{-moz-transform:rotate(0deg);}
100%{-moz-transform:rotate(360deg);}
}
@-ms-keyframes myrotate{0%{-ms-transform:rotate(0deg);}
100%{-ms-transform:rotate(360deg);}
}
@keyframes myrotate{0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}
.pcindex .first{background-color:#6a3589;height:100%;width:100%;}
.pcindex .first .container{position:relative;}
.pcindex .first .vline{height:60%;width:2px;*width:4px;background-color:#efde01;margin:0 auto;border:1px solid #e5d20b;border-style:none solid none solid;}
.pcindex .first .phonesblock{width:49%;height:80%;background-color:inherit;background-color:transparent;float:left;position:absolute;bottom:0;}
.pcindex .first .phonesblock .phones{width:80%;height:100%;margin:0 auto;}
.pcindex .first .phonesblock .phones .phone1,.pcindex .first .phonesblock .phones .phone2{opacity:0;}
.pcindex .first .phonesblock .phones .phone1{float:left;width:50%;position:relative;}
.pcindex .first .phonesblock .phones .phone2{float:right;width:45%;position:relative;right:20%;}
.pcindex .first .downblock{width:50%;height:100%;float:right;background-color:inherit;background-color:transparent;position:relative;}
.pcindex .first .downblock .downwrap{height:70%;width:100%;position:absolute;bottom:0;}
.pcindex .first .downblock .downwrap .down{display:none;}
.pcindex .first .star{opacity:0;width:10%;height:30%;background-color:transparent;background-color:inherit;margin:0 auto;position:absolute;z-index:0;text-align:center;left:45%;top:0;}
.pcindex .first .star img{position:relative;bottom:10%;height:40%;max-width:100%;margin:0 auto;-webkit-animation:myrotate 5s infinite linear;animation:myrotate 5s infinite linear;}
.pcindex .first .star img:hover{-webkit-animation-play-state:paused;animation-play-state:paused;}
.pcindex .first .androiddown{position:absolute;}
.pcindex .first .androiddown:hover{cursor:pointer;background-color:rgba(0,0,255,0.18);}
.pcindex .second{background-color:#eeeeee;}
.pcindex .second .vline{height:60%;width:2px;*width:4px;background-color:#722d98;margin:0 auto;}
.pcindex .second .container{position:relative;}
.pcindex .second .hablock{width:65%;background-color:transparent;background-color:inherit;height:80%;float:left;position:absolute;bottom:0;}
.pcindex .second .hablock .starmoon{display:none;height:20%;margin:0 auto;position:relative;}
.pcindex .second .hablock .starmoon img{position:absolute;bottom:0;width:100%;}
.pcindex .second .hablock .help{height:40%;width:100%;position:relative;}
.pcindex .second .hablock .help img#help{height:100%;display:block;margin:0 auto;}
.pcindex .second .hablock .help .pop4{position:absolute;top:0;left:10px;}
.pcindex .second .hablock .help .pop4 img{width:100%;height:100%;position:absolute;left:0px;top:0px;}
.pcindex .second .hablock .answer{height:40%;width:100%;position:relative;}
.pcindex .second .hablock .answer .answers{height:50%;width:100%;position:relative;}
.pcindex .second .hablock .answer .answers .pop1,.pcindex .second .hablock .answer .answers .pop2,.pcindex .second .hablock .answer .answers .pop3{height:100%;width:32%;position:absolute;}
.pcindex .second .hablock .answer .answers .pop1 img,.pcindex .second .hablock .answer .answers .pop2 img,.pcindex .second .hablock .answer .answers .pop3 img{position:absolute;left:0px;top:0px;}
.pcindex .second .hablock .answer .pillows{position:absolute;bottom:0;height:50%;width:100%;}
.pcindex .second .hablock .answer .pillows img{height:70%;display:block;margin:0 auto;}
.pcindex .second .yewenblock{width:35%;height:100%;float:right;display:table;}
.pcindex .second .yewenblock .yewen{display:table-cell;vertical-align:middle;}
.pcindex .second .yewenblock .yewen .title{font-family:"Youyuan","骞煎渾","SYHT","寰蒋闆呴粦","Microsoft Yahei","Heiti";color:#6b318b;font-size:24px;font-weight:600;}
.pcindex .second .yewenblock .yewen .content{font-family:"Youyuan","骞煎渾","SYHT","寰蒋闆呴粦","Microsoft Yahei","Heiti";font-size:24px;}
.pcindex .second .ball{position:absolute;right:10%;top:0;z-index:0;width:12%;height:30%;background-color:transparent;background-color:inherit;margin:0 auto;text-align:center;}
.pcindex .second .ball img{position:relative;bottom:1px;height:40%;max-width:100%;margin:0 auto;-webkit-animation:myrotate 5s infinite linear;animation:myrotate 5s infinite linear;}
.pcindex .second .ball img:hover{-webkit-animation-play-state:paused;animation-play-state:paused;}
.pcindex .third{background-color:#f4e6ff;}
.pcindex .third .vline{height:60%;width:2px;background-color:#722d98;margin:0 auto;}
.pcindex .third .goodnight{background-color:inherit;background-color:transparent;width:55%;height:100%;float:right;}
.pcindex .third .goodnight .hearttalk{width:100%;height:88%;margin-top:10%;position:relative;}
.pcindex .third .goodnight .hearttalk img.talk{max-width:900px;width:80%;}
.pcindex .third .goodnight .hearttalk img.gn{position:absolute;}
.pcindex .third .yehuablock{background-color:#f4e6ff;width:45%;height:100%;float:left;display:table;}
.pcindex .third .yehuablock .yehua{display:table-cell;vertical-align:middle;}
.pcindex .third .yehuablock .yehua .title{font-family:"Youyuan","骞煎渾","SYHT","寰蒋闆呴粦","Microsoft Yahei","Heiti";color:#6b318b;font-size:24px;font-weight:600;text-align:right;}
.pcindex .third .yehuablock .yehua .content{font-family:"Youyuan","骞煎渾","SYHT","寰蒋闆呴粦","Microsoft Yahei","Heiti";font-size:24px;text-align:right;}
.pcindex .third .smile{position:absolute;left:10%;top:0;z-index:0;width:12%;height:30%;background-color:transparent;background-color:inherit;margin:0 auto;text-align:center;}
.pcindex .third .smile img{position:relative;bottom:1px;height:40%;max-width:100%;margin:0 auto;}
.pcindex .fourth{background-color:#eeeeee;}
.pcindex .fourth .vline{height:60%;width:2px;background-color:#722d98;margin:0 auto;}
.pcindex .fourth .container{position:relative;}
.pcindex .fourth .connblock{width:60%;background-color:transparent;background-color:inherit;height:80%;float:left;position:absolute;bottom:0;}
.pcindex .fourth .connblock .connection{height:100%;width:100%;position:relative;}
.pcindex .fourth .connblock .connection .bg1,.pcindex .fourth .connblock .connection .bg2{height:auto;width:100%;position:absolute;bottom:0;left:0;}
.pcindex .fourth .connblock .connection .bg1 img,.pcindex .fourth .connblock .connection .bg2 img{width:100%;}
.pcindex .fourth .connblock .connection .connwrap{margin:0 auto;text-align:center;position:relative;}
.pcindex .fourth .connblock .connection .f1b{width:100%;height:100%;display:inline-block;position:absolute;left:0;top:0;}
.pcindex .fourth .connblock .connection .f1b .f1{height:100%;}
.pcindex .fourth .connblock .connection .f2b{overflow:hidden;width:32%;height:80%;float:left;position:absolute;left:18%;bottom:0;}
.pcindex .fourth .connblock .connection .f2b .f2{width:200%;}
.pcindex .fourth .connblock .connection .f3b{overflow:hidden;width:32%;height:80%;float:right;position:absolute;right:18%;bottom:0;}
.pcindex .fourth .connblock .connection .f3b .f3wrap{position:relative;right:100%;width:200%;}
.pcindex .fourth .connblock .connection .f3b .f3wrap .f3{width:100%;display:block;position:absolute;right:0;}
.pcindex .fourth .fujinblock{width:39%;height:100%;float:right;display:table;}
.pcindex .fourth .fujinblock .fujin{display:table-cell;vertical-align:middle;}
.pcindex .fourth .fujinblock .fujin .title{font-family:"Youyuan","骞煎渾","SYHT","寰蒋闆呴粦","Microsoft Yahei","Heiti";color:#6b318b;font-size:24px;font-weight:600;}
.pcindex .fourth .fujinblock .fujin .content{font-family:"Youyuan","骞煎渾","SYHT","寰蒋闆呴粦","Microsoft Yahei","Heiti";font-size:24px;}
.pcindex .fourth .loc{position:absolute;left:60%;top:0;z-index:0;width:12%;height:30%;background-color:transparent;background-color:inherit;margin:0 auto;text-align:center;}
.pcindex .fourth .loc img{position:relative;bottom:1px;height:40%;max-width:100%;margin:0 auto;}
.pcindex .fourth .about{height:2000px;background-color:red;}
.pcindex .fifth .aboveblock{height:70%;background-color:#1C1A36;}
.pcindex .fifth .aboveblock .above{height:30%;}
.pcindex .fifth .aboveblock .center{height:70%;overflow:hidden;}
.pcindex .fifth .aboveblock .center .housewrap{height:100%;margin:0 auto;position:relative;}
.pcindex .fifth .aboveblock .center .housewrap .cloud{position:absolute;left:0;top:0;}
.pcindex .fifth .aboveblock .center .housewrap .cloud img{width:100%;height:100%;}
.pcindex .fifth .aboveblock .center .housewrap .lunar{position:absolute;}
.pcindex .fifth .aboveblock .center .housewrap .lunar img{width:100%;height:100%;}
.pcindex .fifth .footer{height:30%;background-color:#2C2A4F;}
分享到QQ
分享到微博
微信扫一扫
