div+css实现五角星星星闪耀loading加载动画效果代码-html代码-BFW代码库

div+css实现五角星星星闪耀loading加载动画效果代码

代码语言：html

代码描述：div+css实现五角星星星闪耀loading加载动画效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.4.0.css">

<style>
    *
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #131a1c;
    scroll-behavior: smooth;
}

.loader {
     position: relative;
     width: 300px;
     height: 300px;
     display: flex;
     justify-content: center;
     align-items: center;
     animation: animateColor 7.2s linear infinite;
}
@keyframes animateColor {
    0% {
        filter: hue-rotate(0deg);
    }
   100% {
        filter: hue-rotate(360deg);
    }
}
.loader span {
    position: absolute;
    transform-origin: 150px;
    transform: translateX(-150px) rotate(calc(var(--i)* 30deg));
    filter: drop-shadow(0 0 5px #3cc2ff)drop-shadow(0 0 15px #3cc2ff)drop-shadow(0 0 30px #3cc2ff);
}

.loader span i {
    position: relative;
    color: #3cc2ff;
    animation: rotate-stars 2.4s linear infinite;
    animation-delay: calc(var(--i) * 0.2s);
}

@keyframes rotate-stars {
    0% {
        transform: rotate(0deg) scale(0);
    }
    50% {
        transform: rotate(180deg) scale(3);
    }
}

.loader span::before {
    content:'\f005'; /* change to f004 for heart effect :D */
    position: absolute;
    font-family: fontAwesome;
    font-size: 0.75em;
    color: #131a1c;
    animation: rotate-particle 2.4s linear infinite;
    animation-delay: calc(var(--i) * 0.2s);
}

@keyframes rotate-particle {
    0% {
        scale: 1;
        opacity: 0;
        rotate: 0deg;
    }
    50% {
        scale: 1;
        opacity: 1;
        rotate: 180deg;
    }
   100% {
        scale: 0;
        opacity: 0;
        rotate: 360deg;
        filter:drop-shadow(-150px 0 #3cc2ff)drop-shadow(150px 0 #3cc2ff)drop-shadow(0 150px #3cc2ff)drop-shadow(-150px 0 #3cc2ff);
    .........完整代码请登录后点击上方下载按钮下载查看