纯css实现彩色圆点转圈圈动画效果代码-html代码-BFW代码库

纯css实现彩色圆点转圈圈动画效果代码

代码语言：html

所属分类：动画

代码描述：纯css实现彩色圆点转圈圈动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">






    <style>
        :root {
          --background: radial-gradient(
          	circle at center,
          	hsl(240, 100%, 2%),
          	hsl(240, 100%, 4%)
          );
          --color1: hsl(59, 84%, 42%);
          --color2: hsl(9, 88%, 42%);
          --color3: hsl(208, 100%, 50%);
          --rotate-duration: 1.2s;
          --outer-radius: 26em;
          --inner-radius: 4em;
          --dot-radius: 5em;
          --dot-blur: 5em;
          --outline-width: 0.2em;
          --outline-color: #ffff;
          --unit: 1vmin;
          --zoom: 90;
          --available-screen-min: 665;
          --px: calc(var(--zoom) * (var(--unit) / var(--available-screen-min)));
          font-size: calc(var(--px) * 10);
        }
        
        @-webkit-keyframes rotate {
          to {
            transform: translate(-50%, -50%) rotate(calc(360deg + var(--start) * 1deg)) translate(var(--inner-radius)) rotate(calc(-360deg - var(--start) * 1deg));
          }
        }
        
        @keyframes rotate {
          to {
            transform: translate(-50%, -50%) rotate(calc(360deg + var(--start) * 1deg)) translate(var(--inner-radius)) rotate(calc(-360deg - var(--start) * 1deg));
          }
        }
        body::before,
        body::after,
        html::after {
          content: "";
          position: absolute;
          left: 50%;
          top: 50%;
          width: var(--dot-radius);
          height: var(--dot-radius);
          border-radius: 50%;
          border: var(--outline-width) solid #fff0;
          transform: translate(-50%, -50%) rotate(calc(var(--start) * 1deg)) translate(var(--inner-radius)) rotate(calc(var(--start) * -1deg));
          outline: var(--outline-width) solid #0000;
          outline-offset: calc( 		var(--outer-radius) - (var(--dot-radius) * 0.5) - (var(--outline-width) * 0.5) 	);
          transition: ease 200ms 400ms;
          transition-property: outline, border-color;
          -webkit-animation: rotate linear var(--rotate-duration) infinite;
                  animation: rotate linear var(--rotate-duration) infinite;
          box-shadow: calc(var(--outer-radius) * 0.8090169944) calc(var(--outer-radius) * 0.5877852523) 0 0 var(--color, currentColor), calc(var(--outer-radius) * 0.3090169944) calc(var(--outer-radius) * 0.9510565163) 0 0 var(--color, currentColor), calc(var(--outer-radius) * -0.3090169944) calc(var(--outer-radius) * 0.9510565163) 0 0 var(--color, currentColor), calc(var(--outer-radius) * -0.8090169944) calc(var(--outer-radius) * 0.5877852523) 0 0 var(--color, currentColor), calc(var(--outer-radius) * -1) calc(var(--outer-radius) * 0) 0 0 var(--color, currentColor), calc(var(--outer-radius) * -0.8090169944) calc(var(--outer-radius) * -0.5877852523) 0 0 var(--color, currentColor), calc(var(--outer-radius) * -0.3090169944) calc(var(--outer-radius) * -0.9510565163) 0 0 var(--color, currentColor), calc(var(--outer-radius) * 0.3090169944) calc(var(--outer-radius) * -0.9510565163) 0 0 var(--color, currentColor), calc.........完整代码请登录后点击上方下载按钮下载查看