css实现12款loading加载动画效果代码
代码语言：html
所属分类：加载滚动
代码描述：css实现12款loading加载动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<html>
<head>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
<style>
body {
background-color: #a9fbff;
margin-top: 25px;
}
.col-sm-2 {
padding: 10px;
border-radius: 4px;
height: 125px;
margin-bottom: 10px;
}
.sp {
width: 32px;
height: 32px;
clear: both;
margin: 20px auto;
}
/* Spinner Circle Rotation */
.sp-circle {
border: 4px rgba(0, 0, 0, 0.25) solid;
border-top: 4px black solid;
border-radius: 50%;
-webkit-animation: spCircRot 0.6s infinite linear;
animation: spCircRot 0.6s infinite linear;
}
@-webkit-keyframes spCircRot {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}
@keyframes spCircRot {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
/* Spinner 3Balls Scale */
.sp-3balls, .sp-3balls:before, .sp-3balls:after {
border-radius: 50%;
background-color: #000;
width: 18px;
height: 18px;
transform-origin: center center;
display: inline-block;
}
.sp-3balls {
position: relative;
background-color: black;
opacity: 1;
-webkit-animation: spScaleAlpha 1s infinite linear;
animation: spScaleAlpha 1s infinite linear;
}
.sp-3balls:before, .sp-3balls:after {
content: "";
position: relative;
opacity: 0.25;
}
.sp-3balls:before {
left: 30px;
top: 0px;
-webkit-animation: spScaleAlphaBefore 1s infinite linear;
animation: spScaleAlphaBefore 1s infinite linear;
}
.sp-3balls:after {
left: -30px;
top: -23px;
-webkit-animation: spScaleAlphaAfter 1s infinite linear;
animation: spScaleAlphaAfter 1s infinite linear;
}
@-webkit-keyframes spScaleAlpha {
0% {
opacity: 1;
}
33% {
opacity: 0.25;
}
66% {
opacity: 0.25;
}
100% {
opacity: 1;
}
}
@keyframes spScaleAlpha {
0% {
opacity: 1;
}
33% {
opacity: 0.25;
}
66% {
opacity: 0.25;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes spScaleAlphaBefore {
0% {
opacity: 0.25;
}
33% {
opacity: 1;
}
66% {
opacity: 0.25;
}
}
@keyframes spScaleAlphaBefore {
0% {
opacity: 0.25;
}
33% {
opacity: 1;
}
66% {
opacity: 0.25;
}
}
@-webkit-keyframes spScaleAlphaAfter {
33% {
opacity: 0.25;
}
66% {
opacity: 1;
}
100% {
opacity: 0.25;
}
}
@keyframes spScaleAlphaAfter {
33% {
opacity: 0.25;
}
66% {
opacity: 1;
}
100% {
opacity: 0.25;
}
}
/* Spinner VolumeButton */
.sp-volume {
background-color: #000;
border-radius: 50%;
position: relative;
-webkit-animation: spVolRot 0.6s infinite linear;
animation: spVolRot 0.6s infinite linear;
}
.sp-volume:after {
content: "";
border-radius: 50%;
position: absolute;
display: block;
width: 10px;
height: 10px;
left: 5px;
top: 5px;
background-color: white;
}
@-webkit-keyframes spVolRot {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}
@keyframes spVolRot {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
/* Spinner Vortex */
.sp-vortex {
border: 1px #000 solid;
border-radius: 4px;
overflow: hidden;
position: relative;
}
.sp-vortex:after, .sp-vortex:before {
content: "";
border-radius: 50%;
position: absolute;
width: inherit;
height: inherit;
-webkit-animation: spVortex 2s infinite linear;
animation: spVortex 2s infinite linear;
}
.sp-vortex:before {
border-top: 6px #000 solid;
top: -3px;
left: calc( -50% - 3px );
transform-origin: right center;
}
.sp-vortex:after {
border-bottom: 6px #000 solid;
top: 3px;
right: calc( -50% - 3px );
transform-origin: left center;
}
@-webkit-keyframes spVortex {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}
@keyframes spVortex {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
/* Spinner Slices */
.sp.sp-slices {
border-radius: 50%;
border-top: 16px rgba(0, 0, 0, 0.75) solid;
border-left: 16px rgba(0, 0, 0, 0.25) solid;
border-bottom: 16px rgba(0, 0, 0, 0.25) solid;
border-right: 16px rgba(0, 0, 0, 0.25) solid;
-webkit-animation: spSlices 1s infinite linear;
animation: spSlices 1s infinite linear;
}
@-webkit-keyframes spSlices {
0% {
border-top: 16px rgba(0, 0, 0, 0.75) solid;
border-right: 16px rgba(0, 0, 0, 0.25) solid;
border-bottom: 16px rgba(0, 0, 0, 0.25) solid;
border-left: 16px rgba(0, 0, 0, 0.25) solid;
}
25% {
border-top: 16px rgba(0, 0, 0, 0.25) solid;
border-right: 16px rgba(0, 0, 0, 0.75) solid;
border-bottom: 16px rgba(0, 0, 0, 0.25) solid;
border-left: 16px rgba(0, 0, 0, 0.25) solid;
}
50% {
border-top: 16px rgba(0, 0, 0, 0.25) solid;
border-right: 16px rgba(0, 0, 0, 0.25) solid;
border-bottom: 16px rgba(0, 0, 0, 0.75) solid;
border-left: 16px rgba(0, 0, 0, 0.25) solid;
}
75% {
border-top: 16px rgba(0, 0, 0, 0.25) solid;
border-right: 16px rgba(0, 0, 0, 0.25) solid;
border-bottom: 16px rgba(0, 0, 0, 0.25) solid;
border-left: 16px rgba(0, 0, 0, 0.75) solid;
}
100% {
border-top: 16px rgba(0, 0, 0, 0.75) solid;
border-right: 16px rgba(0, 0, 0, 0.25) solid;
border-bottom: 16px rgba(0, 0, 0, 0.25) solid;
border-left: 16px rgba(0, 0, 0, 0.25) solid;
}
}
@keyframes spSlices {
0% {
border-top: 16px rgba(0, 0, 0, 0.75) solid;
border-right: 16px rgba(0, 0, 0, 0.25) solid;
border-bottom: 16px rgba(0, 0, 0, 0.25) solid;
border-left: 16px rgba(0, 0, 0, 0.25) solid;
}
25% {
border-top: 16px rgba(0, 0, 0, 0.25) solid;
border-right: 16px rgba(0, 0, 0, 0.75) solid;
border-bottom: 16px rgba(0, 0, 0, 0.25) solid;
border-left: 16px rgba(0, 0, 0, 0.25) solid;
}
50% {
border-top: 16px rgba(0, 0, 0, 0.25) solid;
border-right: 16px rgba(0, 0, 0, 0.25) solid;
border-bottom: 16px rgba(0, 0, 0, 0.75) solid;
border-left: 16px rgba(0, 0, 0, 0.25) solid;
}
75% {
border-top: 16px rgba(0, 0, 0, 0.25) solid;
border-right: 16px rgba(0, 0, 0, 0.25) solid;
border-bottom: 16px rgba(0, 0, 0, 0.25) solid;
border-left: 16px rgba(0, 0, 0, 0.75) solid;
}
100% {
border-top: 16px rgba(0, 0, 0, 0.75) solid;
border-right: 16px rgba(0, 0, 0, 0.25) solid;
border-bottom: 16px rgba(0, 0, 0, 0.25) solid;
border-left: 16px rgba(0, 0, 0, 0.25) solid;
}
}
/* Spinner Sphere */
.sp-sphere {
border-radius: 50%;
border-left: 0px #000 solid;
border-right: 0px #000 solid;
-webkit-animation: spSphere 1s infinite linear;
animation: spSphere 1s infinite linear;
}
@-webkit-keyframes spSphere {
0% {
border-left: 0px #000 solid;
border-right: 0px #000 solid;
}
33% {
border-left: 32px #000 solid;
border-right: 0px #000 solid;
}
34% {
border-left: 0px #000 solid;
border-right: 32px #000 solid;
}
66% {
border-left: 0px #000 solid;
border-right: 0px #000 solid;
}
}
@keyframes spSphere {
0% {
border-left: 0px #000 solid;
border-right: 0px #000 solid;
}
33% {
border-left: 32px #000 solid;
border-right: 0px #000 solid;
}
34% {
border-left: 0px #000 solid;
border-right: 32px #000 solid;
}
66% {
border-left: 0px #000 solid;
border-right: 0px #000 solid;
}
}
/* .........完整代码请登录后点击上方下载按钮下载查看
相似代码
热门代码搜索
其他语言代码库
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