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;
          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 {
    .........完整代码请登录后点击上方下载按钮下载查看