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);
	-s.........完整代码请登录后点击上方下载按钮下载查看