<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 加载动画</title>
<style>
*, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0; }
body { background: black; }
.container { text-align: center; }
section { width: 30%; display: inline-block; text-align: center; min-height: 215px; vertical-align: top; margin: 1%; background: #080915; border-radius: 5px; box-shadow: 0px 0px 30px 1px #103136 inset; }
@media only screen and (max-width: 600px) {
section { min-width: 350px; }
}
.loader { position: relative; width: 60px; height: 60px; border-radius: 50%; margin: 75px; display: inline-block; vertical-align: middle; }
.loader-star { position: absolute; top: calc(50% - 12px); }
/*LOADER-1*/
.loader-1 .loader-outter { position: absolute; border: 4px solid #f50057; border-left-color: transparent; border-bottom: 0; width: 100%; height: 100%; border-radius: 50%; -webkit-animation: loader-1-outter 1s cubic-bezier(.42, .61, .58, .41) infinite; animation: loader-1-outter 1s cubic-bezier(.42, .61, .58, .41) infinite; }
.loader-1 .loader-inner { position: absolute; border: 4px solid #f50057; border-radius: 50%; width: 40px; height: 40px; left: calc(50% - 20px); top: calc(50% - 20px); border-right: 0; border-top-color: transparent; -webkit-animation: loader-1-inner 1s cubic-bezier(.42, .61, .58, .41) infinite; animation: loader-1-inner 1s cubic-bezier(.42, .61, .58, .41) infinite; }
/*LOADER-2*/
.loader-2 .loader-star { position: static; width: 60px; height: 60px; -webkit-transform: scale(0.7); transform: scale(0.7); -webkit-animation: loader-2-star 1s ease alternate infinite; animation: loader-2-star 1s ease alternate infinite; }
.loader-2 .loader-circles { width: 8px; height: 8px; background: #18ffff; border-radius: 50%; position: absolute; left: calc(50% - 4px); top: calc(50% - 4px); -webkit-transition: all 1s ease; transition: all 1s ease; -webkit-animation: loader-2-circles 1s ease-in-out alternate infinite; animation: loader-2-circles 1s ease-in-out alternate infinite; }
/*LOADER-3*/
.loader-3 .dot { width: 10px; height: 10px; background: #00e676; border-radius: 50%; position: absolute; top: calc(50% - 5px); }
.loader-3 .dot1 { left: 0px; -webkit-animation: dot-jump 0.5s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite; animation: dot-jump 0.5s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite; }
.loader-3 .dot2 { left: 20px; -webkit-animation: dot-jump 0.5s 0.2s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite; animation: dot-jump 0.5s 0.2s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite; }
.loader-3 .dot3 { left: 40px; -webkit-animation: dot-jump 0.5s 0.4s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite; animation: dot-jump 0.5s 0.4s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite; }
/*LOADER-4*/
.loader-4 { border: 7px double #ff5722; -webkit-animation: ball-turn 1s linear infinite; animation: ball-turn 1s linear infinite; }
.loader-4:before, .loader-4:after { content: ""; position: absolute; width: 12px; height: 12px; background: #ff5722; border-radius: 50%; bottom: 0; right: 37px; }
.loader-4:after { left: 37px; top: 0; }
/*LOADER-5*/
.loader-5 { border: 8px dotted rgba(255, 255, 0, 1); -webkit-transition: all 1s ease; transition: all 1s ease; -webkit-animation: dotted-spin 1s linear infinite; animation: dotted-spin 1s linear infinite; border-bottom-width: 1px; border-bottom-color: rgba(255, 255, 0, 0.3); border-left-width: 2px; border-left-color: rgba(255, 255, 0, 0.5); border-top-width: 3px; border-right-width: 4px; border-top-color: rgba(255, 255, 0, 0.7); }
.loader-5 .loader-pacman, .loader-pacman { position: absolute; top: 40px; left: 25px; width: 0px; height: 0px; border-right: 12px solid transparent; border-top: 12px solid rgba(255, 255, 0, 1); border-left: 12px solid rgba(255, 255, 0, 1); border-bottom: 12px solid rgba(255, 255, 0, 1); border-top-left-radius: 12px; border-top-right-radius: 12px; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }
/*LOADER-6*/
.loader-6 { border: 6px groove #7e57c2; -webkit-transform: rotate(360deg); transform: rotate(360deg); -webkit-transition: all 1s ease; transition: all 1s ease; -webkit-animation: loader-1-inner 1s ease-out alternate infinite; animation: loader-1-inner 1s ease-out alternate infinite; }
.loader-6 .loader-inner { border: 0px inset #9575cd; border-radius: 50%; width: 100%; height: 100%; -webkit-animation: border-zoom 1s ease-out alternate infinite; animation: border-zoom 1s ease-out alternate infinite; }
/*LOADER-7*/
.loader-7 .line { width: 8px; position: absolute; border-radius: 5px; bottom: 0; background: -webkit-gradient(linear, left top, left bottom, from(#1ee95d), to(#5714ce)); background: -webkit-linear-gradient(top, #1ee95d, #5714ce); background: linear-gradient(to bottom, #1ee95d, #5714ce); }
.loader-7 .line1 { left: 0; -webkit-animation: line-grow 0.5s ease alternate infinite; animation: line-grow 0.5s ease alternate infinite; }
.loader-7 .line2 { left: 20px; -webkit-animation: line-grow 0.5s 0.2s ease alternate infinite; animation: line-grow 0.5s 0.2s ease alternate infinite; }
.loader-7 .line3 { left: 40px; -webkit-animation: line-grow 0.5s 0.4s ease alternate infinite; animation: line-grow 0.5s 0.4s ease alternate infinite; }
/*LOADER-8*/
.loader-8 .star1 { -webkit-animation: star-jump 0.5s ease-out alternate infinite; animation: star-jump 0.5s ease-out alternate infinite; }
.loader-8 .star2 { -webkit-animation: star-jump 0.5s 0.25s ease-out alternate infinite; animation: star-jump 0.5s 0.25s ease-out alternate infinite; }
.loader-8 .star3 { -webkit-animation: star-jump 0.5s 0.5s ease-out alternate infinite; animation: star-jump 0.5s 0.5s ease-out alternate infinite; }
.loader-8 .loader-star { -webkit-transform: scale3d(0.7, 0.7, 0.7); transform: scale3d(0.7, 0.7, 0.7); }
.loader-8 .star1 { left: 0px; }
.loader-8 .star2 { left: 25px; }
.loader-8 .star3 { left: 50px; }
/*LOADER-9*/
.loader-9 .star1 { -webkit-animation: stars-pulse 1s ease-in-out infinite; animation: stars-pulse 1s ease-in-out infinite; left: 0; }
.loader-9 .star2 { -webkit-animation: stars-pulse 1s 0.2s ease-in-out infinite; animation: stars-pulse 1s 0.2s ease-in-out infinite; left: 25px; }
.loader-9 .star3 { -webkit-animation: stars-pulse 1s 0.4s ease-in-out infinite; animation: stars-pulse 1s 0.4s ease-in-out infinite; left: 50px; }
/*LOADER-10*/
.loader-10 { width: auto; height: auto; -webkit-animation: star-pulse 2s ease-in-out infinite; animation: star-pulse 2s ease-in-out infinite; }
.loader-10 .loader-star { position: static; }
/*LOADER-11*/
.loader-11 { /* animation: stars-rotate 2s cubic-bezier(0, 0, 0.63, 0.77) infinite;*/
-webkit-animation: stars-rotate 2s linear infinite; animation: stars-rotate 2s linear infinite; }
.loader-11 .loader-star { position: absolute; }
.loader-11 .star1 { top: 0px; left: -7px; }
.loader-11 .star2 { left: 8px; top: -12px; position: absolute; -webkit-transform: scale(0.8); transform: scale(0.8); opacity: 0.9; }
.loader-11 .star3 { left: 26px; top: -11px; position: absolute; -webkit-transform: scale(0.7); transform: scale(0.7); opacity: 0.8; }
.loader-11 .star4 { left: 39px; top: -2px; position: absolute; -webkit-transform: scale(0.6); transform: scale(0.6); opacity: 0.7; }
.loader-11 .star5 { left: 44px; top: 10px; position: absolute; -webkit-transform: scale(0.5); transform: scale(0.5); opacity: 0.6; }
.loader-11 .star6 { left: 45px; top: 21px; position: absolute; -webkit-transform: scale(0.4); transform: scale(0.4); opacity: 0.5; }
/*LOADER-12*/
.loader-12 { -webkit-animation: stars-rotate-reverse 2s ease infinite; animation: stars-rotate-reverse 2s ease infinite; }
.loader-12 polygon { fill: #d500f9 !important; }
.loader-12 .loader-star { position: absolute; }
.loader-12 .star1 { top: 0px; right: -7px; }
.loader-12 .star2 { right: 9px;
CSS多款loading加载动画效果
需积分: 13 15 浏览量
2017-07-22
11:58:34
上传
评论
收藏 5KB ZIP 举报
CSS多款loading加载动画效果.zip （1个子文件） 
demo.html 46KB资源评论
MNXYPRO
- 粉丝: 9
- 资源: 58
