css实现一个灯塔效果代码-html代码-BFW代码库

代码语言：html

代码描述：css实现一个灯塔效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
:root {
  --bg-color: #0e080f;
  --brown: #6b2412;
  --orange: #e5501b;
  --light-brown: #983315;
  --white: #f5e1c4;
  --skin-color: #e19d61;
  --lighter-brown: #a45a3a;
}
body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--white)
}
.container {
  position: relative;
  background: rgb(68,39,17);
background: radial-gradient(circle, rgba(68,39,17,1) 0%, rgba(14,8,15,1) 57%); 
  height: 600px;
  width: 800px;
  overflow: hidden;
}
.c1 {
  position: absolute; 
    background: rgb(64,32,4);
background: radial-gradient(circle, rgba(64,32,4,1) 0%, rgba(66,35,17,1) 3%, rgba(14,8,15,1) 44%); 
  height: 900px;
  width: 900px;
  border-radius: 100%;
  top: -189px;
  left: -50px;
  animation: glowing 5s forwards linear infinite;
  animation-delay: 9s;
}
.c2 {
  position: absolute;
  background: rgb(117,58,6);
background: radial-gradient(circle, rgba(117,58,6,1) 6%, rgba(66,35,17,1) 26%, rgba(14,8,15,1) 72%);
  height: 700px;
  width: 700px;
  border-radius: 100%;
  top: -100px;
  left: 50px;
  animation: glowing 5s forwards linear infinite;
  animation-delay: 8s;
}
.c3 {
  position: absolute;
   background: rgb(163,85,18);
background: radial-gradient(circle, rgba(163,85,18,1) 0%, rgba(31,16,14,1) 74%, rgba(14,8,15,1) 100%); 
  height: 500px;
  width: 500px;
  border-radius: 100%;
  top: -9px;
  left: 150px;
  animation: glowing 5s forwards linear infinite;
  animation-delay: 7s;
}
.c4 {
  position: absolute;
   background: rgb(177,92,19);
background: radial-gradient(circle, rgba(177,92,19,1) 6%, rgba(66,35,17,1) 63%, rgba(14,8,15,1) 100%); 
  height: 380px;
  width: 380px;
  border-radius: 100%;
  top: 45px;
  left: 210px;
  animation: glowing 5s forwards linear infinite;
  animation-delay: 6s;
}
.c5 {
  position: absolute;
 background: rgb(203,106,22);
background: radial-gradient(circle, rgba(203,106,22,1) 6%, rgba(66,35,17,1) 77%, rgba(14,8,15,1) 100%);  
  height: 280px;
  width: 280px;
  border-radius: 100%;
  top: 90px;
  left: 260px;
  animation: glowing 5s forwards linear infinite;
  animation-delay: 5s;
}
.c6 {
  position: absolute;
    background: rgb(224,118,26);
background: radial-gradient(circle, rgba(224,118,26,1) 6%, rgba(66,35,17,1) 93%, rgba(14,8,15,1) 100%);  
  height: 180px;
  width: 180px;
  border-radius: 100%;
  top: 136px;
  left: 312px;
  animation: glowing 5s forwards linear infinite;
  animation-delay: 4s;
}
.c7 {
  position: absolute;
   background: rgb(224,117,25);
background: radial-gradient(circle, rgba(224,117,25,1) 43%, rgba(14,8,15,1) 100%); 
  height: 130px;
  width: 130px;
  border-radius: 100%;
  top: 160px;
  left: 337px;
  animation: glowing 5s forwards linear infinite;
  animation-delay: 3s;
}
.c8 {
  position: absolute;
  background: var(--skin-color);
  height: 90px;
  width: 90px;
  border-radius: 100%;
  top: 180px;
  left: 357px;
  animation: glowing 5s forwards linear infinite;
  animation-delay: 2s;
}
.c9 {
  position: absolute;
  background: var(--orange);
  height: 50px;
  width: 50px;
  border-radius: 100%;
  top: 200px;
  left: 376px;
  animation: glowing 5s forwards linear infinite;
  animation-delay: 1s;
}
.c10 {
  position: absolute;
  background: var(--white);
  height: 30px;
  width: 30px;
  border-radius: 100%;
  top: 210px;
  left: 386px;
  animation: glowing 5s forwards linear infinite;
}
.lh1 {
  position: absolute;
    background: rgb(14,8,15);
background: linear-gradient(0deg, rgba(14,8,15,1) 23%, rgba(47,19,17,1) 75%, rgba(90,34,19,1) 98%); 
  height: 240px;
  width: 100px;
  clip-path: polygon(20% 0%, 80% 0%, 90% 100%, 10% 100%);
  top: 280px;
  left: 350px;
}
.lh2 {
  position: absolute;
    background: rgb(14,8,15);
background: linear-gradient(0deg, rgba(14,8,15,1) 11%, rgba(47,19,17,1) 44%, rgba(90,34,19,1) 81%);  
  height: 240px;
  width: 40px;
  clip-path: polygon(20% 0%, 80% 0%, 90% 100%, 10% 100%);
  top: 280px;
  left: 380px;
}
.window {
  position: absolute;
  width: 15px;
  height: 25px;
  border-radius: 50px 50px 0 0;
  background: var(--bg-color);
  left: 13px;
  top: 30px;
}
.door {
  position: absolute;
  width: 25px;
  height: 60px;
  border-radius: 50px 50px 0 0;
  background: var(--bg-color);
  left: 8px;
  top: 200px;
}
.lh3 {
  position: absolute;
  background:  background: rgb(122,64,12);
background: linear-g.........完整代码请登录后点击上方下载按钮下载查看