svg+css实现高科技圈圈loading加载动画效果代码
代码语言：html
所属分类：动画
代码描述：svg+css实现高科技圈圈loading加载动画效果代码
代码标签： svg cs 高科技 圈圈 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 {
opacity:.5;
fill:none;
stroke:#FFF;
stroke-width:1.5;
enable-background:new
}
#hud svg .outer-ring-red .glow {
fill:none;
stroke:#E23528;
stroke-width:9.5;
-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_flicker 2s infinite linear;
-sand-animation:hud_flicker 2s infinite linear;
-moz-animation:hud_flicker 2s infinite linear;
-ms-animation:hud_flicker 2s infinite linear;
-o-animation:hud_flicker 2s infinite linear;
animation:hud_flicker 2s 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 .inner-ring {
opacity:.5;
fill:none;
stroke:#fff;
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_wind_release 4s infinite ease-out;
-sand-animation:hud_wind_release 4s infinite ease-out;
-moz-animation:hud_wind_release 4s infinite ease-out;
-ms-animation:hud_wind_release 4s infinite ease-out;
-o-animation:hud_wind_release 4s infinite ease-out;
animation:hud_wind_release 4s infinite ease-out
}
#hud.disabled,#hud.hidden {
display:block;
z-index:-1
}
#hud.disabled svg,#hud.hidden svg {
opacity:0;
-webkit-transform:scale(0) rotate(-180deg);
-sand-transform:scale(0) rotate(-180deg);
-moz-transform:scale(0) rotate(-180deg);
-ms-transform:scale(0) rotate(-180deg);
-o-transform:scale(0) rotate(-180deg);
transform:scale(0) rotate(-180deg)
}
#hud.spin-in svg {
opacity:0;
-webkit-transform:scale(0) rotate(-180deg);
-sand-transform:scale(0) rotate(-180deg);
-moz-transform:scale(0) rotate(-180deg);
-ms-transform:scale(0) rotate(-180deg);
-o-transform:scale(0) rotate(-180deg);
transform:scale(0) rotate(-180deg)
}
#hud.spin-out svg {
opacity:0;
-webkit-transform:scale(3) rotate(-180deg);
-sand-transform:scale(3) rotate(-180deg);
-moz-transform:scale(3) rotate(-180deg);
-ms-transform:scale(3) rotate(-180deg);
-o-transform:scale(3) rotate(-180deg);
transform:scale(3) rotate(-180deg)
}
.st0 {
opacity:.4;
fill:#FFFFF9;
enable-background:new
}
.st1 {
fill:none
}
.st2 {
opacity:.5;
fill:none;
stroke:#FFF;
stroke-width:1.5;
enable-background:new
}
.st3 {
fill:none;
stroke:#11A6FD;
stroke-width:9.5
}
.st4 {
fill:none;
stroke:#E23528;
stroke-width:9.5
}
.st5 {
opacity:.5;
fill:none;
stroke:#FFF;
enable-background:new
}
@-webkit-keyframes hud_flicker {
10% {
opacity:1
}
50% {
opacity:.5
}
90% {
opacity:1
}
100% {
opacity:.7
}
}@-moz-keyframes hud_flicker {
10% {
opacity:1
}
50% {
opacity:.5
}
90% {
opacity:1
}
100% {
opacity:.7
}
}@-ms-keyframes hud_flicker {
10% {
opacity:1
}
50% {
opacity:.5
}
90% {
opacity:1
}
100% {
opacity:.7
}
}@keyframes hud_flicker {
10% {
opacity:1
}
50% {
opacity:.5
}
90% {
opacity:1
}
100% {
opacity:.7
}
}@-webkit-keyframes hud_fade {
50% {
opacity:.5
}
}@-moz-keyframes hud_fade {
50% {
opacity:.5
}
}@-ms-keyframes hud_fade {
50% {
opacity:.5
}
}@keyframes hud_fade {
50% {
opacity:.5
}
}@-webkit-keyframes hud_pulsate {
50% {
-webkit-transform:scale(0.95);
-sand-transform:scale(0.95);
-moz-transform:scale(0.95);
-ms-transform:scale(0.95);
-o-transform:scale(0.95);
transform:scale(0.95)
}
}@-moz-keyframes hud_pulsate {
50% {
-webkit-transform:scale(0.95);
-sand-transform:scale(0.95);
-moz-transform:scale(0.95);
-ms-transform:scale(0.95);
-o-transform:scale(0.95);
transform:scale(0.95)
}
}@-ms-keyframes hud_pulsate {
50% {
-webkit-transform:scale(0.95);
-sand-transform:scale(0.95);
-moz-transform:scale(0.95);
-ms-transform:scale(0.95);
-o-transform:scale(0.95);
transform:scale(0.95)
}
}@keyframes hud_pulsate {
50% {
-webkit-transform:scale(0.95);
-.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0