div+css实现两个磨砂圆点动画效果代码

代码语言:html

所属分类:动画

代码描述:div+css实现两个磨砂圆点动画效果代码

代码标签: div css 磨砂 圆点 动画

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        i {
          position: absolute;
          top: 50%;
          left: 50%;
          width: 40vmin;
          height: 40vmin;
          border-radius: 50%;
          transform: translate(-50%, -50%);
          -webkit-animation: move 10s forwards infinite;
                  animation: move 10s forwards infinite;
          background: linear-gradient(127deg, yellow 0%, orange 20%, red);
        }
        
        i:nth-child(2) {
          -webkit-animation-delay: -2s;
                  animation-delay: -2s;
          background: rgba(255, 255, 255, 0.3);
          box-shadow: 0 0 1rem rgba(255, 255, 255, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.1);
          -webkit-backdrop-filter: blur(30px);
                  backdrop-filter: blur(30p.........完整代码请登录后点击上方下载按钮下载查看

网友评论0