CSS loading动画

下载代码

html

css

分享到微信朋友圈

html

css

/*-------------------------------------------
    $ Main
-------------------------------------------*/

html,body {
	padding:0;
	margin:0;
     background-color:#fff
}
html,body,input,button,textarea {
	font:100%/1.4 "Source Sans Pro","Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
}
.wrapper {
	min-width:290px;
	max-width:800px;
	padding-left:1em;
	padding-right:1em;
	margin-left:auto;
	margin-right:auto;
}
.text-giga {
	line-height:1;
	font-size:24px;
	font-weight:300;
}
.pad-top {
	padding-top:1em;
}
.space-out {
	margin:100px;
}
/*-------------------------------------------
    $ Loaders
-------------------------------------------*/

.loader {
	width:50px;
	height:50px;
	border-radius:50%;
	margin:3em;
	display:inline-block;
	position:relative;
	vertical-align:middle;
}
.loader,.loader:before,.loader:after {
	animation:1s infinite ease-in-out;
}
.loader:before,.loader:after {
	width:100%;
	height:100%;
	border-radius:50%;
	position:absolute;
	top:0;
	left:0;
}
.loader-black {
	background-color:#333;
}
.loader-1 {
	animation-name:loader1;
}
@keyframes loader1 {
	from {
	transform:scale(0);
	opacity:1;
}
to {
	transform:scale(1);
	opacity:0;
}
}/* Loader 2 */

.loader-2:before,.loader-2:after {
	content:'';
}
.loader-2:before {
	border:1px solid #333;
	top:-1px;
	left:-1px;
	opacity:0;
	animation-name:loader2-1;
}
@keyframes loader2-1 {
	0% {
	transform:scale(1);
	opacity:1;
}
50% {
	transform:scale(1.3);
	opacity:0;
}
100% {
	transform:scale(1.3);
	opacity:0;
}
}.loader-2:after {
	background-color:#333;
	animation-name:loader2-2;
}
@keyframes loader2-2 {
	0% {
	transform:scale(1);
}
50% {
	transform:scale(0.7);
}
100% {
	transform:scale(1);
}
}/* Loader 3 */

.loader-3:before {
	content:'';
	border:10px solid white;
	top:-10px;
	left:-10px;
	animation-name:loader3;
}
@keyframes loader3 {
	0% {
	transform:scale(0);
}
100% {
	transform:scale(1);
}
}/* Loader 4 */

.loader-4:before {
	content:'';
	width:25px;
	height:25px;
	margin:0 0 0 -12px;
	background-color:white;
	top:auto;
	bottom:0;
	left:50%;
	transform-origin:50% 0%;
	animation:loader4 1s infinite linear;
}
@keyframes loader4 {
	0% {
	transform:rotate(0deg);
}
100% {
	transform:rotate(360deg);
}
}/* Loader 5 */

.loader-5 {
	animation:loader5 1s infinite linear;
}
@keyframes loader5 {
	0% {
	transform:rotate(0deg);
	border-radius:50%;
}
50% {
	transform:rotate(90deg);
	border-radius:0%;
}
100% {
	transform:rotate(180deg);
	border-radius:50%;
}
}/* Loader 6 */

.loader-6 {
	animation:loader6-1 1.5s infinite linear;
}
.loader-6:before,.loader-6:after {
	content:'';
	margin:-25px 0 0 -25px;
	top:50%;
	left:50%;
	background-color:rgba(30,30,30,0.7);
	animation-name:loader6-2;
}
.loader-6:after {
	animation-direction:reverse;
}
@keyframes loader6-1 {
	0% {
	transform:rotate(0deg);
}
100% {
	transform:rotate(360deg);
}
}@keyframes loader6-2 {
	0% {
	transform:scale(0.2);
	left:0%;
}
50% {
	transform:scale(1.0);
	left:50%;
}
100% {
	transform:scale(0.2);
	left:100%;
}
}/* Loader 7 */

.loader-7 {
	animation:loader7-1 1s infinite linear;
}
.loader-7:before,.loader-7:after {
	content:'';
	width:80%;
	height:80%;
	background-color:#333;
	top:5%;
}
.loader-7:before {
	left:-5%;
	animation:loader7-2 1s infinite alternate ease-in-out;
	transform-origin:10% 50%;
}
.loader-7:after {
	left:auto;
	right:-5%;
	animation:loader7-2 1s 1s infinite alternate ease-in-out;
	transform:scale(0);
	transform-origin:90% 50%;
}
@keyframes loader7-1 {
	0% {
	transform:rotate(20deg);
}
100% {
	transform:rotate(380deg);
}
}@keyframes loader7-2 {
	0% {
	transform:scale(0);
}
100% {
	transform:scale(1);
}
}/* Loader 8 */

.loader-8:before,.loader-8:after {
	content:'';
	background-color:#333;
	transform:scale(0);
	animation:loader8 1.5s infinite ease-in-out;
}
.loader-8:after {
	animation-delay:0.75s;
}
@keyframes loader8 {
	0% {
	transform:translateX(-100%) scale(0);
}
50% {
	transform:translateX(0%)    scale(1);
}
100% {
	transform:translateX(100%)  scale(0);
}
}/* Loader 9 & 10 */

.loader-9,.loader-10 {
	background-color:white;
	animation:loader9 0.4s infinite linear;
}
.loader-10 {
	animation:loader10 60s infinite ease-in-out;
}
.loader-9:before,.loader-10:before {
	content:'';
	width:80%;
	height:80%;
	background-color:white;
	top:10%;
	left:10%;
	box-shadow:5px -3px 0 rgba(255,100,100,0.7),5px 5px 0 rgba(100,255,100,0.7),-3px 5px 0 rgba(100,100,255,0.7),-5px -5px 0 rgba(240,240,120,0.7);
}
.loader-9:after,.loader-10:after {
	content:'';
	border:3px solid white;
	z-index:2;
	top:-3px;
	left:-3px;
}
@keyframes loader9 {
	0% {
	transform:rotate(0deg);
}
100% {
	transform:rotate(360deg);
}
}@keyframes loader10 {
	0% {
	transform:rotate(0deg);
}
100% {
	transform:rotate(360000deg);
}
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg