svg+css实现高科技圈圈loading加载动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：svg+css实现高科技圈圈loading加载动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<html lang="en">

<head>


    <style>
        body {
        background:#0e294e
}
#hud {
        height:100%;
        max-height:350px;
        max-width:350px;
        z-index:1;
        left:50%;
        position:fixed;
        top:50%;
        width:100%;
        -webkit-transition:all 1s ease-in-out;
        -sand-transition:all 1s ease-in-out;
        -moz-transition:all 1s ease-in-out;
        -ms-transition:all 1s ease-in-out;
        -o-transition:all 1s ease-in-out;
        transition:all 1s ease-in-out;
        -webkit-transform:translate(-50%,-50%);
        -sand-transform:translate(-50%,-50%);
        -moz-transform:translate(-50%,-50%);
        -ms-transform:translate(-50%,-50%);
        -o-transform:translate(-50%,-50%);
        transform:translate(-50%,-50%)
}
#hud.active {
        -webkit-transform:translate(-50%,-50%);
        -sand-transform:translate(-50%,-50%);
        -moz-transform:translate(-50%,-50%);
        -ms-transform:translate(-50%,-50%);
        -o-transform:translate(-50%,-50%);
        transform:translate(-50%,-50%)
}
#hud.loading {
        -webkit-transition:all .5s ease-in-out;
        -sand-transition:all .5s ease-in-out;
        -moz-transition:all .5s ease-in-out;
        -ms-transition:all .5s ease-in-out;
        -o-transition:all .5s ease-in-out;
        transition:all .5s ease-in-out;
        -webkit-transform:translate(-50%,-50%) scale(0.5);
        -sand-transform:translate(-50%,-50%) scale(0.5);
        -moz-transform:translate(-50%,-50%) scale(0.5);
        -ms-transform:translate(-50%,-50%) scale(0.5);
        -o-transform:translate(-50%,-50%) scale(0.5);
        transform:translate(-50%,-50%) scale(0.5)
}
#hud.loading svg {
        -webkit-transform-origin:50% 50%;
        -sand-transform-origin:50% 50%;
        -moz-transform-origin:50% 50%;
        -ms-transform-origin:50% 50%;
        -o-transform-origin:50% 50%;
        transform-origin:50% 50%;
        -webkit-animation:hud_spin_counter_clockwise 3s infinite linear;
        -sand-animation:hud_spin_counter_clockwise 3s infinite linear;
        -moz-animation:hud_spin_counter_clockwise 3s infinite linear;
        -ms-animation:hud_spin_counter_clockwise 3s infinite linear;
        -o-animation:hud_spin_counter_clockwise 3s infinite linear;
        animation:hud_spin_counter_clockwise 3s infinite linear
}
#hud.loading svg .hatching {
        opacity:0;
        -webkit-animation:none;
        -sand-animation:none;
        -moz-animation:none;
        -ms-animation:none;
        -o-animation:none;
        animation:none
}
#hud.loading svg .outer-ring {
        -webkit-animation:none;
        -sand-animation:none;
        -moz-animation:none;
        -ms-animation:none;
        -o-animation:none;
        animation:none
}
#hud.loading svg .inner-ring,#hud.loading svg .trace {
        stroke-width:6!important
}
#hud.loading svg .inner-ring {
        -webkit-animation:hud_spin_clockwise 1s infinite linear;
        -sand-animation:hud_spin_clockwise 1s infinite linear;
        -moz-animation:hud_spin_clockwise 1s infinite linear;
        -ms-animation:hud_spin_clockwise 1s infinite linear;
        -o-animation:hud_spin_clockwise 1s infinite linear;
        animation:hud_spin_clockwise 1s infinite linear
}
#hud.exploded {
        opacity:0;
        -webkit-transition:all .5s ease-in-out;
        -sand-transition:all .5s ease-in-out;
        -moz-transition:all .5s ease-in-out;
        -ms-transition:all .5s ease-in-out;
        -o-transition:all .5s ease-in-out;
        transition:all .5s ease-in-out;
        -webkit-transform:translate(-50%,-50%) scale(2.5);
        -sand-transform:translate(-50%,-50%) scale(2.5);
        -moz-transform:translate(-50%,-50%) scale(2.5);
        -ms-transform:translate(-50%,-50%) scale(2.5);
        -o-transform:translate(-50%,-50%) scale(2.5);
        transform:translate(-50%,-50%) scale(2.5)
}
#hud.exploded svg {
        -webkit-transform-origin:50% 50%;
        -sand-transform-origin:50% 50%;
        -moz-transform-origin:50% 50%;
        -ms-transform-origin:50% 50%;
        -o-transform-origin:50% 50%;
        transform-origin:50% 50%
}
#hud.hidden:before {
        opacity:0
}
#hud.hidden svg .hatching,#hud.hidden svg .glow-img,#hud.hidden svg .glow-img-inner,#hud.hidden svg .outer-ring-blue,#hud.hidden svg .outer-ring-red,#hud.hidden svg .inner-ring {
        -webkit-animation:none;
        -sand-animation:none;
        -moz-animation:none;
        -ms-animation:none;
        -o-animation:none;
        animation:none
}
#hud:before {
        content:" ";
        top:50%;
        left:50%;
        height:1px;
        position:absolute;
        width:1px;
        -webkit-transition:all .5s ease-in-out;
        -sand-transition:all .5s ease-in-out;
        -moz-transition:all .5s ease-in-out;
        -ms-transition:all .5s ease-in-out;
        -o-transition:all .5s ease-in-out;
        transition:all .5s ease-in-out;
        -webkit-box-shadow:0 0 1000px 200px rgba(70,131,176,0.3);
        -sand-box-shadow:0 0 1000px 200px rgba(70,131,176,0.3);
        -moz-box-shadow:0 0 1000px 200px rgba(70,131,176,0.3);
        -ms-box-shadow:0 0 1000px 200px rgba(70,131,176,0.3);
        -o-box-shadow:0 0 1000px 200px rgba(70,131,176,0.3);
        box-shadow:0 0 1000px 200px rgba(70,131,176,0.3)
}
#hud svg {
        opacity:1;
        overflow:visible;
        -webkit-transform-origin:50% 50%;
        -sand-transform-origin:50% 50%;
        -moz-transform-origin:50% 50%;
        -ms-transform-origin:50% 50%;
        -o-transform-origin:50% 50%;
        transform-origin:50% 50%;
        -webkit-transition:all .5s ease-in-out;
        -sand-transition:all .5s ease-in-out;
        -moz-transition:all .5s ease-in-out;
        -ms-transition:all .5s ease-in-out;
        -o-transition:all .5s ease-in-out;
        transition:all .5s ease-in-out
}
#hud svg .hatching {
        opacity:.4;
        fill:#FFFFF9;
        enable-background:new;
        -webkit-transform-origin:50% 50%;
        -sand-transform-origin:50% 50%;
        -moz-transform-origin:50% 50%;
        -ms-transform-origin:50% 50%;
        -o-transform-origin:50% 50%;
        transform-origin:50% 50%;
        -webkit-transform:translate(1px,0);
        -sand-transform:translate(1px,0);
        -moz-transform:translate(1px,0);
        -ms-transform:translate(1px,0);
        -o-transform:translate(1px,0);
        transform:translate(1px,0);
        -webkit-animation:hud_pulsate 2s infinite ease-in-out;
        -sand-animation:hud_pulsate 2s infinite ease-in-out;
        -moz-animation:hud_pulsate 2s infinite ease-in-out;
        -ms-animation:hud_pulsate 2s infinite ease-in-out;
        -o-animation:hud_pulsate 2s infinite ease-in-out;
        animation:hud_pulsate 2s infinite ease-in-out
}
#hud svg .glow-img {
        -webkit-transform-origin:50% 50%;
        -sand-transform-origin:50% 50%;
        -moz-transform-origin:50% 50%;
        -ms-transform-origin:50% 50%;
        -o-transform-origin:50% 50%;
        transform-origin:50% 50%;
        -webkit-transform:scale(1.07);
        -sand-transform:scale(1.07);
        -moz-transform:scale(1.07);
        -ms-transform:scale(1.07);
        -o-transform:scale(1.07);
        transform:scale(1.07)
}
#hud svg .glow-img-inner {
        -webkit-transform:scale(0.94);
        -sand-transform:scale(0.94);
        -moz-transform:scale(0.94);
        -ms-transform:scale(0.94);
        -o-transform:scale(0.94);
        transform:scale(0.94)
}
#hud svg .outer-ring-blue {
        -webkit-transform-origin:50% 50%;
        -sand-transform-origin:50% 50%;
        -moz-transform-origin:50% 50%;
        -ms-transform-origin:50% 50%;
        -o-transform-origin:50% 50%;
        transform-origin:50% 50%;
        -webkit-transform:translate(1px,0);
        -sand-transform:translate(1px,0);
        -moz-transform:translate(1px,0);
        -ms-transform:translate(1px,0);
        -o-transform:translate(1px,0);
        transform:translate(1px,0);
        -webkit-animation:hud_spin_clockwise 20s infinite linear;
        -sand-animation:hud_spin_clockwise 20s infinite linear;
        -moz-animation:hud_spin_clockwise 20s infinite linear;
        -ms-animation:hud_spin_clockwise 20s infinite linear;
        -o-animation:hud_spin_clockwise 20s infinite linear;
        animation:hud_spin_clockwise 20s infinite linear
}
#hud svg .outer-ring-blue .trace {
        opacity:.5;
        fill:none;
        stroke:#FFF;
        stroke-width:1.5;
        enable-background:new
}
#hud svg .outer-ring-blue .glow {
        fill:none;
        stroke:#11A6FD;
        stroke-width:9.5;
        -webkit-animation:hud_fade 2s infinite linear;
        -sand-animation:hud_fade 2s infinite linear;
        -moz-animation:hud_fade 2s infinite linear;
        -ms-animation:hud_fade 2s infinite linear;
        -o-animation:hud_fade 2s infinite linear;
        animation:hud_fade 2s infinite linear
}
#hud svg .outer-ring-red {
        -webkit-transform-origin:50% 50%;
        -sand-transform-origin:50% 50%;
        -moz-transform-origin:50% 50%;
        -ms-transform-origin:50% 50%;
        -o-transform-origin:50% 50%;
        transform-origin:50% 50%;
        -webkit-transform:translate(1px,0);
        -sand-transform:translate(1px,0);
        -moz-transform:translate(1px,0);
        -ms-transform:translate(1px,0);
        -o-transform:translate(1px,0);
        transform:translate(1px,0);
        -webkit-animation:hud_spin_counter_clockwise 10s infinite linear;
        -sand-animation:hud_spin_counter_clockwise 10s infinite linear;
        -moz-animation:hud_spin_counter_clockwise 10s infinite linear;
        -ms-animation:hud_spin_counter_clockwise 10s infinite linear;
        -o-animation:hud_spin_counter_clockwise 10s infinite linear;
        animation:hud_spin_counter_clockwise 10s infinite linear;
        -webkit-animation-delay:-1s;
        -sand-animation-delay:-1s;
        -moz-animation-delay:-1s;
        -ms-animation-delay:-1s;
        -o-animation-delay:-1s;
        animation-delay:-1s
}
#hud svg .outer-ring-red .trace {
        .........完整代码请登录后点击上方下载按钮下载查看