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