单个div+css实现水面漂浮的漂流瓶动画效果代码-html代码-BFW代码库

单个div+css实现水面漂浮的漂流瓶动画效果代码

代码语言：html

所属分类：动画

代码描述：采用单个div结合css代码实现一个水面上下沉浮的漂流瓶动画效果代码。

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        body {
          margin:0;
          height:100vh;
          display:grid;
          background:#b5f8fd;
        }
        
        .float {
          width:100%;
          display:grid;
          position:relative;
          margin:auto 0 0;
          height:200px;
          background:
            radial-gradient(circle 44px at top,#0000 94%,#5dc1e4) 0 40px,
            radial-gradient(circle 44px at top,#0000 94%,#008cd9) 0 0   ;
          background-size:80px 100%;
          background-repeat: repeat-x;
          animation:a 1s infinite linear;
        }
        
        .float:before {
          content:"";
          width:100%;
          z-index:1;
          background:
            radial-gradient(circle 44px at top,#0000 94%,#b0e5f3) 0 70px;
          background-size:80px 100%;
          background-repeat: repeat-x;
          animation:b 1s infinite linear;
        }
        
        .float:after {
           content: "";
           position: absolute;
           width: 70px;
           height: 150px;
           background: 
             linear-gradient(#f0caa3 0 0) bottom/16% 67%,
             linear-gradient(#33b54d 0 0) 50% 50%/54% 12%,
             radial-gradient(farthest-side at bottom left,#33b5.........完整代码请登录后点击上方下载按钮下载查看