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

代码语言:html

所属分类:动画

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

代码标签: 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;
          .........完整代码请登录后点击上方下载按钮下载查看

网友评论0