div+css实现日食光晕动画效果代码-html代码-BFW代码库

div+css实现日食光晕动画效果代码

代码语言：html

所属分类：动画

代码描述：div+css实现日食光晕动画效果代码代码

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

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

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
html, body {
  width: 100%;
  height: 100%;
  background-color: #09090b;
  display: flex;
  align-items: center;
  justify-content: center;
}

#root {
  width: 100vmin;
  height: 100vmin;
  position: relative;
  overflow: hidden;
}

.layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.layer-1 {
  animation: 30s linear rotate infinite;
  transform-origin: 66% 40%;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, 0) 0%, rgba(255, 248, 176, 0.46) 3.96%, rgba(69, 168, 255, 0) 8.33%, rgba(69, 168, 255, 0) 8.33%) 69.5% 37.7%/17.2% 17.2% no-repeat, radial-gradient(ellipse at 50% 50%, #fff8b0 0%, rgba(69, 168, 255, 0) 47.22%) 74.1% 35.6%/33.6% 36.6% no-repeat;
  /* Rays */
}

.layer-2 {
  animation: 20s linear rotate infinite reverse;
  transform-origin: 66% 40%;
  background: radial-gradient(ellipse at 50% 50%, rgba(69, 168, 255, 0) 20%, #09090b 29%) 77.4% 33.8%/40% 40% no-repeat, repeating-conic-gradient(from 15deg at 50% 50%, rgba(255, 255, 255, 0) 0%, rgba(255, 248, 176, 0.51) 2.64%, rgba(69, 168, 255, 0) 5.56%, rgba(69, 168, 255, 0) 5.56%) 69.5% 37.7%/17.2% 17.2% no-repeat;
  /* Rays */
}

.layer-3 {
  animation: 20s linear rotate infinite;
  background: repea.........完整代码请登录后点击上方下载按钮下载查看