css实现立体折纸折叠进度条动画效果代码-html代码-BFW代码库

代码语言：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;
          touch-action: none;
        }
        
        :root {
          --rotation-y: 0;
          --rotation-x: 0;
        	--size: 80vmin;
        	--segment: calc(var(--size) / 100);
        	--loading-speed: 10s;
        	--color: hsl(210 80% 50%);
        	--segments-per-second: calc(var(--loading-speed) / var(--total-length));
        }
        
        body {
          display: grid;
          place-items: center;
          min-height: 100vh;
          background: hsl(0 0% 90%);
          font-family:  'Google Sans', sans-serif, system-ui;
        }
        
        #flip:checked ~ .container {
        	--rotation-y: -24;
        	--rotation-x: -24;
        }
        
        [for] {
        	transform: translateZ(200vmin);
        	position: fixed;
        	inset: 0;
        }
        
        .sr-only {
          position: absolute;
          width: 1px;
          height: 1px;
          padding: 0;
          margin: -1px;
          overflow: hidden;
          clip: rect(0, 0, 0, 0);
          white-space: nowrap;
          border-width: 0;
        }
        
        .loading-label {
        	position: absolute;
        	left: 0;
        	bottom: 110%;
        	font-weight: bold;
        	font-size: clamp(1rem, var(--size) * 0.025, 6rem);
        }
        
        .container {
        	width: var(--size);
        	aspect-ratio: 16 / 1.25;
        	position: relative;
        }
        
        .scene {
        	height: 100%;
          width: 100%;
          transform: translate3d(0, 0, 100vmin) rotateX(calc(var(--rotation-y, 0) * 1deg)) rotateY(calc(var(--rotation-x, 0) * 1deg));
          transition: transform 0.25s;
        }
        
        h1 {
          opacity: 0.5;
          color: var(--color);
          font-size: calc(var(--depth, 20vmin) * 0.25);
          position: fixed;
          bottom: 1rem;
          right: 1rem;
          margin: 0;
        }
        
        .bar {
        	width: 100%;
        	height: 100%;
        	display: grid;
        	grid-template-columns: var(--columns);
        }
        
        .bar__segment {
        	background: hsl(0 0% 100%);
        	transform: translateZ(calc(var(--depth) * var(--segment)));
        	border: calc(var(--segment) * 0.5) solid black;
        }
        
        .bar__segment:after {
        	content: "";
        	position: absolute;
        	inset: 0;
        	background: var(--color);
        	transform-origin: 0 50%;
        	/*animation: reveal calc(var(--length) * var(--segments-per-second)) calc(var(--delay) * var(--segments-per-second)) both linear;*/
        	-webkit-animation-name: var(--name);
        	        animation-name: var(--name);
        	-webkit-animation-duration: var(--loading-speed);
        	        animation-duration: var(--loading-speed);
        	-webkit-animation-fill-mode: both;
        	        animation-fill-mode: both;
        	-webkit-animation-timing-function: linear;
        	        animation-timing-function: linear;
        	-webkit-animation-iteration-count: infinite;
        	        animation-iteration-count: infinite;
        }
        
        @-webkit-keyframes reveal {
        	from {
        		transform: scaleX(0);
        	}
        }
        
        @keyframes reveal {
        	from {
        		transform: scaleX(0);
        	}
        }
        
        .bar__segment:not(:first-of-type, :last-of-type) {
        	border-left: transparent;
        	border-right: transparent;
        }
        
        .bar__segment:first-of-type {
        	border-right: transparent;
        }
        .bar__segment:last-of-type {
        	border-left: transparent;
        }
        
        .bar__segment:not(.bar__segment--aligned) {
        	width: calc(var(--segment) * var(--length));
        	transform-origin: 0 50%;
        	filter: brightness(0.78);
        	transform: translateZ(calc(var(--depth) * var(--segment))) rotateY(var(--rotation, 0deg));
        }
        
        .bar__segment--front {
        	--rotation: -90deg;
        }
        
        .bar__segment--back {
        	--rotation: 90deg;
        }
        
        /* Perhaps it makes more sense for each segment to have its own keyframe */
        /* We know how each keyframes work... */
        /**
        * 1. Start at 0% plus delay% with scaleX(0). We can normalize the keyframes by dividing 100 / 400 to get a keyframe step.
        * 2. Then by the length%, 100% scaleX(1). 
        * 3. That's it. Then we don't need delays. Set the animation-name and forget.
        * */
        /* Keyframes Step = 100 / 400 = 0.25 */
        /**
        * Step: 100 / 400 = 0.25% ;
        * Start: --delay * step || previous ending frame;
        * End: (--delay + --length) * step || The next --delay * step;
        * */
        @-webkit-keyframes segment-1 {
          0% {
            transform: scaleX(0);
          }
          5%, 100% {
            transform: scaleX(1);
          }
        
        }
        @keyframes segment-1 {
          0% {
            transform: scaleX(0);
          }
          5%, 100% {
            transform: scaleX(1);
          }
        
        }
        @-webkit-keyframes segment-2 {
          0%, 5% {
            transform: scaleX(0);
          }
          12.5%, 100% {
            transform: scaleX(1);
          }
        }
        @keyframes segment-2 {
          0%, 5% {
            transform: scaleX(0);
          }
          12.5%, 100% {
            transform: scaleX(1);
          }
        }
        @-webkit-keyframes segment-3 {
          0%, 12.5% {
            transform: scaleX(0);
          }
          15%, 100% {
            transform: scaleX(1);
          }
        }
        @keyframes segment-3 {
          0%, 12.5% {
            transform: scaleX(0);
          }
          15%, 100% {
            transform: scaleX(1);
          }
        }
        @-webkit-keyframes segment-4 {
          0%, 15% {
            transform: scaleX(0);
          }
          27.5%, 100% {
            transform: scaleX(1);
          }
        }
        @keyframes segment-4 {
          0%, 15% {
            transform: scaleX(0);
          }
          27.5%, 100% {
            transform: scaleX(1);
          }
        }
        @-webkit-keyframes segment-5 {
          0%, 27.5% {
            transform: scaleX(0);
          }
          30%, 100% {
.........完整代码请登录后点击上方下载按钮下载查看