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

代码语言:html

所属分类:动画

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

代码标签: 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