js+css实现可调参数的催眠动画效果代码-html代码-BFW代码库

js+css实现可调参数的催眠动画效果代码

代码语言：html

所属分类：动画

代码描述：js+css实现可调参数的催眠动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  

  
  
<style>
@import url(https://fonts.bunny.net/css?family=jura:300,500);
@layer base, demo, controls;

@layer demo {
  @property --pos{
		syntax: "<length>";
		inherits: false;
		initial-value: 0px;
	}
	body{
		overflow: hidden;
	}
  .wrapper{
    --ani-duration: 10s;
    --ani-delay-factor: 150ms;
    --ani-delay: calc(sibling-index() * var(--ani-delay-factor) * -1);
    --size: 30vw;
    --scale-factor: 2;
    --border-radius: 20px;
    --corner-shape: scoop;
    --color-1: dodgerblue;
    --color-2: rgb(124, 207, 0);
    --color-3: hotpink;
    
	
    display: grid;
    gap: 2rem;
		
    & > div{
      grid-area: 1/1;
      width: var(--size);
      aspect-ratio: 1;
      background: conic-gradient(at var(--pos),var(--color-1), var(--color-2),var(--color-3), var(--color-1));
      border: 1px solid rgb(255 255 255 / 1);
      border-radius:var(--border-radius);
      corner-shape: var(--corner-shape);
      opacity: calc(1 - (sibling-index() / sibling-count()) * 0.8);
      scale: calc(1 + (sibling-index() / sibling-count()) * var(--scale-factor));
      animation: --rotate-shape var(--ani-duration) linear infinite var(--ani-delay);
      transition: all 300ms ease-in-out;
    }
  }
  @keyframes --rotate-shape{
    50%{
      --pos: 120px;
      opacity: 0;
      border-radius:60px;
    }
    100%{
      rotate:1turn;
    }
  }
}

@layer controls{
  .controls-panel {
		position: absolute;
		top: 1rem;
		right: 1rem;

		background: rgba(78 170 246 / 0.5);
.........完整代码请登录后点击上方下载按钮下载查看