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