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

代码语言:html

所属分类:动画

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

代码标签: 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: absolute;
          top: 50%;
          left: 50%;
          border: var(--border-width) solid var(--ring-shadow);
          border-radius: 50%;
          transform: translate(-50%, -50%) scale(0.8);
        }
        .container {
          transform: translate3d(0, 0, 100vmin) rotateX(-24deg) rotateY(35deg) rotateX(90deg) translate3d(0, 0, calc(var(--depth) * -1.5)) rotate(var(--rs));
          -webkit-animation: rotate-scene calc(var(--speed) * 10) infinite linear;
                  animation: rotate-scene calc(var(--speed) * 10) infinite linear;
        }
        .ring {
          --origin-z: calc(var(--stack-height) - (var(--stack-height) / var(--ring-count)) * var(--index));
          --hue: var(--hue-one);
          --accent: hsl(var(--hue) 90% 50%);
          --ring-filter: brightness(1) drop-shadow(0 0 0 var(--accent));
          height: var(--ring-size);
          width: var(--ring-size);
          border-radius: 50%;
          border: var(--border-width) solid var(--accent);
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate3d(-50%, -50%, var(--origin-z)) translate3d(var(--x), 0, var(--z)) rotateY(var(--r));
          transform-origin: 110% 50%;
          -webkit-animation-name: var(--name);
                  animation-name: var(--name);
          -webkit-animation-duration: var(--speed);
                  animation-duration: var(--speed);
          -webkit-animation-iteration-count: infinite;
                  animation-iteration-count: infinite;
          -webkit-animation-timing-function: cubic-bezier(0.25, 0, 1, 1);
                  animation-timing-function: cubic-bezier(0.25, 0, 1, 1);
          filter: var(--ring-filter);
        }
        .ring:nth-of-type(odd) {
          --hue: var(--hue-two);
        }
        @media (prefers-color-scheme: dark) {
          .ring {
            --ring-filter: brightness(2) drop-shadow(0 0 calc(var(--border-width) * 0.5) var(--accent));
          }
        }
        @-webkit-keyframes spring-0 {
          0%, 3.8461538461538463% {
            --z: 0;
            --x: 0%;
            --r: 0deg;
          }
          41.34615384615385% {
            --r: 180deg;
            --x: 5%;
            --z: 0;
          }
          53.84615384615385%, 100% {
            --z: calc((var(--depth) + var(--origin-z) - (var(--stack-height) - ((var(--stack-height) - (var(--stack-height) / var(--ring-count)) * (var(--index) + 1))))) * -1);
            --x: 5%;
            --r: 180deg;
          }
        }
        @keyframes spring-0 {
          0%, 3.8461538461538463% {
            --z: 0;
            --x: 0%;
            --r: 0deg;
          }
          41.34615384615385% {
            --r: 180deg;
            --x: 5%;
            --z: 0;
          }
          53.84615384615385%, 100% {
            --z: calc((var(--depth) + var(--origin-z) - (var(--stack-height) - ((var(--stack-height) - (var(--stack-height) / var(--ring-count)) * (var(--index) + 1))))) * -1);
            --x: 5%;
            --r: 180deg;
          }
        }
        @-webkit-keyframes spring-1 {
          0%, 7.6923076923076925% {
            --z: 0;
            --x: 0%;
            --r: 0deg;
          }
          45.19230769230769% {
            --r: 180deg;
            --x: 5%;
            --z: 0;
          }
          57.69230769230769%, 100% {
            --z: calc((var(--depth) + var(--origin-z) - (var(--stack-height) - ((var(--stack-height) - (var(--stack-height) / var(--ring-count)) * (var(--index) + 1))))) * -1);
            --x: 5%;
            --r: 180deg;
          }
        }
        @keyframes spring-1 {
          0%, 7.6923076923076925% {
            --z: 0;
            --x: 0%;
            --r: 0deg;
          }
          45.19230769230769% {
            --r: 180deg;
            --x: 5%;
            --z: 0;
          }
          57.69230769230769%, 100% {
            --z: calc((var(--depth) + var(--origin-z) - (var(--stack-height) - ((var(--stack-height) - (var(--stack-height) / var(--ring-count)) * (var(--index) + 1))))) * -1);
            --x: 5%;
            --r: 180deg;
          }
        }
        @-webkit-keyframes spring-2 {
          0%, 11.538461538461538% {
            --z: 0;
            --x: 0%;
            --r: 0deg;
          }
          49.03846153846154% {
            --r: 180deg;
            --x: 5%;
            --z: 0;
          }
          61.53846153846154%, 100% {
            --z: calc((var(--depth) + var(--origin-z) - (var(--stack-height) - ((var(--stack-height) - (var(--stack-height) / var(--ring-count)) * (var(--index) + 1))))) * -1);
            --x: 5%;
            --r: 180deg;
          }
        }
        @keyframes spring-2 {
          0%, 11.538461538461538% {
            --z: 0;
            --x: 0%;
            --r: 0deg;
          }
          49.03846153846154% {
            --r: 180deg;
            --x: 5%;
            --z: 0;
          }
          61.53846153846154%, 100% {
            --z: calc((var(--depth) + var(--origin-z) - (var(--stack-height) - ((var(--stack-height) - (var(--stack-height) / var(--ring-count)) * (var(--index) + 1))))) * -1);
            --x: 5%;
            --r: 180deg;
          }
        }
        @-webkit-keyframes spring-3 {
          0%, 15.384615384615385% {
            --z: 0;
            --x: 0%;
            --r: 0deg;
          }
          52.88461538461539% {
            --r: 180deg;
            --x: 5%;
            --z: 0;
          }
          65.38461538461539%, 100% {
            --z: calc((var(--depth) + var(--origin-z) - (var(--stack-height) - ((var(--stack-height) - (var(--stack-height) / var(--ring-count)) * (var(--index) + 1))))) * -1);
            --x: 5%;
            --r: 180deg;
          }
        }
        @keyframes spring-3 {
          0%, 15.384615384615385% {
            --z: 0;
            --x: 0%;
            --r: 0deg;
          }
          52.88461538461539% {
            --r: 180deg;
            --x: 5%;
            --z: 0;
          }
          65.38461538461539%, 100% {
            --z: calc((var(--depth) + var(--origin-z) - (var(--stack-height) - ((var(--stack-height) - (var(--stack-height) / var(--ring-count)) * (var(--index) + 1))))) * -1);
            --x: 5%;
            --r: 180deg;
          }
        }
        @-webkit-keyframes spring-4 {
          0%, 19.23076923076923% {
            --z: 0;
            --x: 0%;
            --r: 0deg;
          }
          56.730769230769226% {
            --r: 180deg;
            --x: 5%;
            --z: 0;
          }
          69.23076923076923%, 100% {
            --z: calc((var(--depth) + var(--origin-z) - (var(--stack-height) - ((var(--stack-height) - (var(--stack-height) / var(--ring-count)) * (var(--index) + 1))))) * -1);
            --x: 5%;
            --r: 180deg;
          }
        }
        @keyframes spring-4 {
          0%, 19.23076923076923% {
            --z: 0;
            --x: 0%;
            --r: 0deg;
          }
          56.730769230769226% {
            --r: 180deg;
            --x: 5%;
            --z: 0;
          }
          69.23076923076923%, 100% {
            --z: calc((var(--depth) + var(--origin-z) - (var(--stack-height) - ((var(--stack-height) - (var(--stack-height) / var(--ring-count)) * (var(--index) + 1))))) * -1);
            --x: 5%;
            --r: 180deg;
          }
        }
        @-webkit-keyframes spring-5 {
          0%, 23.076923076923077% {
            --z: 0;
            --x: 0%;
            --r: 0deg;
          }
          60.57692307692308% {
            --r: 180deg;
            --x: 5%;
            --z: 0;
          }
          73.07692307692308%, 100% {
            --z: calc((var(--depth) + var(--origin-z) - (var(--stack-height) - ((var(--stack-height) - (var(--stack-height) / var(--ring-count)) * (var(--index) + 1))))) * -1);
            --x: 5%;
            --r: 180deg;
          }
        }
        @keyframes spring-5 {
          0%, 23.076923076923077% {
            --z: 0;
            --x: 0%;
  .........完整代码请登录后点击上方下载按钮下载查看

网友评论0