gsap实现页面加载数字进度动画效果代码-html代码-BFW代码库

gsap实现页面加载数字进度动画效果代码

代码语言：html

代码描述：gsap实现页面加载数字进度动画效果代码，100%后显示页面。

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  
  
  
<style>
:root {
  /* --color-pink: #d88c9a; */
  --color-dark: #353535;
  --bg-color: #e0e5ec;
  --hover-color: #ebeff6;
  --light-shadow: rgba(255,255,255,0.6);
  --dark-shadow: #a3b1c6;
  --default-padding: clamp(1rem, 2vw, 3rem);
  --default-shadow: 9px 9px 16px 0px var(--dark-shadow), -9px -9px 16px 0px var(--light-shadow);
}


* {
	box-sizing: border-box;
	margin: 0;
	font-family: sans-serif;
}

/* LOADING OVERLAY */
.loading-overlay {
  --percentage: '0%';
  background: var(--color-dark);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 11;
}

.loading-overlay::before {
  content: var(--percentage);
  
  position: absolute;
  right: var(--default-padding);
  bottom: var(--default-padding);
  color: var(--bg-co.........完整代码请登录后点击上方下载按钮下载查看