加载动画

下载代码

html

css

分享到微信朋友圈

html

css

body {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: black;overflow: hidden
}

.loader-cont {
	height: 480px;
	width: 480px;
	position: relative;
}

.dots {
	height: 100%;
	width: 100%;
	border-radius: 50%;
	display: block;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

.dots > span {
	content: '';
	display: block;
	height: 20px;
	width: 20px;
	background: white;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

.dots:nth-child(2) > span {
	top: calc(20px * 1);
}

.dots:nth-child(3) > span {
	top: calc(20px * 2);
}

.dots:nth-child(4) > span {
	top: calc(20px * 3);
}

.dots:nth-child(5) > span {
	top: calc(20px * 4);
}

.dots:nth-child(6) > span {
	top: calc(20px * 5);
}

.dots:nth-child(7) > span {
	top: calc(20px * 6);
}

.dots:nth-child(8) > span {
	top: calc(20px * 7);
}

.dots:nth-child(9) > span {
	top: calc(20px * 8);
}

.dots:nth-child(10) > span {
	top: calc(20px * 9);
}

.dots:nth-child(11) > span {
	top: calc(20px * 10);
}

.dots:nth-child(12) > span {
	top: calc(20px * 11);
}

JavaScript

var tl = gsap.timeline({defaults: {duration: 0.25, ease: "none"}, repeat: -1});
tl.to(".dots:not(.dot-one)", {rotate: "+=30"});

tl.to(".dots:not(.dot-one):not(.dot-two)", {rotate: "+=30"});
tl.to(".dots.dot-two > span", {top: 0}, "<");

tl.to(".dots:not(.dot-one):not(.dot-two):not(.dot-three)", {rotate: "+=30"});
tl.to(".dots.dot-three > span", {top: 0}, "<");

tl.to(".dots:not(.dot-one):not(.dot-two):not(.dot-three):not(.dot-four)", {rotate: "+=30"});
tl.to(".dots.dot-four > span", {top: 0}, "<");

tl.to(".dots:not(.dot-one):not(.dot-two):not(.dot-three):not(.dot-four):not(.dot-five)", {rotate: "+=30"});
tl.to(".dots.dot-five > span", {top: 0}, "<");

tl.to(".dots:not(.dot-one):not(.dot-two):not(.dot-three):not(.dot-four):not(.dot-five):not(.dot-six)", {rotate: "+=30"});
tl.to(".dots.dot-six > span", {top: 0}, "<");

tl.to(".dots:not(.dot-one):not(.dot-two):not(.dot-three):not(.dot-four):not(.dot-five):not(.dot-six):not(.dot-seven)", {rotate: "+=30"});
tl.to(".dots.dot-seven > span", {top: 0}, "<");

tl.to(".dots:not(.dot-one):not(.dot-two):not(.dot-three):not(.dot-four):not(.dot-five):not(.dot-six):not(.dot-seven):not(.dot-eight)", {rotate: "+=30"});
tl.to(".dots.dot-eight > span", {top: 0}, "<");

tl.to(".dots:not(.dot-one):not(.dot-two):not(.dot-three):not(.dot-four):not(.dot-five):not(.dot-six):not(.dot-seven):not(.dot-eight):not(.dot-nine)", {rotate: "+=30"});
tl.to(".dots.dot-nine > span", {top: 0}, "<");

tl.to(".dots:not(.dot-one):not(.dot-two):not(.dot-three):not(.dot-four):not(.dot-five):not(.dot-six):not(.dot-seven):not(.dot-eight):not(.dot-nine):not(.dot-ten)", {rotate: "+=30"});
tl.to(".dots.dot-ten > span", {top: 0}, "<");

tl.to(".dots:not(.dot-one):not(.dot-two):not(.dot-three):not(.dot-four):not(.dot-five):not(.dot-six):not(.dot-seven):not(.dot-eight):not(.dot-nine):not(.dot-ten):not(.dot-eleven)", {rotate: "+=30"});
tl.to(".dots.dot-eleven > span", {top: 0}, "<");

tl.to(".dots:not(.dot-one):not(.dot-two):not(.dot-three):not(.dot-four):not(.dot-five):not(.dot-six):not(.dot-seven):not(.dot-eight):not(.dot-nine):not(.dot-ten):not(.dot-eleven):not(.dot-twelve)", {rotate: "+=30"});
tl.to(".dots.dot-twelve > span", {top: 0}, "<");

tl.to(".dots.dot-one", {rotate: "+=30"});
tl.to(".dots.dot-one > span", {top: 220}, "<");

tl.to(".dots.dot-one, .dots.dot-two", {rotate: "+=30"});
tl.to(".dots.dot-two > span", {top: 200}, "<");

tl.to(".dots.dot-one, .dots.dot-two, .dots.dot-three", {rotate: "+=30"});
tl.to(".dots.dot-three > span", {top: 180}, "<");

tl.to(".dots.dot-one, .dots.dot-two, .dots.dot-three, .dots.dot-four", {rotate: "+=30"});
tl.to(".dots.dot-four > span", {top: 160}, "<");

tl.to(".dots.dot-one, .dots.dot-two, .dots.dot-three, .dots.dot-four, .dots.dot-five", {rotate: "+=30"});
tl.to(".dots.dot-five > span", {top: 140}, "<");

tl.to(".dots.dot-one, .dots.dot-two, .dots.dot-three, .dots.dot-four, .dots.dot-five, .dots.dot-six", {rotate: "+=30"});
tl.to(".dots.dot-six > span", {top: 120}, "<");

tl.to(".dots.dot-one, .dots.dot-two, .dots.dot-three, .dots.dot-four, .dots.dot-five, .dots.dot-six, .dots.dot-seven", {rotate: "+=30"});
tl.to(".dots.dot-seven > span", {top: 100}, "<");

tl.to(".dots.dot-one, .dots.dot-two, .dots.dot-three, .dots.dot-four, .dots.dot-five, .dots.dot-six, .dots.dot-seven, .dots.dot-eight", {rotate: "+=30"});
tl.to(".dots.dot-eight > span", {top: 80}, "<");

tl.to(".dots.dot-one, .dots.dot-two, .dots.dot-three, .dots.dot-four, .dots.dot-five, .dots.dot-six, .dots.dot-seven, .dots.dot-eight, .dots.dot-nine", {rotate: "+=30"});
tl.to(".dots.dot-nine > span", {top: 60}, "<");

tl.to(".dots.dot-one, .dots.dot-two, .dots.dot-three, .dots.dot-four, .dots.dot-five, .dots.dot-six, .dots.dot-seven, .dots.dot-eight, .dots.dot-nine, .dots.dot-ten", {rotate: "+=30"});
tl.to(".dots.dot-ten > span", {top: 40}, "<");

tl.to(".dots.dot-one, .dots.dot-two, .dots.dot-three, .dots.dot-four, .dots.dot-five, .dots.dot-six, .dots.dot-seven, .dots.dot-eight, .dots.dot-nine, .dots.dot-ten, .dots.dot-eleven", {rotate: "+=30"});
tl.to(".dots.dot-eleven > span", {top: 20}, "<");

tl.to(".dots.dot-one, .dots.dot-two, .dots.dot-three, .dots.dot-four, .dots.dot-five, .dots.dot-six, .dots.dot-seven, .dots.dot-eight, .dots.dot-nine, .dots.dot-ten, .dots.dot-eleven, .dots.dot-twelve", {rotate: "+=30"});
tl.to(".dots.dot-twelve > span", {top: 0}, "<");

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