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.........完整代码请登录后点击上方下载按钮下载查看