css+svg实现黑白两条鱼儿水中游动画效果代码-html代码-BFW代码库

css+svg实现黑白两条鱼儿水中游动画效果代码

代码语言：html

所属分类：动画

代码描述：css+svg实现黑白两条鱼儿水中游动画效果代码

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

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

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

  
  
<style>
@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: true;
}
:root {
  --speed: 1.6;
  --filter: url(#blurFilter) drop-shadow(0 0 6vmin rgba(0, 0, 0, 0.2));
}

.head {
  width: 10vmin;
  height: 16vmin;
  background: var(--c);
  border-radius: 50% 50% 3vmin 3vmin;
  position: relative;
  display: grid;
  place-items: center;
  z-index: 1;
  -webkit-mask: radial-gradient(1.7vmin 2.4vmin at 25% 30%, transparent 1vmin, black 0.35vmin), radial-gradient(1.7vmin 2.4vmin at 75% 30%, transparent 1vmin, black 0.35vmin);
          mask: radial-gradient(1.7vmin 2.4vmin at 25% 30%, transparent 1vmin, black 0.35vmin), radial-gradient(1.7vmin 2.4vmin at 75% 30%, transparent 1vmin, black 0.35vmin);
  -webkit-mask-composite: source-in, xor;
          mask-composite: intersect;
  -webkit-animation: head calc(5s * var(--speed)) ease-in-out infinite;
          animation: head calc(5s * var(--speed)) ease-in-out infinite;
  --part-distance: 1vmin;
  --part-rotation: 6deg;
  --part-initial-rotation: 40deg;
  transform-origin: bottom;
}

.parts {
  display: flex;
  flex-direction: column;
  --part-distance: 1vmin;
}

@-webkit-keyframes head {
  from, to {
    translate: 0 0;
    rotate: var(--part-initial-rotation);
  }
  25%, 70% {
    translate: var(--part-distance) 0;
    rotate: calc(var(--part-rotation) + var(--part-initial-rotation));
  }
  50% {
    translate: calc(var(--part-.........完整代码请登录后点击上方下载按钮下载查看