css布局实现两只带阴影的鱼游动动画效果代码-html代码-BFW代码库

css布局实现两只带阴影的鱼游动动画效果代码

代码语言：html

所属分类：动画

代码描述：css布局实现两只带阴影的鱼游动动画效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
<style>
:root {
  --coilSize: 14px;
  --delayCount: 40ms;
  --scaleMe: 1;

  --scaleFlip: 1;
  --posFlip: 0;
}
body,
.seaLevel {
  font-family: "Open Sans", sans-serif;
  background-color: lightblue;
  overflow: hidden;
}
.fish {
  position: absolute;
  top: -35%;
  left: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(
    calc(var(--coilSize) * 4) calc(var(--coilSize) / 3) 5px rgba(0, 0, 0, 0.3)
  );
}
.fish .koiCoil {
  position: absolute;
  width: var(--coilSize);
  height: var(--coilSize);
  background-color: orangered;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  margin-left: calc(var(--coilSize) / -2);
  margin-top: calc(var(--coilSize) / -2);
  transform: scale(var(--scaleMe), var(--scaleMe));
 .........完整代码请登录后点击上方下载按钮下载查看