div+css实现异形加载动画效果代码-html代码-BFW代码库

div+css实现异形加载动画效果代码

代码语言：html

代码描述：div+css实现异形加载动画效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
@layer props {
  @property --scale {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }
}
:root {
  --bg-color: hsl(225deg 10% 15%);
  --user-hue: 100;
  --hue: calc(265 + var(--user-hue, 0));
  --loader-color: hsl(calc(var(--hue)*1deg) 80% 50%);
  --loader-size: 100;
  --spread: 3.4;
  --scale: 0;
  --border-radius: 100%;
  --loader-ratio: 0.25;
}

*, *:before, *:after {
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  background: var(--bg-color);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  place-items: center;
  /* loader*/
}
body div.loader {
  position: relative;
  transform-origin: center center;
  width: calc(calc(var(--loader-size) * 3) * 1px);
  height: calc(calc(var(--loader-size) * 3) * 1px);
  transform: rotate(30deg);
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
  perspective: 800px;
}
body div.loader:nth-child(2) {
  --loader-size: 100;
  --spread: 2.5;
  --border-radius:100% 100% 0% 0%;
  --hue: calc(310 + var(--user-hue, 0) );
  --loader-color: hsl(calc(var(--hue)*1deg) 70% 40%);
}
body div.loader:nth-child(3) {
  --loader-size: 80;
  --spread: 4;
  --border-radius: 200%;
  --hue: calc(110 + var(--user-hue, 0) );
  --loader-ratio: .6;
  --loader-color: hsl(calc(var(--hue)*1deg) 70% 30%);
}
body div.loader span {
  position: absolute;
  display: block;
  width: calc(calc(var(--loader-size)/1.8) * 1px);
  height: calc(calc(var(--loader-size) * var(--loader-ratio)) * 1px);
  box-shadow: inset 0 0 1px black, inset 0 1px 15px rgba(0, 0, 0, 0.5), inset var(--light-shadow-pos) -2px rgba(0, 0, 0, 0.8), inset var(--dark-shadow-pos) -2px rgba(255, 255, 255, 0.6);
  border-radius: var(--border-radius);
  transform-origin: center bottom;
}
body div.loader span:before, body div.loader span:after {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background: var(--loader-color);
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius);
  transform: scale(calc(var(--scale)*1.1)) perspective(1px);
  animation: load 2s ease-out infinite calc(var(--delay)*150ms);
  transform-origin: center center;
}
body div.loader span:before {
  --hue: calc(256 + var(--user-hue, --hue));
  --loader-color: linear-gradient(hsl(calc(var(--hue)*1deg) 80% 50%), hsl(calc(var(--hue)*1deg) 80% 10%));
  z-index: 3;
  mix-blend-mode: color-dodge;
}
body div.loader span:after {
  box-shadow: inset 0 0 1px black, inset var(--light-shadow-pos) r.........完整代码请登录后点击上方下载按钮下载查看