css实现圆圈变方形背景动画效果代码-html代码-BFW代码库

css实现圆圈变方形背景动画效果代码

代码语言：html

所属分类：背景

代码描述：css实现圆圈变方形背景动画效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>
html:before,
html:after{
  content: "";
  position: fixed;
  inset: 0;
  animation: 4s infinite;
  animation-name: a,e1;
}
html:after {
  animation-name: a,e2,o;
}

@keyframes e1 {
  0%,50% {
    background-image:
      radial-gradient(20px at 20px 20px,#000 98%, #0000),
      radial-gradient(20px at 20px 20px,#000 98%, #0000);
    background-color: #fff;
  }
  50.1%,100% {
    background-image:
      radial-gradient(20px at 20px 20px,#fff 98%, #0000),
      radial-gradient(20px at 20px 20px,#fff 98%, #0000);
    background-color: #000;
  }
}
@keyframes e2 {
  0%,50% {
    background-image:
      conic-gradient(at 40px 40px,#0000 270deg,#000 0),
      conic-gradient(at 40px 40px,#0000 270deg,#000 0);
  }
  50.1%,100% {
    background-image:
      conic-gradient(at 40px 40px,#0000 270deg,#fff 0),
      conic-gradient(at 40px 40px,#0000 270deg,#fff 0);
  }
}

@keyframes a {
  0%,10% {
    background-position: 50% 50%, calc(50% - 40px) calc(50% - 40px);
    background-size: 80px 80px;
  }
  16.67% {
    background-position: 50% 50%, calc(50% - 60px.........完整代码请登录后点击上方下载按钮下载查看