css+svg实现日食效果代码-html代码-BFW代码库

css+svg实现日食效果代码

代码语言：html

代码描述：css+svg实现日食效果代码

代码标签： css svg 日食

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


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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
* {
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html,
body {
  height:100%;
}

body {
  display:grid;
  place-items:center;
  background-color:black;
  overflow:hidden;
}

svg {
  position:fixed;
  z-index:-10;
  width:100%;
  height:100%;
  inset:0;
  opacity:0.6;
}

.circle {
  width:400px;
  aspect-ratio:1;
  background-color:black;
  border-radius:100%;
  position:relative;
  z-index:1;
  box-shadow:0 0 55px 1px hsl(200, 100%, 50%, 0.5);
}

.circle::before,
.circle::after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  z-index:-1;
  filter:blur(60px);
  opacity:0.9;
  mix-blend-mode:multiply;
}

.circle::before {
  background-color:hsl(290, 100%, 50%);
  animation:rotate 13s linear infinite;
}

.circle::after {
  background-color:hsl(195, 100%, 50%);
  animation:rotateReverse 13s linear infinite;
}


@keyframes rotate {
  
  0% {
    transform:translate(0, 0);
     filter:blur(60px);
  }
  
   25% {
    transform:translate(15%, 15%);
    filter:blur(80px);
  }
  
   50% {
    transform:translate(15%, 0);
     filter:blur(100px);
  }
  
   75% {
    transform:translate(15%, -15%);
     filter:blur(80px);
  }
  
   100% {
    transform:translate(0, 0);
     filter:blur(60px);
  }
 
  
  
.........完整代码请登录后点击上方下载按钮下载查看