div+css实现鱼儿在文字中游动动画效果代码-html代码-BFW代码库

div+css实现鱼儿在文字中游动动画效果代码

代码语言：html

所属分类：动画

代码描述：div+css实现鱼儿在文字中游动动画效果代码

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

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

<head>

  <meta charset="UTF-8">


  
  
  
<style>
* {
  box-sizing: border-box;
}
body {
  background: #006d77;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container {
  background: #023047;
  height: 400px;
  width: 300px;
  position: relative;
  overflow: hidden;
}
.container::before {
  content: '';
  background: #006d77;
  height: 190px;
  width: 500px;
  top: 260px;
  left: 120px;
  position: absolute;
  border-radius: 50px;
  z-index: 99;
}
.container::after {
content: '';
  background: #006d77;
  height: 60px;
  width: 500px;
  top: 110px;
  left: 120px;
  position: absolute;
border-radius: 50px;
  z-index: 99;
} 
.fish1 {
  position: relative;
  top: 4px;
  left: -40px;
  transform: scale(.7);
  animation: fish 21s infinite reverse linear;
}
.f1 {
   background: rgb(248,237,235);
background: linear-gradient(90deg, rgba(248,237,235,1) 0%, rgba(227,100,20,1) 30%, rgba(248,237,235,1) 60%, rgba(227,100,20,1) 90%); 
  height: 20px;
  width: 90px;
  overflow: hidden;
  border-radius: 50px;
  position: absolute;
  top: 20px;
}
.fin1 {
  position: absolute;
  border-radius: 100% 32% 100% 0%;
  background: transparent;
  border: 1px solid white;
  height: 20px;
  width: 20px;
  top: 8px;
  left: 30px;
}
.fin2 {
  position: relative;
  border-radius: 100% 32% 100% 0%;
  background: transparent;
  border: 1px solid white;
  height: 15px;
  width: 20px;
  left: 80px;
  top: 15px;
}
.fin2::after {
  content: '';
  position: absolute;
  border-radius: 100% 32% 100% 0%;
  background: transparent;
  border: 1px solid white;
  height: 14px;
  width: 19px;
  top: 12px;
  transform: rotate(45deg);
}
.e1 {
  position: relative;
  background: #e36414;
  border-radius: 100%;
  height: 9px;
  width: 9px;
  left: 8px;
  top: 5px;
}
.e1::after {
  content: '';
  position: absolute;
  background: #333;
  border-radius: 100%;
  height: 5px;
  width: 5px;
  left: 2.3px;
  top: 1.8px;
}
.nose {
  position: absolute;
  border-radius: 100%;
  background: #333;
  height: 3px;
  width: 3px;
  left: 2px;
}
.fish2 {
  position: relative;
  top: 30px;
  left: -60px;
  transform: scale(.6);
  animation: fish 35s infinite reverse linear;
}
.f2 {
   background: rgb(248,237,235);
background: linear-gradient(180deg, rgba(248,237,235,1) 0%, rgba(237,.........完整代码请登录后点击上方下载按钮下载查看