实现效果

实现代码

jb51.net

css3

@-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes rotate2 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
border-top-color: rgba(0, 0, 0, 0.5);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
border-top-color: rgba(0, 0, 255, 0.5);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
border-top-color: rgba(0, 0, 0, 0.5);
}
}
@keyframes rotate2 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
border-top-color: rgba(0, 0, 0, 0.5);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
border-top-color: rgba(0, 0, 255, 0.5);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
border-top-color: rgba(0, 0, 0, 0.5);
}
}
* {
box-sizing: border-box;
}
body {
background: #f9f9f9;
padding-bottom: 100px;
}
h1, h3 {
display: block;
margin: 0px auto;
text-align: center;
font-family: 'tahoma';
font-weight: lighter;
color: rgba(0, 0, 0, 0.5);
letter-spacing: 1.5px;
}
h1 {
margin: 50px auto;
}
.loader {
position: relative;
margin: 75px auto;
width: 150px;
height: 150px;
display: block;
overflow: hidden;
}
.loader div {
height: 100%;
}
/* loader 1 */
.loader1, .loader1 div {
border-radius: 50%;
padding: 8px;
border: 2px solid transparent;
-webkit-animation: rotate linear 3.5s infinite;
animation: rotate linear 3.5s infinite;
border-top-color: rgba(0, 0, 0, 0.5);
border-bottom-color: rgba(0, 0, 255, 0.5);
}
/*loader 2 */
.loader2, .loader2 div {
border-radius: 50%;
padding: 8px;
border: 2px solid transparent;
-webkit-animation: rotate linear 3.5s infinite;
animation: rotate linear 3.5s infinite;
border-top-color: rgba(0, 0, 255, 0.5);
border-left-color: rgba(0, 0, 0, 0.5);
border-right-color: rgba(0, 0, 0, 0.5);
}
/*loader 3 */
.loader3, .loader3 div {
border-radius: 50%;
padding: 8px;
border: 2px solid transparent;
-webkit-animation: rotate linear 3.5s infinite;
animation: rotate linear 3.5s infinite;
border-top-color: rgba(0, 0, 0, 0.5);
border-left-color: rgba(0, 0, 255, 0.5);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.38, 0.21, 0.88);
animation-timing-function: cubic-bezier(0.55, 0.38, 0.21, 0.88);
-webkit-animation-duration: 3s;
animation-duration: 3s;
}
/* loader 4 */
.loader4, .loader4 div {
border-radius: 50%;
padding: 8px;
border: 2px solid transparent;
-webkit-animation: rotate linear 3.5s infinite;
animation: rotate linear 3.5s infinite;
border-radius: 50%;
padding: 4px;
-webkit-animation: rotate2 4s infinite linear;
animation: rotate2 4s infinite linear;
}
div:hover {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
.loader, .loader * {
will-change: transform;
}

以上就是css3 实现的加载动画的详细内容，更多关于css3 加载动画的资料请关注其它相关文章！