css-doodle实现宇宙星体运转动画效果代码-html代码-BFW代码库

css-doodle实现宇宙星体运转动画效果代码

代码语言：html

所属分类：动画

代码描述：css-doodle实现宇宙星体运转动画效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        :root {
      --green: #53d9d1;
      --pink: #f27b9b;
      --orange: #eb7132;
    }
    
    html,
    body {
      width: 100vw;
      height: 100vh;
      margin: 0;
      padding: 0;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      background: radial-gradient(circle, #cf1446, #f3af8b, #26ada5);
    }
    </style>

</head>

<body>

    <style>
        css-doodle {
            --rule: ( :doodle {
                @grid: 50x1 / 100vmin;
                perspective: 90vmin;
              }
        
              background: @multi(@r(40, 20), (radial-gradient(@p(#53d9d1, #f27b9b, #eb7132) 15%, transparent 50%) @r(100%) @r(100%) / @r(1%, 3%, .1) @lr() no-repeat));
        
              @size: 120%;
              @place-cell: center;
        
              border-radius: 5.........完整代码请登录后点击上方下载按钮下载查看