css实现灯塔效果
代码语言：html
所属分类：布局界面
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> CSS Lighthouse Scene</title>
<style>
html,
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
* {
position: absolute;
}
*:before,
*:after {
content: "";
position: absolute;
}
.scene {
width: 100vw;
height: 100vh;
}
.background {
width: 100%;
height: 100%;
overflow: hidden;
z-index: 1;
background-color: #29284c;
background-image: linear-gradient(#29284c 0%, #4c4b82 10%, #717ae1 60%, #75e2fa 90%);
}
.mountains {
width: 100%;
height: 250px;
bottom: 65px;
z-index: 3;
}
.mountains .mountain {
width: 250px;
height: 250px;
right: 50px;
bottom: -40px;
background-color: #717ae1;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
border-radius: 3px;
}
.mountains .mountain:after {
width: 100%;
height: 100%;
opacity: 0.7;
background-image: linear-gradient(135deg, #4c4b82 0%, #717ae1 20%, #75e2fa 40%);
}
.mountains .mountain:nth-child(2) {
width: 240px;
height: 240px;
right: 220px;
z-index: 2;
}
.mountains .mountain:nth-child(3) {
width: 260px;
height: 260px;
right: 350px;
}
.mountains .mountain:nth-child(4) {
width: 200px;
height: 200px;
right: 130px;
bottom: -70px;
z-index: 3;
}
.mountains .mountain:nth-child(4):after {
background-image: linear-gradient(135deg, #4c4b82 0%, #717ae1 6%, #75e2fa 20%);
}
.sea {
width: 100%;
height: 170px;
bottom: 0;
left: 0;
background: #29284c;
background-image: linear-gradient(totop, #29284c 0%, #4c4b82 30%, #717ae1 60%, #75e2fa 90%);
z-index: 4;
}
.sea .wave {
height: 3px;
background-color: #d6d9f6;
border-radius: 100%;
opacity: 0.2;
-webkit-animation: wave5s linear infinite;
animation: wave5s linear infinite;
}
.sea .wave:nth-of-type(1) {
width: 82px;
bottom: 80px;
left: 8vw;
opacity: 0.4;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.sea .wave:nth-of-type(2) {
width: 139px;
bottom: 98px;
left: 55vw;
opacity: 0.1;
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.sea .wave:nth-of-type(3) {
width: 63px;
bottom: 139px;
left: 84vw;
opacity: 0.2;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.sea .wave:nth-of-type(4) {
width: 82px;
bottom: 49px;
left: 86vw;
opacity: 0.5;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.sea .wave:nth-of-type(5) {
width: 132px;
bottom: 1px;
left: 58vw;
opacity: 0.2;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.sea .wave:nth-of-type(6) {
width: 81px;
bottom: 18px;
left: 24vw;
opacity: 0.2;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.sea .wave:nth-of-type(7) {
width: 113px;
bottom: 161px;
left: 41vw;
opacity: 0.1;
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.sea .wave:nth-of-type(8) {
width: 104px;
bottom: 93px;
left: 100vw;
opacity: 0.1;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.sea .wave:nth-of-type(9) {
width: 100px;
bottom: 63px;
left: 85vw;
opacity: 0.4;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.sea .wave:nth-of-type(10) {
width: 98px;
bottom: 58px;
left: 99vw;
opacity: 0.1;
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.sea .wave:nth-of-type(11) {
width: 102px;
bottom: 17px;
left: 39vw;
opacity: 0.3;
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.sea .wave:nth-of-type(12) {
width: 119px;
bottom: 15px;
left: 64vw;
opacity: 0.2;
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.sea .wave:nth-of-type(13) {
width: 116px;
bottom: 91px;
left: 88vw;
opacity: 0.2;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.sea .wave:nth-of-type(14) {
width: 96px;
bottom: 140px;
left: 52vw;
opacity: 0.2;
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.sea .wave:nth-of-type(15) {
width: 134px;
bottom: 102px;
left: 44vw;
opacity: 0.1;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.sea .wave:nth-of-type(16) {
width: 132px;
bottom: 72px;
left: 92vw;
opacity: 0.2;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.sea .wave:nth-of-type(17) {
width: 117px;
bottom: 163px;
left: 31vw;
opacity: 0.4;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.sea .wave:nth-of-type(18) {
width: 116px;
bottom: 99px;
left: 42vw;
opacity: 0.5;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.sea .wave:nth-of-type(19) {
width: 136px;
bottom: 41px;
left: 11vw;
opacity: 0.3;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.sea .wave:nth-of-type(20) {
width: 119px;
bottom: 161px;
left: 21vw;
opacity: 0.5;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.sea .wave:nth-of-type(21) {
width: 125px;
bottom: 89px;
left: 19vw;
opacity: 0.3;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.sea .wave:nth-of-type(22) {
width: 124px;
bottom: 109px;
left: 80vw;
opacity: 0.4;
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.sea .wave:nth-of-type(23) {
width: 93px;
bottom: 35px;
left: 45vw;
opacity: 0.4;
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.sea .wave:nth-of-type(24) {
width: 146px;
bottom: 6px;
left: 86vw;
opacity: 0.5;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.sea .wave:nth-of-type(25) {
width: 124px;
bottom: 67px;
left: 47vw;
opacity: 0.2;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.sea .wave:nth-of-type(26) {
width: 150px;
bottom: 101px;
left: 95vw;
opacity: 0.3;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.sea .wave:nth-of-type(27) {
width: 149px;
bottom: 6px;
left: 37vw;
opacity: 0.5;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.sea .wave:nth-of-type(28) {
width: 54px;
bottom: 25px;
left: 13vw;
opacity: 0.2;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.sea .wave:nth-of-type(29) {
width: 66px;
bottom: 139px;
left: 91vw;
opacity: 0.2;
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.sea .wave:nth-of-type(30) {
width: 149px;
bottom: 29px;
left: 92vw;
opacity: 0.2;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.boat {
width: 90px;
height: 90px;
bottom: 90px;
-webkit-animation: boat100s linear infinite;
animation: boat100s linear infinite;
}
.boat:after {
background-image: linear-gradient(90deg, rgba(214, 217, 246, 0.7) 30%, rgba(255, 255, 255, 0) 100%);
width: 200px;
height: 8px;
top: 105px;
left: 20px;
border-radius: 40%;
z-index: -1;
}
.boat:before {
width: 92px;
height: 50px;
left: 25px;
bottom: -70px;
background-image: linear-gradient(tobottom, rgba(41, 40, 76, 0.8) 30%, rgba(41, 40, 76, 0) 100%);
z-index: -1;
-webkit-animation: boatShadow100s linear infinite;
animation: boatShadow100s linear infinite;
}
.boat .base {
width: 110px;
height: 25px;
bottom: -20px;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);
background-color: #4c4b82;
}
.boat .sail:nth-child(1) {
width: 90px;
height: 80px;
left: 5px;
-webkit-clip-path: polygon(50% 0%, 0% 100%, 50% 100%);
clip-path: polygon(50% 0%, 0% 100%, 50% 100%);
background: linear-gradient(#b9befa 0%, #4c4b82 60%);
}
.boat .sail:nth-child(2) {
width: 80px;
height: 70px;
left: 15px;
bottom: 10px;
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
-webkit-clip-path: polygon(50% 0%, 0% 100%, 50% 100%);
clip-path: polygon(50% 0%, 0% 100%, 50% 100%);
background: linear-gradient(#b9befa 0%, #4c4b82 60%);
}
.moon {
width: 80px;
height: 80px;
top: 25%;
right: 10%;
border-radius: 50%;
z-index: 2;
background-color: #d6d9f6;
box-shadow: 0 0 10px #d6d9f6, 0 0 20px #d6d9f6, 0 0 30px #d6d9f6, 0 0 40px #d6d9f6, 0 0 50px #75e2fa, 0 0 100px #d6d9f6;
}
.stars {
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.stars .star {
border-radius: 50%;
background-color: #b9befa;
-webkit-animation: twinkle5s linear infinite;
animation: twinkle5s linear infinite;
}
.stars .star:nth-of-type(1) {
width: 2px;
height: 2px;
top: 89vh;
left: 30vw;
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
.stars .star:nth-of-type(2) {
width: 2px;
height: 2px;
top: 94vh;
left: 94vw;
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.stars .star:nth-of-type(3) {
width: 3px;
height: 3px;
top: 20vh;
left: 70vw;
-webkit-animation-delay: 5s;
animation-delay: 5s;
}
.stars .star:nth-of-type(4) {
width: 3px;
height: 3px;
top: 51vh;
left: 88vw;
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
.stars .star:nth-of-type(5) {
width: 1px;
height: 1px;
top: 73vh;
left: 89vw;
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.stars .star:nth-of-type(6) {
width: 3px;
height: 3px;
top: 54vh;
left: 2vw;
-webkit-animation-delay: 5s;
animation-delay: 5s;
}
.stars .star:nth-of-type(7) {
width: 3px;
height: 3px;
top: 49vh;
left: 60vw;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.stars .star:nth-of-type(8) {
width: 4px;
height: 4px;
top: 18vh;
left: 20vw;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.stars .star:nth-of-type(9) {
width: 3px;
height: 3px;
top: 34vh;
left: 53vw;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.stars .star:nth-of-type(10) {
width: 4px;
height: 4px;
top: 31vh;
left: 24vw;
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.stars .star:nth-of-type(11) {
width: 3px;
height: 3px;
top: 45vh;
left: 38vw;
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
.stars .star:nth-of-type(12) {
width: 2px;
height: 2px;
top: 92vh;
left: 99vw;
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
.stars .star:nth-of-type(13) {
width: 2px;
height: 2px;
top: 8vh;
left: 77vw;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.stars .star:nth-of-type(14) {
width: 4px;
height: 4px;
top: 13vh;
left: 45vw;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.stars .star:nth-of-type(15) {
width: 3px;
height: 3px;
top: 37vh;
left: 77vw;
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
.stars .star:nth-of-type(16) {
width: 2px;
height: 2px;
top: 31vh;
left: 88vw;
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.stars .star:nth-of-type(17) {
width: 1px;
height: 1px;
top: 73vh;
left: 3vw;
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
.stars .star:nth-of-type(18) {
width: 4px;
height: 4px;
top: 10vh;
left: 41vw;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.stars .star:nth-of-type(19) {
width: 2px;
height: 2px;
top: 98vh;
left: 37vw;
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.stars .star:nth-of-type(20) {
width: 3px;
height: 3px;
top: 100vh;
left: 78vw;
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
.stars .star:nth-of-type(21) {
width: 4px;
height: 4px;
top: 41vh;
left: 35vw;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.stars .star:nth-of-type(22) {
width: 4px;
height: 4px;
top: 32vh;
left: 48vw;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.stars .star:nth-of-type(23) {
width: 2px;
height: 2px;
top: 55vh;
left: 85vw;
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
.stars .star:nth-of-type(24) {
width: 1px;
height: 1px;
top: 65vh;
left: 17vw;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.stars .star:nth-of-type(25) {
width: 4px;
height: 4px;
top: 58vh;
left: 6vw;
-webkit-animation-delay: 5s;
animation-delay: 5s;
}
.stars .star:nth-of-type(26) {
width: 3px;
height: 3px;
top: 32vh;
left: 77vw;
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.stars .star:nth-of-type(27) {
width: 1px;
height: 1px;
top: 74vh;
left: 37vw;
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
.stars .star:nth-of-type(28) {
width: 4px;
height: 4px;
top: 58vh;
left: 91vw;
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.stars .star:nth-of-type(29) {
width: 1px;
height: 1px;
top: 3vh;
left: 30vw;
-webkit-animation-delay: 5s;
animation-delay: 5s;
}
.stars .star:nth-of-type(30) {
width: 4px;
height: 4px;
top: 93vh;
left: 8vw;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.stars .star:nth-of-type(31) {
width: 4px;
height: 4px;
top: 91vh;
left: 41vw;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.stars .star:nth-of-type(32) {
width: 2px;
height: 2px;
top: 97vh;
left: 2vw;
-webkit-animation-delay: 5s;
animation-delay: 5s;
}
.stars .star:nth-of-type(33) {
width: 4px;
height: 4px;
top: 42vh;
left: 75vw;
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.stars .star:nth-of-type(34) {
width: 2px;
height: 2px;
top: 72vh;
left: 70vw;
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.stars .star:nth-of-type(35) {
width: 4px;
height: 4px;
top: 92vh;
left: 88vw;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.stars .star:nth-of-type(36) {
width: 2px;
height: 2px;
top: 74vh;
left: 100vw;
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.stars .star:nth-of-type(37) {
width: 1px;
height: 1px;
top: 94vh;
left: 56vw;
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.stars .star:nth-of-type(38) {
width: 2px;
height: 2px;
top: 16vh;
left: 75vw;
-webkit-animation-delay: 5s;
animation-delay: 5s;
}
.stars .star:nth-of-type(39) {
width: 4px;
height: 4px;
top: 6vh;
left: 12vw;
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
.stars .star:nth-of-type(40) {
width: 1px;
height: 1px;
top: 5vh;
left: 13vw;
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.stars .star:nth-of-type(41) {
width: 4px;
height: 4px;
top: 55vh;
left: 33vw;
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.stars .star:nth-of-type(42) {
width: 2px;
height: 2px;
top: 26vh;
left: 22vw;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.stars .star:nth-of-type(43) {
width: 2px;
height: 2px;
top: 89vh;
left: 29vw;
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.stars .star:nth-of-type(44) {
width: 1px;
height: 1px;
top: 41vh;
left: 41vw;
-webkit-animation-delay: 5s;
animation-delay: 5s;
}
.stars .star:nth-of-type(45) {
width: 4px;
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0