css实现斑点动画效果代码

代码语言:html

所属分类:动画

代码描述:css实现斑点动画效果代码

代码标签: css 斑点 动画

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        *,
        *::before,
        *::after {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
        }
        
        body {
         background-image: linear-gradient(to bottom, #1e272e, #130f40);
          background-repeat: no-repeat;
          height: 100vh;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
        }
        
        .blob {
          background: radial-gradient(circle at center, #fdc830 0, #ad5389, #3c1053 100%);
          position: absolute;
          width: 250px;
          height: 250px;
          border-radius: 34% 66% 44% 56% / 37% 61% 39% 63%;
          transition: all 1s ease-out;
          box-shadow: inset 10px 0 40px #3f2b96;
          animation: spin 5s ease-in-out infinite both alternate;
        }
        
        
        
        /* ANIMATIONS */
        
        @keyframes spin {
          0% {
           border-radius: 30% 7.........完整代码请登录后点击上方下载按钮下载查看

网友评论0