无div纯css实现日出光芒四射效果代码-html代码-BFW代码库

无div纯css实现日出光芒四射效果代码

代码语言：html

代码描述：无div纯css实现日出光芒四射效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
<style>
:root {
  --yellow: #fdd5a2;
  --yellow-1: #ffffc8;
  --green: green;
  --blue: skyblue;
  --blue-1: #0066ffd9;
  --blue-2: #000610;
  --red: red;
  --pink: #ea818170;
  --pink-1: #e6989863;
}

* {
  margin: 0;
  background-repeat: no-repeat;
}

body {
  height: 100vh;
  background-color: radial-gradient(var(--blue-2) 50%, transparent 51%);
  background-image: 
    radial-gradient(var(--blue-2) 50%, transparent 51%),
    radial-gradient(var(--blue-2) 50%, transparent 51%),
    radial-gradient(var(--blue-2) 50%, transparent 51%),
    radial-gradient(var(--blue-2) 50%, transparent 51%),
    radial-gradient(var(--blue-2) 50%, transparent 51%),
    radial-gradient(var(--blue-2) 50%, transparent 51%),
    radial-gradient(var(--blue-2) 50%, transparent 51%),
    /*sky*/
    radial-gradient(circle at bottom, transparent, var(--blue-1) 35%, var(--blue-2) 90%, var(--blue-2)),
    radial-gradient(circle at bottom, transparent, transparent 60%, var(--blue-1) 70%, var(--blue-2)),
    radial-gradient(circle at bottom, var(--yellow-1) 1%, transparent 5%, transparent),
    radial-gradient(circle at bottom, var(--yellow) 5%, transparent 15%, transparent),
    radial-gradient(circle at bottom, var(--pink) 5%, transparent 35%, transparent),
    radial-gradient(var(--pink) 5%, var(--pink-1) 15%, transparent 60%),
    radial-gradient(var(--pink) 55%, var(--pink-1) 55%, transparent 60%),
    conic-gradient(at 50% 100%,
      var(--blue), 
      transparent 3%, 
      transparent 3.5%, 
      .........完整代码请登录后点击上方下载按钮下载查看