div+css模拟海滩上海水潮起潮落动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：div+css模拟海滩上海水潮起潮落动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  

<style>
body {
  display: flex;
  width: 100%;
  height: 100vh;
  margin: 0;
}

.beach {
  position: relative;
  display: flex;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  background: linear-gradient(180deg, #78D6C6 0%, #F5FCCD 200%);
  overflow: hidden;
}
.beach:after {
  content: "";
  background: linear-gradient(40deg, rgba(120, 214, 198, 0) 0%, rgba(255, 255, 255, 0.5) 100%);
}
.beach__waves {
  position: absolute;
  z-index: 999;
  top: -50%;
  width: 100%;
  height: 200%;
  background-size: 10% 10%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180mm' height='180mm' fill='%23F3F2F1' style='opacity: 0.6;' viewBox='0 0 626 626'%3E%3Cpath d='M634.3,361.3h4c0,3.1-1.9,5.4-3,8-3.9,7.3-9,13.2-17,16.2a6.3,6.3,0,0,0-3.4,2.8c-.9.6-2,1-2.5,2.2-3.8,4.7-4.2,8.5-1.4,12.1,6.4,8.4,26.1,9.1,33,1A50.3,50.3,0,0,1,661.1,391l6.3-2.5,9.9-2.8c5.2-1.6,10.8-1.7,15.4-5a8,8,0,0,0,3.6-2.2,26.5,26.5,0,0,0,10-17.2h6c3.7,3,9.8,3,12,0h14c.6,3.4,2.4,5.6,6,6v8a2,2,0,0,1-2.2-.8c-4-4.3-8.6-7.3-14.8-7.2s-11.9,1.9-17.1,5.3c-7.1,4.7-13,10.7-19.1,16.6-6.9,3.3-14.6,3.6-21.8,6-11.8.4-24,10.9-20.8,23.1,1.3,5.4,5,9.2,8.8,13,6.8,6.2,15.1,11,20.1,19,2.8,4.4,6.1,5,10.5,3.9l5.3-1.1a3.6,3.6,0,0,0,3.2-.6l2.9-.2,4,.9,10.8,4.1c5.1,2.1,9.6.8,13.4-2.6,7-6.2,10.5-14.1,9.1-23.6s0-16.3,7.7-21.8v8c-2.1,2.2-1.8,4.9-1.7,7.5s.7,6.7.6,10c-.1,10.1-4.2,17.9-13.5,22.6-2.1,1-4.8,1.6-4.4,4.5s3,4.8,6.1,5.1,8.6.2,12.9.3v5c-3.6-1.1-7.3-.8-11-.9a6.8,6.8,0,0,0-4.6-1.1c-3.3-3.2-7.5-4.7-11.6-6.3l-4.8-1.7h0l-1.1-.7-3.8-1.3a19.5,19.5,0,0,0-9.2-1.9c-10.4-1.2-19.3,1.6-26,9.9a11.4,11.4,0,0,0-3,6,1.9,1.9,0,0,0-.2.8l-.6,2.3c.3,8,6.1,13.2,16.9,15,1,1.1,2.3,1.1,3.6,1.1,7.7,3.8,13.4,9.2,16.8,17.5,2.1,5.3,7.1,5.8,12.1,2.7a24.7,24.7,0,0,0,8.1-8.6,37.7,37.7,0,0,1,13.4-13.8,2.8,2.8,0,0,0,2-1.8l3-1.2v3a2.9,2.9,0,0,0-2,1.9c-4.2,2.7-4.2,4.7,0,8.9a1.5,1.5,0,0,0,2,1.2v14c-1.7.3-1.7,1.8-2.2,3-3.2,8.9-8.6,16.1-17,20.9a13.6,13.6,0,0,0-5.8,3.1c-3.7,2.9-6.5,6.4-5.6,11.3s4.3,6.8,8.6,7.8c1.6.9,3.2,1.8,5.1,1.7,5.7,1.1,11.3-.1,16.9-.8v7c-6-1.4-8.8-.2-12.1,5.1a3.2,3.2,0,0,0-1.3,2.9,18.6,18.6,0,0,0-1.9,2.2,34.7,34.7,0,0,1-11.4,15.2c-6.5,5-6,15,.1,20.6a22.3,22.3,0,0,0,9.4,5.2c1.8,1.3,3.9.8,5.8,1.2l11.4,3.6v7a14,14,0,0,0-9.9-6.2l-6.2-1.6c-1.4-.5-3.1-.7-4.1-1.6-6.8-5.6-13.3-3.3-19.8.5l-4.2,2.5c-8.2,6-16.9,8.2-26.7,4.3-8.4-2.3-11.4-.5-12.2,7.1-.1,4.3,1.4,8,5.1,10.1,9.9,5.6,19.6,11.8,31.9,9.8l4.7.4a17.2,17.2,0,0,1,7.4,6.7c1.3,3.3-.2,8.5,3.9,9.5s10.2,2.9,15.3-.1c1.9-1,1.5-2.6,1.2-4.3-.6-5.2,1.5-9.4,5.4-12.6s5.4-3.6,8.2-5.5v6c-8,3.6-10.5,9.6-6.4,15.4,1.6,2.5,2.2,6.1,6.4,5.6v8l-8.9-6c-5-2.2-9.9-3.2-15.1-1-5.3.2-9.1,3.8-13.1,6.5-6.7,4.4-11.4,11-18.1,15.4l-5.7,2c-7.1,1-14.2,2.1-20.9,4.4-14.6,5-20.1,20.9-7.6,32.2,3.7,3.3,7.1,7,11.3,9.7a8,8,0,0,0,3.7,3.1c2.2,2.4,4.7,4.8,6.7,7.4,4.7,6.1,5.9,6.9,13.3,4.7a25.7,25.7,0,0,1,17.5,1.1l7,2.6c3.5,1.4,6.8,1.3,9.9-1a2.3,2.3,0,0,0,2-1.1c8.2-5.9,11.4-14,10.3-23.8s-.2-16.6,7.7-22.2v7c-2.6,4.6-1.8,9.4-1.3,14.2,1.4,11.9-3,21.2-12.6,26.6-2.1,1.1-5.3,1.7-4.6,5s3.6,5.2,7.1,5.1a72.2,72.2,0,0,1,11.4,1.1v3c-4,.7-8,0-12-.1a13.1,13.1,0,0,0-5.7-2.1h-.1l-1.1-.7c-3.3-2.5-7.1-3.9-10.8-5.4a39.4,39.4,0,0,0-9.4-3.5,36.2,36.2,0,0,0-17.6-.7c-7,1.5-13,5.1-16.8,11.5s-2.5,14.9,5.1,18.9c2.9,1.5,6.2,2.3,9.3,3.4l5.8,2.1a28,28,0,0,1,13.8,14.9c2.9,7.1,7.9,7.9,14,3.4a21.2,21.2,0,0,0,6.7-7.3c4.3-8,11.2-12.9,18.8-17.3v4c-4.5.7-6.3,2.8-4.1,7.2,1,1.9,1.5,4.3,4.1,4.8v12c-1.6.8-1.5,2.5-2,3.8-3.5,8.9-8.6,16.4-17.2,21-5.2,2.2-9.9,4.9-10.9,11.1h0a2.9,2.9,0,0,0-.1,4.2c.9,3.4,3.6,5.1,6.4,6.4,7.9,3.5,15.8,3.8,23.8.4v8c-2.4-.5-4.9-2-7.1.7-1.9.3-3.1,1.7-4.2,3.1-2.9,2.9-4.1,6.7-5.6,10.3s-3.7,7-7.3,9.1-7.6,7.9-6.9,13.8a14.4,14.4,0,0,0,10,12.3,2.8,2.8,0,0,0,2.6.8c5.7,3.3,12.2,3.8,18.5,4.9v8a14.1,14.1,0,0,0-8.2-5.9l-12.8-3.3-2-1.8c-4.7-3.2-9.2-1.7-13.7.4-6.9,3.2-13,8-20.2,10.8l-7.7-.4c-2.8-1.8-6.3-1.9-9.5-2.5-5.9-1.2-9.2,1.7-9.1,7.7,0,3.6,1,6.9,4.2,9,1.1.9,2,2.1,3.6,2.1,8.2,5.4,16.7,9.9,27,9,7.2-.6,12.6,2,15.2,9.1.3,1.3.6,2.7.8,4a11.........完整代码请登录后点击上方下载按钮下载查看