css布局鱼在水中游及轮船水草效果-html代码-BFW代码库

css布局鱼在水中游及轮船水草效果

代码语言：html

代码描述：css布局鱼在水中游及轮船水草效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
:root {
  --colorOne: gold;
  --colorTwo:orange;
  --colorThree: darkorange;
  --eyeColor:black;
  --eyeCircle:white;
}

#fun {
  color:white;
  font-family:monospace;
  padding:10px;
}
#box {
  position:absolute;
  top:100px;
  right:100px;
  bottom:100px;
  left:100px;
/*   outline:1px solid red; */
}

#fish {
  position:absolute;
  width:200px;
  height:200px;
  left:200px;
  top:200px;
  transform-origin:center center;
  transition:5s;
}

.flip {
  animation:flip .25s linear forwards;
}
@keyframes flip {
  0% { transform:scaleX(1); }
  100% { transform:scaleX(-1); }
}
.unFlip {
  animation:unflip .25s linear forwards;
}
@keyframes unflip {
  0% { transform:scaleX(-1); }
  100% { transform:scaleX(1); }
}

#body {
  width:200px;
  height:200px;
  background:radial-gradient(circl.........完整代码请登录后点击上方下载按钮下载查看