css绘制情绪小球动画效果代码-html代码-BFW代码库

css绘制情绪小球动画效果代码

代码语言：html

所属分类：动画

代码描述：css绘制情绪小球动画效果代码

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

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

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

  
  
<style>
:root {
  --spheres: 25;
  --bg-color: #111;
  /* look ma, no houdini */
  --light-color: hsl(
    calc(-140 + var(--milliseconds, 0) / 200),
    80%,
    70%
  );
  --light-x: var(--cursor-x-1, 0);
  --light-y: var(--cursor-y-1, 0);
}

body {
  height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin: 0;
  background: var(--bg-color);
}

.sphere {
  --color: hsl(
    calc(140 + var(--milliseconds, 0) / 200 + var(--i) * 5),
    calc(40% + var(--i) * 1%),
    calc(15% + var(--i) * .5%)
  );
  --row: sqrt(var(--spheres));
  --cell: calc(.7 / var(--row));
  --size: calc(100vmin / var(--row) / (var(--i) / var(--spheres)));
  --x: calc(.2 + mod(var(--i), var(--row)) * var(--cell));
  --y: calc(.2 + (var(--i) / var(--row) - .5) * var(--cell));
  --distance-x: calc(var(--light-x) - var(--x));
  --distance-y: calc(var(--light-y) - var(--y));
  --distance: calc(sqrt(
    var(--distance-x) * var(--distance-x) +
    var(--distance-y) * var(--distance-y)
  ));
  --gradient-position:
    calc(50% + 50% * var(--distance-x))
    calc(50% + 50% * var(--distance-y));
  position: absolute;
  top: calc(var(--y) * 100%);
  left: calc(var(--x) * 100%);
  translate: -50% -50%;
  width: min(var(--size), 120vmin);
  height: min(var(--size), 120vmin);
  border-radius: 50%;
  background: radial-gradient(
    circle at var(--gradient-position),
    var(--light-color),
    var(--color) calc(50% + 50% * (1 - var(--distance)))
  );
  -webkit-animation: wiggle 3s ease-in-out infinite;
          animation: wiggle 3s ease-in-out infinite;
  -webkit-animation-delay: calc(
    var(--i) * -1s +
    mod(var(--i), var(--row)) * -.1s
  );
          animation-delay: calc(
    var(--i) * -1s +
    mod(var(--i), var(--row)) * -.1s
  );
  filter: blur(calc(2em - var(--i) * .1em));
  transform: translateZ(0);
}

@-webkit-keyframes wiggle {
  25% {
    translate: -30% -40%;
  }
  50% {
    translate: -27% -45%;
  }
  50% {
    translate: -55% -55%;
  }
  75% {
    translate: -60% -25%;
  }.........完整代码请登录后点击上方下载按钮下载查看