纯css实现发光旋转背景效果-html代码-BFW代码库

纯css实现发光旋转背景效果

代码语言：html

所属分类：背景

代码描述：纯css实现发光旋转背景效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
  margin: 0;
}

main {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.outer {
  position: relative;
  width: 100vw;
  height: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(closest-side, red 0%, transparent 50%, white 100%), conic-gradient(red 0deg, pink 10deg 25deg, red 35deg 55deg, pink 65deg 85deg, red 95deg 115deg, pink 125deg 145deg, red 155deg 175deg, pink 185deg 205deg, red 215deg 235deg, pink 245deg 265deg, red 275deg 295deg, pink 305deg 325deg, red 335deg);
}

.outer::before {
  content: "";
  position: absolute;
  top: -10vw;
  left: -10vw;
  width: 120vw;
  height: 120vw;
  background: radial-gradient(closest-side, transparent 0%, transparent 50%, white 100%), conic-gradient(transparent 0deg, yellow 10deg 25deg, transparent 35deg 55deg, yellow 65deg 85deg, transparent 95deg 115deg, yellow 125deg 145deg, transparent 155deg 175deg, yellow 185deg 205deg, transparent 215deg 235deg, yellow 245deg 265deg, transparent 275deg 295deg, yellow 305deg 325deg, transparent 335deg);
  animation: spin 15s linear infinite;
  mix-blend-mode: screen;
}

.outer:.........完整代码请登录后点击上方下载按钮下载查看