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.6,11.6,0,0,1,.4,1.8h-6c-.1-2.3.7-4.8-.9-7.1-3.5-5-8.7-4.5-13.5-3.8-6.9,1.1-12.7-1-18.4-4.5-2.4-1.4-4.5-3.4-7.3-4.1a7.9,7.9,0,0,0-4.9-2.4,8.5,8.5,0,0,1-4-8.1c.1-2,.3-4,.2-5.9s-.6-4.3-2.8-4.8-3.7,1.3-4.5,3.2c-2.2,5.7-6.2,9.4-11.8,12-3.8,1.7-4.4,5.1-1.9,8.7s3.5,4.1,4,6.8l-1.2,10h-4c-.1-3.4,4.1-7.4.6-10s-6.6,1.4-9.7,3-9.2,2.6-11.9,7h-17c0-9.5-5.5-15.5-13.2-20-3.7-2.1-7.9-3.2-11.9-1.5a53.7,53.7,0,0,1-20.9,3.7,35.7,35.7,0,0,0-11.2,1.6c-10.3,1.9-14.8,8.1-11.8,16.2h-6c-.7-6.8.6-12.9,6.9-16.9l4.1-2.8c4.6-2.6,5.6-6.6,4.8-11.5-1.7-10.6-4.8-13.5-16.6-16l-6-1.9c-7.7-5.3-13.5-4.8-22.6,2.1-1.6.9-3.5,1.4-4.6,3-6.8,3.3-13.6,5.8-21.1,2.5a14.7,14.7,0,0,0-2.9-.5c-2.7-.6-5.3-2-8,0-5,2.2-4.4,6.5-3.4,10.4s5.6,7.9,10.3,9.8l7,2.9c4.6,3.6,9.9,4,15.5,4,12.5-.2,15.8,2.7,17.6,14.9h-5c-1-9.3-3.7-11.6-13.1-11.1a25.8,25.8,0,0,0-3.9.4c-6.7.5-12.4-1.9-17.9-5.3a11.8,11.8,0,0,0-3.2-2.3c-8-3.2-14.1-7.4-11.4-17.6.4-1.6-.3-4.3-2.7-4.9s-3.9,1.5-4.5,3.2c-2.2,6.1-6.6,9.7-12.2,12.4-3.2,1.5-4.6,4.6-2.1,7.3,5.2,5.5,5.2,11.4,3,17.9h-4c.5-1.5,1.1-3.1,1.5-4.7s1.3-3.6-.3-5.1-3.5-.7-5.1.1-5.5,3.1-8.3,4.6-6.3,1.1-6.8,5.1h-19c.2-11.8-11.2-23.4-22.3-22-4.7.6-9.2,2.7-13.7,4l-7.1.2a44.4,44.4,0,0,0-16.6,2.1c-3.6,1.1-7.4,2.4-8.4,6.8-1.8,2.8-2.6,5.8-.9,8.9h-6c0-2.6.1-5.3.1-7.9s1.9-3.4,2.8-5.1c2.4-2.9,5.6-4.6,8.6-6.7s3.7-2.7,4.4-5.1c2.7-8.2-3.2-19.1-11.4-21.3-5-1.3-10-2.3-14.5-5h0c-.3-1-1.2-1-2.1-1a5.7,5.7,0,0,0-5.9-.1c-6.2.8-10.9,4.7-16,7.7s-9.9,5.4-15.9,4.2l-6.2-1.6-2.9-.7c-8.2-1.7-12.5,3.1-10.1,11.1.9,2.8,2.4,5.2,5.1,6.5l4.1,2.7c9,4.3,17.8,8.4,28.3,7.5,6.5-.6,10.6,3.6,12.3,10,.4,1.6.1,3.4,1.3,4.7h-6c-.2-8.7-3.1-12.2-11.8-11s-17.5-1.4-25-6.8a11.3,11.3,0,0,0-3.2-1.3,5.3,5.3,0,0,0-4.6-1.9c-5-3.2-4.9-8.1-4.4-13.2.3-2.6.1-5.9-3-6.5s-3.9,2.4-4.9,4.6l-.3,1c-1.9,3.4-4.2,6.4-8,7.9-6.8,3.4-8.4,6.1-4.9,10.2s4.4,11,2.1,17h-4a45.4,45.4,0,0,0,2.3-6.5c.7-3-1-5-3.8-3.8-6.7,3-13.8,5.4-19.5,10.3h-16c-.6-12.7-11.7-22.8-24-21.9a5.1,5.1,0,0,0-4,1.9,158.3,158.3,0,0,1-20.6,2.3c-4.5.3-9.2.6-13.4,2.7v-7c3.9-3.9,3.9-9.6,0-16v-9c5.9,4.1,6.3,10.1,5.8,16.4-.8,8.9,2,11.4,10.8,9.8,1.3-.3,2.6-.5,3.9-.9,5.2-1.7,7.5-5.2,6.7-10.6-.5-3.2-1.4-6.4-2.1-9.7s1.3-4.4,2-6.6,1.9-2.7,2.7-4.1c5.1-9,3.7-15-4.9-20.9a75.7,75.7,0,0,0-6.7-4.2,20.3,20.3,0,0,1-9.4-10.6c-1.9-5.1-4.3-10-8.8-13.6v-10c1.3.6,2.2-.2,3-1.1,6.6-8.3,15.5-13,25.2-16.6l7.9-2.1c4.5-1.1,9.1-2,13.5-3.5,9.6-3.5,14.8-11.1,16.5-20.8s-2.8-13-11-11.6c-9.9,1.7-17.5-1.9-25.7-6.6s-14.8-7.7-11.8-18.5a4,4,0,0,0-3.1-4.6c-2-.4-3.2,1.5-4.1,3.1s-3.1,5.4-4.6,8.2l-5.8,3.1v-6c4,.5,4.5-2.6,4.9-5.3s-.6-6.8-4.9-7.7v-4l2.9,1.2,6.2,2.7c3.9,1.2,7.2-.6,10.3-2.5s7.4-2.1,11.2.1,6.9,4.1,10.9,4.7c5.8.8,8.2-1.2,8.6-7.3l.8-2.9c.6-6.2-1.5-11.5-5.5-16.1-1.9-2.3-4-4.4-5.9-6.7-4.7-5.4-5-9.2-1.4-15.4,1.4-2.2,3.5-4.1,3.9-6.8l1.1-2.5c3.9-5.3,3.5-11.2,2.4-17.2-.7-3.7-3.4-5.3-7.3-5.4-8.8-.1-15.8,4.1-22.5,9.1a7.6,7.........完整代码请登录后点击上方下载按钮下载查看