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

css实现一个灯塔效果代码

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