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: i.........完整代码请登录后点击上方下载按钮下载查看