css实现卡通海面波浪波动小船上水手动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css实现卡通海面波浪波动小船上水手动画效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
body {
  margin: 0;
  background-color: #b8ecfd;
}
.container {
  position: relative;
  background: #6ab8f9;
}
.container #sky {
  height: 62.5vh;
  width: 100%;
  margin: 0;
  padding: 0;
}
.container #sky .cloud {
  margin: auto;
  position: absolute;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  right: 750px;
  bottom: 150px;
  height: 125px;
  width: 125px;
  border-radius: 50%;
  background-color: white;
  opacity: 0.6;
}
.container #sky .cloud:nth-of-type(2) {
  bottom: 250px;
  left: 1150px;
}
.container #sky .cloud::before {
  content: "";
  position: absolute;
  left: 80px;
  top: 40px;
  height: 85px;
  width: 85px;
  border-radius: 50%;
  background-color: white;
}
.container #sky .cloud::after {
  content: "";
  position: absolute;
  left: -40px;
  top: 35px;
  height: 85px;
  width: 85px;
  border-radius: 50%;
  background-color: white;
}
.container #ocean #boat-container {
  animation: boatsway 3s ease-in-out infinite alternate;
}
@keyframes boatsway {
  from {
    transform: rotate(-5.5deg);
  }
  to {
    transform: rotate(5.5deg);
  }
}
.container #ocean #boat-container #boat {
  margin: auto;
  position: absolute;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  top: 45px;
  width: 400px;
  height: 100px;
  background-color: #225cee;
  border-bottom-right-radius: 5rem;
  border-bottom-left-radius: 5rem;
  z-index: 3;
  transform-style: preserve-3d;
}
.container #ocean #boat-container #boat::before {
  content: "";
  position: absolute;
  height: 125px;
  width: 125px;
  left: 225px;
  bottom: 0px;
  border-top-left-radius: 4rem;
  border-bottom-right-radius: 5rem;
  background-color: #225cee;
  z-index: 3;
}
.container #ocean #boat-container #boat::after {
  content: "";
  position: absolute;
  height: 100px;
  width: 100px;
  left: 222.5px;
  bottom: 45px;
  border-radius: 4rem;
  background-color: #fadd5f;
  transform: translateZ(-1px);
}
.container #ocean #boat-container #boat #shadow-right {
  margin: auto;
  position: absolute;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  left: 200px;
  height: 100px;
  width: 100px;
  height: 125px;
  width: 125px;
  left: 275px;
  bottom: 25px;
  border-top-left-radius: 4rem;
  border-bottom-right-radius: 5rem;
  background-color: #063ad4;
  z-index: 2;
}
.container #ocean #boat-container #boat #rim-left {
  margin: auto;
  position: absolute;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  width: 260px;
  height: 22.5px;
  background-color: #fadd5f;
  border-radius: 5rem;
  left: -180px;
  bottom: 115px;
  z-index: 3;
}
.container #ocean #boat-container #boat #rim-right {
  margin: auto;
  position: absolute;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  width: 155px;
  height: 20px;
  background-color: #fadd5f;
  border-radius: 5rem;
  right: -290px;
  bottom: 170px;
  z-index: 5;
}
.container #ocean #boat-container #boat #rim-right::before {
  content: "";
  position: absolute;
  width: 55px;
  right: 0px;
  height: 20px;
  background-color: #f5b748;
  border-radius: 5rem;
}
.container #ocean #boat-container #boat #rim-right::after {
  content: "";
  position: absolute;
  width: 55px;
  right: 40px;
  height: 20px;
  background-color: #fadd5f;
  border-radius: 5rem;
}
.container #ocean #boat-container #boat #luggage-right {
  margin: auto;
  position: absolute;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 180px;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  width: 90px;
  height: 50px;
  left: 295px;
  opacity: 0.7;
  background-color: #b8ecfd;
}
.container #ocean #boat-container #boat #luggage-right::before {
  content: "";
  position: absolute;
  bottom: 40px;
  left: 20px;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  height: 27.5px;
  width: 50px;
  background-color: #b8ecfd;
}
.container #ocean #boat-container #boat #luggage-right::after {
  content: "";
  position: absolute;
  bottom: 50px;
  left: 30.5px;
  height: 7.5px;
  width: 30px;
  background-color: #6ab8f9;
}
.container #ocean #boat-container #boat #luggage-right-shadow {
  margin: auto;
  position: absolute;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 180px;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  width: 50px;
  height: 50px;
  left: 257.5px;
  opacity: 0.7;
  background-color: white;
}
.container #ocean #boat-container #boat #luggage-left {
  margin: auto;
  position: absolute;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  left: -380px;
  bottom: 143px;
  width: 110px;
  height: 70px;
  border-radius: 1rem;
  background-color: #b8ecfd;
  opaciy: 0.7;
  transform: translateZ(-1px);
}
.container #ocean #boat-container #boat #luggage-left::before {
  content: "";
  position: absolute;
  left: -20px;
  width: 80px;
  height: 57.5px;
  background-color: white;
  border-radius: 1rem;
}
.container #ocean #boat-container #boat #luggage-left::after {
  content: "";
  position: absolute;
  top: 12.5px;
  left: -2.5px;
  width: 37.5px;
  height: 12.5px;
  background-color: #fadd5f;
  border-radius: 1rem;
}
.container #ocean #boat-container #sailor {
  margin: auto;
  position: absolute;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  top: -165px;
  height: 110px;
.........完整代码请登录后点击上方下载按钮下载查看