parallax实现视觉差异的海上灯塔效果代码-html代码-BFW代码库

代码语言：html
代码描述：parallax实现视觉差异的海上灯塔效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
body{padding:0;margin:0;overflow:hidden}.container{position:absolute;height:100vh;width:100%}.top{position:relative;height:75vh;width:100%}.stars{top:0;left:0;right:0;height:80%;z-index:-1}.stars>*{position:absolute;background:#f1f1f1;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;animation:twinkle 2s infinite;transition-timing-function:ease-in-out}.stars .star:nth-of-type(1){position:relative;top:4%;left:12%;width:1px;height:1px;animation-delay:2s}.stars .star:nth-of-type(2){position:relative;top:20%;left:92%;width:6px;height:6px;animation-delay:3s}.stars .star:nth-of-type(3){position:relative;top:30%;left:11%;width:6px;height:6px;animation-delay:3s}.stars .star:nth-of-type(4){position:relative;top:22%;left:57%;width:1px;height:1px;animation-delay:2s}.stars .star:nth-of-type(5){position:relative;top:99%;left:90%;width:3px;height:3px;animation-delay:5s}.stars .star:nth-of-type(6){position:relative;top:50%;left:19%;width:2px;height:2px;animation-delay:3s}.stars .star:nth-of-type(7){position:relative;top:13%;left:38%;width:5px;height:5px;animation-delay:2s}.stars .star:nth-of-type(8){position:relative;top:73%;left:28%;width:6px;height:6px;animation-delay:2s}.stars .star:nth-of-type(9){position:relative;top:45%;left:16%;width:6px;height:6px;animation-delay:1s}.stars .star:nth-of-type(10){position:relative;top:29%;left:99%;width:2px;height:2px;animation-delay:1s}.stars .star:nth-of-type(11){position:relative;top:82%;left:61%;width:6px;height:6px;animation-delay:5s}.stars .star:nth-of-type(12){position:relative;top:70%;left:50%;width:2px;height:2px;animation-delay:4s}.stars .star:nth-of-type(13){position:relative;top:28%;left:21%;width:4px;height:4px;animation-delay:2s}.stars .star:nth-of-type(14){position:relative;top:40%;left:23%;width:2px;height:2px;animation-delay:5s}.stars .star:nth-of-type(15){position:relative;top:25%;left:28%;width:1px;height:1px;animation-delay:3s}.stars .star:nth-of-type(16){position:relative;top:44%;left:3%;width:1px;height:1px;animation-delay:5s}.stars .star:nth-of-type(17){position:relative;top:90%;left:73%;width:5px;height:5px;animation-delay:5s}.stars .star:nth-of-type(18){position:relative;top:87%;left:39%;width:3px;height:3px;animation-delay:5s}.stars .star:nth-of-type(19){position:relative;top:5%;left:44%;width:6px;height:6px;animation-delay:5s}.stars .star:nth-of-type(20){position:relative;top:77%;left:60%;width:4px;height:4px;animation-delay:1s}.stars .star:nth-of-type(21){position:relative;top:97%;left:6%;width:6px;height:6px;animation-delay:2s}.stars .star:nth-of-type(22){position:relative;top:13%;left:27%;width:6px;height:6px;animation-delay:4s}.stars .star:nth-of-type(23){position:relative;top:40%;left:95%;width:3px;height:3px;animation-delay:3s}.stars .star:nth-of-type(24){position:relative;top:64%;left:52%;width:4px;height:4px;animation-delay:4s}.stars .star:nth-of-type(25){position:relative;top:97%;left:28%;width:6px;height:6px;animation-delay:4s}.stars .star:nth-of-type(26){position:relative;top:37%;left:18%;width:5px;height:5px;animation-delay:5s}.stars .star:nth-of-type(27){position:relative;top:25%;left:19%;width:4px;height:4px;animation-delay:5s}.stars .star:nth-of-type(28){position:relative;top:48%;left:80%;width:3px;height:3px;animation-delay:5s}.stars .star:nth-of-type(29){position:relative;top:85%;left:83%;width:6px;height:6px;animation-delay:5s}.stars .star:nth-of-type(30){position:relative;top:54%;left:5%;width:1px;height:1px;animation-delay:5s}.stars .star:nth-of-type(31){position:relative;top:58%;left:5%;width:5px;height:5px;animation-delay:3s}.stars .star:nth-of-type(32){position:relative;top:8%;left:4%;width:2px;height:2px;animation-delay:3s}.stars .star:nth-of-type(33){position:relative;top:29%;left:37%;width:6px;height:6px;animation-delay:3s}.stars .star:nth-of-type(34){position:relative;top:64%;left:31%;width:1px;height:1px;animation-delay:5s}.stars .star:nth-of-type(35){position:relative;top:26%;left:78%;width:1px;height:1px;animation-delay:4s}.stars .star:nth-of-type(36){position:relative;top:6%;left:49%;width:1px;height:1px;animation-delay:5s}.stars .star:nth-of-type(37){position:relative;top:99%;left:41%;width:1px;height:1px;animation-delay:5s}.stars .star:nth-of-type(38){position:relative;top:73%;left:77%;width:3px;height:3px;animation-delay:3s}.stars .star:nth-of-type(39){position:relative;top:94%;left:15%;width:1px;height:1px;animation-delay:1s}.stars .star:nth-of-type(40){position:relative;top:19%;left:33%;width:6px;height:6px;animation-delay:2s}@keyframes twinkle{0%{opacity:1}50%{opacity:.5}100%{opacity:1}}.twinkle-stars{top:0;left:0;right:0;height:100%;z-index:-1}.twinkle-stars>*{position:absolute;animation:twinkle-stars 5s infinite;transition-timing-function:ease}.twinkle-stars .twinkle-star:nth-of-type(1){top:166px;left:497px;width:3px;height:3px;animation-delay:3s}.twinkle-stars .twinkle-up{position:relative;width:1px;height:15px;background:#fff}.twinkle-stars .twinkle-side{position:absolute;width:17px;height:1px;top:6px;left:-8px;background:#fff;border-radius:10px}.twinkle-stars .twinkle-star:nth-of-type(2){top:393px;left:481px;width:2px;height:2px;animation-delay:2s}.twinkle-stars .twinkle-up{position:relative;width:1px;height:15px;background:#fff}.twinkle-stars .twinkle-side{position:absolute;width:17px;height:1px;top:6px;left:-8px;background:#fff;border-radius:10px}.twinkle-stars .twinkle-star:nth-of-type(3){top:309px;left:382px;width:1px;height:1px;animation-delay:5s}.twinkle-stars .twinkle-up{position:relative;width:1px;height:15px;background:#fff}.twinkle-stars .twinkle-side{position:absolute;width:17px;height:1px;top:6px;left:-8px;background:#fff;border-radius:10px}.twinkle-stars .twinkle-star:nth-of-type(4){top:246px;left:930px;width:6px;height:6px;animation-delay:4s}.twinkle-stars .twinkle-up{position:relative;width:1px;height:15px;background:#fff}.twinkle-stars .twinkle-side{position:absolute;width:17px;height:1px;top:6px;left:-8px;background:#fff;border-radius:10px}.twinkle-stars .twinkle-star:nth-of-type(5){top:130px;left:881px;width:3px;height:3px;animation-delay:4s}.twinkle-stars .twinkle-up{position:relative;width:1px;height:15px;background:#fff}.twinkle-stars .twinkle-side{position:absolute;width:17px;height:1px;top:6px;left:-8px;background:#fff;border-radius:10px}.twinkle-stars .twinkle-star:nth-of-type(6){top:195px;left:914px;width:2px;height:2px;animation-delay:5s}.twinkle-stars .twinkle-up{position:relative;width:1px;height:15px;background:#fff}.twinkle-stars .twinkle-side{position:absolute;width:17px;height:1px;top:6px;left:-8px;background:#fff;border-radius:10px}.twinkle-stars .twinkle-star:nth-of-type(7){top:48px;left:935px;width:4px;height:4px;animation-delay:5s}.twinkle-stars .twinkle-up{position:relative;width:1px;height:15px;background:#fff}.twinkle-stars .twinkle-side{position:absolute;width:17px;height:1px;top:6px;left:-8px;background:#fff;border-radius:10px}.twinkle-stars .twinkle-star:nth-of-type(8){top:336px;left:424px;width:3px;height:3px;animation-delay:3s}.twinkle-stars .twinkle-up{position:relative;width:1px;height:15px;background:#fff}.twinkle-stars .twinkle-side{position:absolute;width:17px;height:1px;top:6px;left:-8px;background:#fff;border-radius:10px}.twinkle-stars .twinkle-star:nth-of-type(9){top:387px;left:1111px;width:2px;height:2px;animation-delay:2s}.twinkle-stars .twinkle-up{position:relative;width:1px;height:15px;background:#fff}.twinkle-stars .twinkle-side{position:absolute;width:17px;height:1px;top:6px;left:-8px;background:#fff;border-radius:10px}.twinkle-stars .twinkle-star:nth-of-type(10){top:24px;left:74px;width:2px;height:2px;animation-delay:3s}.twinkle-stars .twinkle-up{position:relative;width:1px;height:15px;background:#fff}.twinkle-stars .twinkle-side{position:absolute;width:17px;height:1px;top:6px;left:-8px;background:#fff;border-radius:10px}.twinkle-stars .twinkle-star:nth-of-type(11){top:261px;left:590px;width:4px;height:4px;animation-delay:5s}.twinkle-stars .twinkle-up{position:relative;width:1px;height:15px;background:#fff}.twinkle-stars .twinkle-side{position:absolute;width:17px;height:1px;top:6px;left:-8px;background:#fff;border-radius:10px}.twinkle-stars .twinkle-star:nth-of-type(12){top:204px;left:986px;width:4px;height:4px;animation-delay:5s}.twinkle-stars .twinkle-up{position:relative;width:1px;height:15px;background:#fff}.twinkle-stars .twinkle-side{position:absolute;width:17px;height:1px;top:6px;left:-8px;background:#fff;border-radius:10px}.twinkle-stars .twinkle-star:nth-of-type(13){top:10px;left:1177px;width:5px;height:5px;animation-delay:4s}.twinkle-stars .twinkle-up{position:relative;width:1px;height:15px;background:#fff}.twinkle-stars .twinkle-side{position:absolute;width:17px;height:1px;top:6px;left:-8px;background:#fff;border-radius:10px}.twinkle-stars .twinkle-star:nth-of-type(14){top:211px;left:243px;width:3px;height:3px;animation-delay:2s}.twinkle-stars .twinkle-up{position:relative;width:1px;height:15px;background:#fff}.twinkle-stars .twinkle-side{position:absolute;width:17px;height:1px;top:6px;left:-8px;background:#fff;border-radius:10px}.twinkle-stars .twinkle-star:nth-of-type(15){top:99px;left:54px;width:6px;height:6px;animation-delay:4s}.twinkle-stars .twinkle-up{position:relative;width:1px;height:15px;background:#fff}.twinkle-stars .twinkle-side{position:absolute;width:17px;height:1px;top:6px;left:-8px;background:#fff;border-radius:10px}.twinkle-stars .twinkle-star:nth-of-type(16){top:11px;left:983px;width:6px;height:6px;animation-delay:5s}.twinkle-stars .twinkle-up{position:relative;width:1px;height:15px;background:#fff}.twinkle-stars .twinkle-side{position:absolute;width:17px;height:1px;top:6px;left:-8px;background:#fff;border-radius:10px}.twinkle-stars .twinkle-star:nth-of-type(17){top:28px;left:984px;width:5px;height:5px;animation-delay:2s}.twinkle-stars .twinkle-up{position:relative;width:1px;height:15px;background:#fff}.twinkle-stars .twinkle-side{position:absolute;width:17px;height:1px;top:6px;left:-8px;background:#fff;border-radius:10px}.twinkle-stars .twinkle-star:nth-of-type(18){top:384px;left:1048px;width:3px;height:3px;animation-delay:1s}.twinkle-stars .twinkle-up{position:relative;width:1px;height:15px;background:#fff}.twinkle-stars .twinkle-side{position:absolute;width:17px;height:1px;top:6px;left:-8px;background:#fff;border-radius:10px}.twinkle-stars .twinkle-star:nth-of-type(19){top:36px;left:353px;width:2px;height:2px;animation-delay:1s}.twinkle-stars .twinkle-up{position:relative;width:1px;height:15px;background:#fff}.twinkle-stars .twinkle-side{position:absolute;width:17px;height:1px;top:6px;left:-8px;background:#fff;border-radius:10px}.twinkle-stars .twinkle-star:nth-of-type(20){top:290px;left:871px;width:3px;height:3px;animation-delay:2s}.twinkle-stars .twinkle-up{position:relative;width:1px;height:15px;background:#fff}.twinkle-stars .twinkle-side{position:absolute;width:17px;height:1px;top:6px;left:-8px;background:#fff;border-radius:10px}.twinkle-stars .star:nth-of-type(21){top:66px;right:607px;width:4px;height:4px;animation-delay:4s}.twinkle-stars .star:nth-of-type(22){top:358px;right:416px;width:4px;height:4px;animation-delay:3s}.twinkle-stars .star:nth-of-type(23){top:211px;right:365px;width:2px;height:2px;animation-delay:3s}.twinkle-stars .star:nth-of-type(24){top:190px;right:1184px;width:1px;height:1px;animation-delay:3s}.twinkle-stars .star:nth-of-type(25){top:374px;right:689px;width:6px;height:6px;animation-delay:1s}.twinkle-stars .star:nth-of-type(26){top:144px;right:183px;width:2px;height:2px;animation-delay:4s}.twinkle-stars .star:nth-of-type(27){top:192px;right:516px;width:5px;height:5px;animation-delay:3s}.twinkle-stars .star:nth-of-type(28){top:391px;right:310px;width:4px;height:4px;animation-delay:3s}.twinkle-stars .star:nth-of-type(29){top:73px;right:39px;width:1px;height:1px;animation-delay:5s}.twinkle-stars .star:nth-of-type(30){top:337px;right:788px;width:3px;height:3px;animation-delay:3s}.twinkle-stars .star:nth-of-type(31){top:194px;right:405px;width:1px;height:1px;animation-delay:2s}.twinkle-stars .star:nth-of-type(32){top:33px;right:701px;width:4px;height:4px;animation-delay:2s}.twinkle-stars .star:nth-of-type(33){top:296px;right:35px;width:2px;height:2px;animation-delay:2s}.twinkle-stars .star:nth-of-type(34){top:306px;right:937px;width:2px;height:2px;animation-delay:2s}.twinkle-stars .star:nth-of-type(35){top:95px;right:185px;width:2px;height:2px;animation-delay:3s}.twinkle-stars .star:nth-of-type(36){top:317px;right:1121px;width:2px;height:2px;animation-delay:3s}.twinkle-stars .star:nth-of-type(37){top:27px;right:178px;width:1px;height:1px;animation-delay:2s}.twinkle-stars .star:nth-of-type(38){top:23px;right:112px;width:1px;height:1px;animation-delay:4s}.twinkle-stars .star:nth-of-type(39){top:285px;right:460px;width:1px;height:1px;animation-delay:3s}.twinkle-stars .star:nth-of-type(40){top:230px;right:804px;width:6px;height:6px;animation-delay:5s}@keyframes twinkle-stars{0%{opacity:.6;transform:scale(1)}50%{opacity:.3;transform:scale(1.3)}100%{opacity:.6;transform:scale(1)}}.sky{position:fixed;height:100vh;width:100%;background-color:#c5cfb7;*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=1,startColorstr='#FFC5CFB7',endColorstr='#FF082D47');background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IiIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2M1Y2ZiNyIvPjxzdG9wIG9mZnNldD0iMjAlIiBzdG9wLWNvbG9yPSIjODRhZDk4Ii8+PHN0b3Agb2Zmc2V0PSIzOSUiIHN0b3AtY29sb3I9IiM1Zjk5ODYiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzVmOTk4NiIvPjxzdG9wIG9mZnNldD0iNjAlIiBzdG9wLWNvbG9yPSIjNWY5OTg2Ii8+PHN0b3Agb2Zmc2V0PSI3MiUiIHN0b3AtY29sb3I9IiM0YTg5NzQiLz48c3RvcCBvZmZzZXQ9Ijg0JSIgc3RvcC1jb2xvcj0iIzMyNjU2NSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzA4MmQ0NyIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');background-size:100%;background-image:-moz-radial-gradient(center,ellipse cover,#c5cfb7 0,#84ad98 20%,#5f9986 39%,#5f9986 50%,#5f9986 60%,#4a8974 72%,#326565 84%,#082d47 100%);background-image:-webkit-radial-gradient(center,ellipse cover,#c5cfb7 0,#84ad98 20%,#5f9986 39%,#5f9986 50%,#5f9986 60%,#4a8974 72%,#326565 84%,#082d47 100%);background-image:radial-gradient(ellipse cover at center,#c5cfb7 0,#84ad98 20%,#5f9986 39%,#5f9986 50%,#5f9986 60%,#4a8974 72%,#326565 84%,#082d47 100%)}.right-attachment{position:absolute;height:100px;width:150px;background:#141912;left:20px;top:-20px}.right-roof{position:absolute;height:20px;width:140px;background:#141912;left:11px;top:-20px;-moz-transform:skew(50deg);-ms-transform:skew(50deg);-webkit-transform:skew(50deg);transform:skew(50deg)}.satellite{position:absolute;height:60px;width:2px;background:#141912;left:90px;top:-40px}.back-rocks{position:absolute;width:480px;height:50px;left:-130px;bottom:-47px}.back-rock-1{position:absolute;width:68px;height:60px;background:#252b21;left:0;bottom:-30px;-moz-border-radius:100%;-webkit-border-radius:100%;border-radius:100%}.back-rock-2{position:absolute;width:70px;height:70px;background:#252b21;left:68%;bottom:-30px;-moz-border-radius:100%;-webkit-border-radius:100%;border-radius:100%}.back-rock-3{position:absolute;width:55px;height:55px;background:#252b21;left:88%;bottom:-30px;-moz-border-radius:100%;-webkit-border-radius:100%;border-radius:100%}.front-rocks{position:absolute;bottom:-90px;left:-145px;height:100px;width:350px}.front-rock-1{position:absolute;left:50px;height:150px;width:180px;background:#141912;-moz-border-radius:100%;-webkit-border-radius:100%;border-radius:100%}.front-rock-2{position:absolute;bottom:0;left:240px;height:100px;width:150px;background:#141912;-moz-border-radius:100%;-webkit-border-radius:100%;border-radius:100%}.front-rock-3{position:absolute;bottom:-22px;left:365px;height:100px;width:90px;background:#141912;-moz-border-radius:100%;-webkit-border-radius:100%;border-radius:100%}.overlay{position:absolute;height:40px;width:42px;background:#141b11;top:54px;left:-19px}.panel-container{width:100%;height:307px;border:0 solid #CCC;margin:0;position:absolute;-moz-transform:perspective(300px);-ms-transform:perspective(300px);-webkit-transform:perspective(300px);transform:perspective(300px);left:0;bottom:-12px}.left-mid-roof{position:absolute;height:35px;width:100px;background:#141912;bottom:0;left:-16px}.left-mid-roof-2{position:absolute;height:5px;width:70px;background:#141912;bottom:18%;left:-11px;-moz-border-radius:10%;-webkit-border-radius:10%;border-radius:10%}#rotate-x .panel{background-size:100%;background:#141912;width:50px;height:100%;min-height:220px;margin:auto;-moz-transform:perspective(329px) rotateX(44deg) translate3d(0px,0px,0px);-ms-transform:perspective(329px) rotateX(44deg) translate3d(0px,0px,0px);-webkit-transform:perspective(329px) rotateX(44deg) translate3d(0px,0px,0px);transform:perspective(329px) rotateX(44deg) translate3d(0px,0px,0px)}.top-triangle{padding-top:7px;position:relative;height:0;width:3px;bottom:262px;left:3px;background:rgba(0,128,0,0);border-left:20px rgba(0,128,0,0) solid;border-right:23px rgba(0,128,0,0) solid;border-bottom:18px #141b11 solid;border-top:3px rgba(0,128,0,0) solid;border-bottom-right-radius:28%;border-bottom-left-radius:28%;opacity:.98}.top-triangle-circle-middle{position:absolute;height:2px;width:9.5px;background:#141912;bottom:0;left:-3px}.top-triangle-circle{position:relative;height:8px;width:8px;bottom:17px;left:-2.5px;background:#141912;border-radius:100%}.top-triangle-circle-top{position:relative;height:8px;width:6px;bottom:3px;left:-1.5px;background:#141912}.light-house{position:absolute;bottom:40px;left:46vw}.mid-railings-rail{position:absolute;height:10px;width:55px;top:72px;left:-26px;-moz-border-radius-topleft:2px;-webkit-border-top-left-radius:2px;border-top-left-radius:2px;-moz-border-radius-topright:2px;-webkit-border-top-right-radius:2px;border-top-right-radius:2px;border:1px solid #141912}.mid-rail{position:absolute;width:1px;height:10px;background:#141912}.mid-rail-1{left:2px}.mid-rail-2{left:4px}.mid-rail-3{left:6px}.mid-rail-5{left:49px}.mid-rail-6{left:52px}.left-mid-railings{position:absolute;top:80px;left:-28px;border-left:26px rgba(0,128,0,0) solid;border-right:15px rgba(0,128,0,0) solid;border-bottom:15px #141b11 solid;border-top:0 rgba(0,128,0,0) solid;border-bottom-right-radius:0;border-bottom-left-radius:100%}.right-mid-railings{position:absolute;top:80px;left:-8px;border-left:26px rgba(0,128,0,0) solid;border-right:15px rgba(0,128,0,0) solid;border-bottom:15px #141b11 solid;border-top:0 rgba(0,128,0,0) solid;border-bottom-right-radius:100%;border-bottom-left-radius:0}.top-ledge{position:absolute;height:8px;width:50px;top:55px;left:-23px;background-color:#141912;-moz-border-radius-bottomright:100%;-webkit-border-bottom-right-radius:100%;border-bottom-right-radius:100%;-moz-border-radius-bottomleft:100%;-webkit-border-bottom-left-radius:100%;border-bottom-left-radius:100%}.shining-lights-container{position:absolute;height:100px;width:800px;left:-399px;top:-39px;-moz-animation:left-to-right;-moz-animation-duration:6s;-moz-animation-iteration-count:infinite;-moz-animation-delay:0s;-moz-animation-direction:forwards;-moz-default-animation-timing-function:linear;-webkit-animation:left-to-right;-webkit-animation-duration:6s;-webkit-animation-iteration-count:infinite;-webkit-animation-delay:0s;-webkit-animation-direction:forwards;-webkit-default-animation-timing-function:linear;animation:left-to-right;animation-duration:6s;animation-iteration-count:infinite;animation-delay:0s;animation-direction:forwards;default-animation-timing-function:linear}@keyframes left-to-right{0%{transform:rotateY(0deg);opacity:1}50%{transform:rotateY(-180deg);left:-393px;opacity:.7}100%{transform:rotateY(0deg);opacity:1}}.shining-light-left{position:absolute;height:46px;width:70%;background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y5ZjU5ZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Y5ZjU5ZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');background-size:100%;background-image:-webkit-gradient(linear,0% 50%,100% 50%,color-stop(0%,#f9f59f),color-stop(100%,rgba(249,245,159,0)));background-image:-moz-linear-gradient(left,#f9f59f 0,rgba(249,245,159,0) 100%);background-image:-webkit-linear-gradient(left,#f9f59f 0,rgba(249,245,159,0) 100%);background-image:linear-gradient(to right,#f9f59f 0,rgba(249,245,159,0) 100%);opacity:.7;float:left;top:57px;left:10px;-moz-transform:perspective(529px) rotateX(0deg) rotateY(-120deg) rotate(0deg);-ms-transform:perspective(529px) rotateX(0deg) rotateY(-120deg) rotate(0deg);-webkit-transform:perspective(529px) rotateX(0deg) rotateY(-120deg) rotate(0deg);transform:perspective(529px) rotateX(0deg) rotateY(-120deg) rotate(0deg)}.shining-light-right{position:absolute;height:46px;left:236px;width:70%;top:56px;background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjAuNSIgeDI9IjAuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y5ZjU5ZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Y5ZjU5ZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');background-size:100%;background-image:-webkit-gradient(linear,100% 50%,0% 50%,color-stop(0%,#f9f59f),color-stop(100%,rgba(249,245,159,0)));background-image:-moz-linear-gradient(right,#f9f59f 0,rgba(249,245,159,0) 100%);background-image:-webkit-linear-gradient(right,#f9f59f 0,rgba(249,245,159,0) 100%);background-image:linear-gradient(to left,#f9f59f 0,rgba(249,245,159,0) 100%);-moz-transform:perspective(529px) rotateX(180deg) rotateY(-120deg) rotate(0deg) skew(1deg);-ms-transform:perspective(529px) rotateX(180deg) rotateY(-120deg) rotate(0deg) skew(1deg);-webkit-transform:perspective(529px) rotateX(180deg) rotateY(-120deg) rotate(0deg) skew(1deg);transform:perspective(529px) rotateX(180deg) rotateY(-120deg) rotate(0deg) skew(1deg)}.glow-shine-container{position:absolute;height:350px;width:350px;left:-150px!important;top:-398px!important;-moz-border-radius:100%;-webkit-border-radius:100%;border-radius:100%;background:-moz-radial-gradient(center,ellipse cover,rgba(214,205,112,0.6) 0,rgba(211,206,160,0) 100%);background:-webkit-radial-gradient(center,ellipse cover,rgba(214,205,112,0.6) 0,rgba(211,206,160,0) 100%);background:radial-gradient(ellipse at center,rgba(214,205,112,0.6) 0,rgba(211,206,160,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d6cd70',endColorstr='#66d3cea0',GradientType=1);-moz-animation:glowing;-moz-animation-duration:6s;-moz-animation-iteration-count:infinite;-moz-animation-delay:1s;-moz-animation-direction:forwards;-moz-default-animation-timing-function:linear;-webkit-animation:glowing;-webkit-animation-duration:6s;-webkit-animation-iteration-count:infinite;-webkit-animation-delay:1s;-webkit-animation-direction:forwards;-webkit-default-animation-timing-function:linear;animation:glowing;animation-duration:6s;animation-iteration-count:infinite;animation-delay:1s;animation-direction:forwards;default-animation-timing-function:linear}@keyframes glowing{0%{-moz-transform:scale(1);-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1)}50%{-moz-transform:scale(1.1);-ms-transform:scale(1.1);-webkit-transform:scale(1.1);transform:scale(1.1)}100%{-moz-transform:scale(1);-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1)}}.shine-circle{-moz-border-radius:100%;-webkit-border-radius:100%;border-radius:100%}.glow-shine-1{position:absolute;height:30%;width:30%;background:#edea89;top:35%;left:35%;opacity:.2}.glow-shine-2{position:relative;height:10%;width:10%;background:#edea89;margin:auto;top:45%;opacity:.1;-moz-animation:glowing-shine-1;-moz-animation-duration:6s;-moz-animation-iteration-count:infinite;-moz-animation-delay:0s;-moz-animation-direction:forwards;-moz-default-animation-timing-function:ease-in;-webkit-animation:glowing-shine-1;-webkit-animation-duration:6s;-webkit-animation-iteration-count:infinite;-webkit-animation-delay:0s;-webkit-animation-direction:forwards;-webkit-default-animation-timing-function:ease-in;animation:glowing-shine-1;animation-duration:6s;animation-iteration-count:infinite;animation-delay:0s;animation-direction:forwards;default-animation-timing-function:ease-in}@keyframes glowing-shine-1{0%{-moz-box-shadow:0 0 0 #edea89;-webkit-box-shadow:0 0 0 #edea89;box-shadow:0 0 0 #edea89;opacity:.6;-moz-transform:scale(1);-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1)}50%{-moz-box-shadow:0 0 32px #edea89;-webkit-box-shadow:0 0 32px #edea89;box-shadow:0 0 32px #edea89;opacity:1;-moz-transform:scale(1.2);-ms-transform:scale(1.2);-webkit-transform:scale(1.2);transform:scale(1.2)}100%{-moz-box-shadow:0 0 0 #edea89;-webkit-box-shadow:0 0 0 #edea89;box-shadow:0 0 0 #edea89;opacity:.6;-moz-transform:scale(1);-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1)}}.glow-shine-3{position:absolute;height:50%;width:50%;background:#edea89;top:25%;left:25%;opacity:.05}.glow-shine-4{position:absolute;height:70%;width:70%;background:#edea89;top:15%;left:15%;opacity:.05}.glow-shine-5{position:absolute;height:100%;width:100%;background:#edea89;top:0;left:0;opacity:.05}.glow-shine-narrow-left{position:.........完整代码请登录后点击上方下载按钮下载查看