css布局实现海底多角鱼冒泡游动动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css布局实现海底多角鱼冒泡游动动画效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
    body {
  background: #1E5799;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 600px;
}

div {
  position: absolute;
  transform-style: preserve-3d;
}

.camera {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.camera.-x {
  transform: rotateX(-30deg);
}
.camera.-y {
  trannsform: rotateY(0deg);
}
.under-sea {
  transform: scale3d(0.4, 0.4, 0.4);
}

.blowing-bubbles .bubble:nth-child(1) {
  left: 23px;
  width: 23px;
  height: 23px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 6106ms -9153ms linear infinite;
          animation: bubbles 6106ms -9153ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(2) {
  left: -32px;
  width: 28px;
  height: 28px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 3585ms -5017ms linear infinite;
          animation: bubbles 3585ms -5017ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(3) {
  left: 33px;
  width: 21px;
  height: 21px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 6279ms -4582ms linear infinite;
          animation: bubbles 6279ms -4582ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(4) {
  left: -14px;
  width: 27px;
  height: 27px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 4375ms -9344ms linear infinite;
          animation: bubbles 4375ms -9344ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(5) {
  left: 8px;
  width: 27px;
  height: 27px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 6762ms -3430ms linear infinite;
          animation: bubbles 6762ms -3430ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(6) {
  left: 24px;
  width: 29px;
  height: 29px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 4253ms -9852ms linear infinite;
          animation: bubbles 4253ms -9852ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(7) {
  left: 16px;
  width: 16px;
  height: 16px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 3472ms -5024ms linear infinite;
          animation: bubbles 3472ms -5024ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(8) {
  left: -24px;
  width: 18px;
  height: 18px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 3302ms -1137ms linear infinite;
          animation: bubbles 3302ms -1137ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(9) {
  left: -27px;
  width: 30px;
  height: 30px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 4209ms -7643ms linear infinite;
          animation: bubbles 4209ms -7643ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(10) {
  left: -4px;
  width: 20px;
  height: 20px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 3431ms -9707ms linear infinite;
          animation: bubbles 3431ms -9707ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(11) {
  left: 11px;
  width: 25px;
  height: 25px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 4729ms -179ms linear infinite;
          animation: bubbles 4729ms -179ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(12) {
  left: 24px;
  width: 27px;
  height: 27px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 4306ms -716ms linear infinite;
          animation: bubbles 4306ms -716ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(13) {
  left: 17px;
  width: 17px;
  height: 17px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 6193ms -7397ms linear infinite;
          animation: bubbles 6193ms -7397ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(14) {
  left: -8px;
  width: 20px;
  height: 20px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 6044ms -3339ms linear infinite;
          animation: bubbles 6044ms -3339ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(15) {
  left: -6px;
  width: 29px;
  height: 29px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 5819ms -4415ms linear infinite;
          animation: bubbles 5819ms -4415ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(16) {
  left: -35px;
  width: 23px;
  height: 23px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 5598ms -3060ms linear infinite;
          animation: bubbles 5598ms -3060ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(17) {
  left: 30px;
  width: 21px;
  height: 21px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 6680ms -6411ms linear infinite;
          animation: bubbles 6680ms -6411ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(18) {
  left: -4px;
  width: 29px;
  height: 29px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 3154ms -6067ms linear infinite;
          animation: bubbles 3154ms -6067ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(19) {
  left: 5px;
  width: 19px;
  height: 19px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 4808ms -5375ms linear infinite;
          animation: bubbles 4808ms -5375ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(20) {
  left: -3px;
  width: 16px;
  height: 16px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 5959ms -2904ms linear infinite;
          animation: bubbles 5959ms -2904ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(21) {
  left: 38px;
  width: 23px;
  height: 23px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 5140ms -794ms linear infinite;
          animation: bubbles 5140ms -794ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(22) {
  left: 5px;
  width: 11px;
  height: 11px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 5262ms -2023ms linear infinite;
          animation: bubbles 5262ms -2023ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(23) {
  left: 31px;
  width: 23px;
  height: 23px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 5425ms -2679ms linear infinite;
          animation: bubbles 5425ms -2679ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(24) {
  left: -17px;
  width: 21px;
  height: 21px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 6301ms -3939ms linear infinite;
          animation.........完整代码请登录后点击上方下载按钮下载查看