js+css实现表情变化loading加载进度动画效果代码-html代码-BFW代码库

js+css实现表情变化loading加载进度动画效果代码

代码语言：html

代码描述：js+css实现表情变化loading加载进度动画效果代码

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

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

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

  
  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');

body {
  padding: 0;
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: black;
  font-family: "Chakra Petch", sans-serif;
  overflow: hidden;
  color: white;
  letter-spacing: .4em;
}

.scene {
  position: relative;
  width: 300px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

#emoji {
  font-size: 80px;
}

#progress {
  font-size: 30px;
}

#loader {
  --filter: drop-shadow(0px 0px 2px #fff) 
		drop-shadow(0px 0px 3px #00e5ff) blur(0px);
  --filter2: drop-shadow(0px 0px 25px #fff) 
		drop-shadow(0px 0px 30px #00e5ff) blur(6px);
  --t1: scale(1) skew(0deg);
  --t2: scale(2) skew(10deg);
  --t3: scale(2) skew(-10deg);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 0px;
  filter: var(--filter);
}

.active {
  animation: scaleUp .09s ease-in-out;
}

@keyframes scaleUp {
  0% {
    transform: var(--t1);
    filter: var(--filter);
  }
  50% {
    transform: var(--t2);
    filter: var(--filter2);
  }
  60% {
    transform: var(--t3);
  }
  100% {
    transform: var(--t1);
    filter: var(--filter);
  }
}
</style>


.........完整代码请登录后点击上方下载按钮下载查看