css+div实现随机泡泡冒泡动画效果代码-html代码-BFW代码库

css+div实现随机泡泡冒泡动画效果代码

代码语言：html

所属分类：动画

代码描述：css+div实现随机泡泡冒泡动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        html {
          font-family: system-ui;
          display: grid;
          place-items: center;
          min-height: 100vh;
          text-align: center;
          overflow: hidden;
          background: #222;
        }
        div:not(.blob) {
          box-sizing: border-box;
          padding: 10rem;
          background: rgba(255,255,255,.01);
          backdrop-filter: blur(15px);
          border-radius: 50%;
          user-select: none;
          color: white;
        }
        
        h1, p {
          margin: 0;
          text-transform: uppercase;
        }
        
        .blob{
          animation: blob 1s linear forwards;
        }
        @keyframes blob {
          0% { transform: scale(0); }
          100% { transform: scale(1); opacity: 0; }
        }
    </style>





</head>

<body>
    <div id="note">
        <p>Thank you</p>
        <h1>800</h1>
        <p>followers</p>
    </div>


    <script async>
        function addBlob() {
          var b = document.createElement('div.........完整代码请登录后点击上方下载按钮下载查看