css实现弹力弹簧圈圈伸缩动画效果代码-html代码-BFW代码库

css实现弹力弹簧圈圈伸缩动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现弹力弹簧圈圈伸缩动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        *,
        *:after,
        *:before {
          box-sizing: border-box;
          transform-style: preserve-3d;
          transition: all 0.2s;
        }
        @property --x {
          syntax: '<length-percentage>';
          inherits: false;
          initial-value: 0%;
        }
        @property --sx {
          syntax: '<length-percentage>';
          inherits: false;
          initial-value: 0%;
        }
        @property --sz {
          syntax: '<length>';
          inherits: false;
          initial-value: 0;
        }
        @property --z {
          syntax: '<length>';
          inherits: true;
          initial-value: 0;
        }
        @property --r {
          syntax: '<angle>';
          inherits: false;
          initial-value: 0deg;
        }
        @property --rs {
          syntax: '<angle>';
          inherits: false;
          initial-value: 0deg;
        }
        @property --opacity {
          syntax: '<number>';
          inherits: false;
          initial-value: 0;
        }
        @property --speed {
          syntax: '<time>';
          inherits: true;
          initial-value: 1.75s;
        }
        :root {
          --border-width: 2vmin;
          --depth: 26vmin;
          --stack-height: 10vmin;
          --scene-size: 26vmin;
          --ring-size: calc(var(--scene-size) * 0.8);
          --plane: radial-gradient(rgba(0,0,0,0.1) 50%, transparent 65%);
          --ring-shadow: rgba(0,0,0,0.5);
          --hue-one: 210;
          --hue-two: 320;
          --blur: 6px;
          --bg: #fafafa;
          --ring-filter: brightness(1) drop-shadow(0 0 0 var(--accent));
        }
        @media (prefers-color-scheme: dark) {
          :root {
            --bg: #262626;
            --ring-shadow: hsla(var(--hue-one), 90%, 40%, 1);
            --plane: radial-gradient(hsla(var(--hue-one), 90%, 60%, 0.1) 50%, transparent 65%);
            --ring-filter: brightness(1.75) drop-shadow(0 0 1vmin var(--accent));
          }
        }
        body {
          background: var(--bg);
          min-height: 100vh;
          display: grid;
          place-items: center;
          overflow: hidden;
        }
        .scene {
          height: var(--scene-size);
          width: var(--scene-size);
          transform: translate3d(var(--sx), 0, var(--sz));
          -webkit-animation: step-down var(--speed) infinite linear;
                  animation: step-down var(--speed) infinite linear;
        }
        .scene__shadow {
          position: absolute;
          top: 0;
          left: 100%;
          height: 100%;
          width: 100%;
          opacity: var(--opacity);
          -webkit-animation: fade-in var(--speed) infinite linear;
                  animation: fade-in var(--speed) infinite linear;
          background: var(--plane);
          transform: scale(1.25);
          filter: blur(var(--blur));
        }
        .plane {
          height: 100%;
          width: 100%;
          transform: translate3d(0, 0, var(--depth));
          position: relative;
        }
        .plane__shadow {
          content: '';
          height: 100%;
          width: 100%;
          position: absolute;
          top: 50%;
          left: 50%;
          background: var(--plane);
          filter: blur(var(--blur));
          transform: translate(-50%, -50%) scale(1.25);
          opacity: var(--opacity);
          -webkit-animation: fade-out var(--speed) infinite linear;
                  animation: fade-out var(--speed) infinite linear;
        }
        .scene__shadow:after,
        .plane__shadow:after {
          content: '';
          height: var(--ring-size);
          width: var(--ring-size);
          position: a.........完整代码请登录后点击上方下载按钮下载查看