div+css实现彩色棒冰加载动画效果代码-html代码-BFW代码库

div+css实现彩色棒冰加载动画效果代码

代码语言：html

代码描述：div+css实现彩色棒冰加载动画效果代码

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


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

<head>

  <meta charset="UTF-8">


  
  
<style>
:root{
  --color-bg: #AD8FFF;
  --animation-duration: 2000ms;  
  --animation-stagger: 80ms;
  --hue: 360;
  --delay: 0;
  --hex: #F46A6C;
  --size: 6vw;
}

*{
  box-sizing:border-box;
}

body{
  background: var(--color-bg);
  padding:1rem;
  height:100vh;
  overflow:hidden;  
  display:flex;
  align-items:center;
  justify-content:center;
}

.loader{
  display:flex;
  align-content:center;
  justify-content:center;  
  max-width:50vw;
}


/* fun (to me) fact: there was a promotional mr freeze pop for batman & robin in 1997 [https://assets.codepen.io/233661/mr-freeze-promotion-box.jpg] */
.mr-freeze{
  margin:0 2.5%;
  position:relative;
  width: var(--size);
  max-height:80vh;
  aspect-ratio: 1 / 8;
  animation: infinite syrup-displacement var(--animation-duration) ease;
  animation-delay: var(--delay);  
  transform-origin:bottom center;  
  z-index:3;
  border:1px solid rgba(255,255,255,.5) ;
  border-width: 0 2px;

  /* make the pop liquid with a background gradient */
  background: 
    no-repeat bottom 1rem center / 100% 30%
    linear-gradient(
      hsla( var(--hue), 100%, 50%, 50%),
      hsla( var(--hue), 100%, 60%, 50%)      
    );  
}

/* vars for each pop */
.mr-freeze:nth-child(1){
  --hue:360;
  --hex: #F46A6C;
  --delay: calc( var(--animation-stagger) * 1);
}

.mr-freeze:nth-child(2){
  --hue:38;
  --hex: #FBAD21;
  --delay: calc( var(--animation-stagger) * 2);
}

.mr-freeze:nth-child(3){
  --hue:48;
  --hex: #F7D445;
  --delay: calc( var(--animation-stagger) * 3);
}

.mr-freeze:nth-child(4){
  --hue:84;
  --hex: #9BCC50;
  --delay: calc( var(--animation-stagger) * 4);
}

.mr-freeze:nth-child(5){
  --hue:194;
  --hex:#3AB9DE;
  --delay: calc( var(--animation-stagger) * 5);
}

.mr-freeze:nth-child(6){
  --hue:290;
  --hex:#AC51C0;
  --delay: calc( var(--animation-stagger) * 6);
}

/* ice pop pseduo element */
.mr-freeze:before{
  --inset: 10%;
  content:'';
  display:block;
  position:absolute;
  top: var(--inset);
  right: var(--inset);
  bottom: 1.5rem;
  left: var(--inset);
  .........完整代码请登录后点击上方下载按钮下载查看