css实现cd光盘转动loading加载动画效果代码-html代码-BFW代码库

css实现cd光盘转动loading加载动画效果代码

代码语言：html

代码描述：css实现cd光盘转动loading加载动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        * {
          margin: 0;
          padding: 0;
        }
        
        * *::before,
        *::after {
          box-sizing: border-box;
        }
        
        body {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100vw;
          height: 100vh;
          background: radial-gradient(black, #262626);
        }
        
        .remix {
          --diameter: 200px;
          --c-white: #fff;
          /* naming things is hard */
          /* https://www.color-name.com */
          --c-anti-flash-white: #f3f3f3;
          --c-gainsboro: #ddd;
          --c-mid-gray: #bbb;
          --c-dark-gray: #aaa;
          --c-granite-gray: #666;
          --c-light-periwinkle: #c0c8e3;
          --c-platinum: #e8d4e9;
          --c-violet-100: #d9ccee;
          --c-pink-lavender: #d7b0c5;
          --c-languid-lavender: #cec0e3;
          --c-violet-150: #ccbccd;
          --c-black-shadows: #c6b1bc;
          --c-stale-beige: #eef6d3;
          --c-light-moss-green: #a7dda7;
          flex: 0 0 auto;
          position: relative;
          width: var(--diameter);
          height: var(--diameter);
          border-radius: 9999px;
          border: 5px solid var(--c-gainsboro);
          bacground-color: var(--c-mid-gray);
          background-image: conic-gradient(var(--c-white), var(--c-anti-flash-white), var(--c-gainsboro), var(--c-mid-gray), var(--c-dark-gray), var(--c-black-shadows), var(--c-pink-lavender), var(--c-white), var(--c-stale-beige), var(--c-light-moss-green), var(--c-languid-lavender), var(--c-platinum), var(--c-pink-lavender), var(--c-gainsboro), var(--c-anti-flash-white), var(--c-white), var(--c-gainsboro), var(--c-mid-gray), var(--c-dark-gray), var(--c-black-shadows), var(--c-pink-lavender), var(--c-white), var(--c-stale-beige), var(--c-light-moss-green), var(--c-light-periwinkle), var(--c-languid-lavender), var(--c-platinum), var(--c-pink-lavender), var(--c-mid-gray), var(--c-gainsboro), var(--c-white));
          -webkit-clip-path: url(#cd-clip-path);
                  clip-path: url(#cd-clip-path);
          -webkit-animation-name: spin;
                  a.........完整代码请登录后点击上方下载按钮下载查看