3D加载

下载代码

html

css

分享到微信朋友圈

html

css

@import url('https://fonts.googleapis.com/css?family=Germania+One');
	body {
	margin:0px;
	background-color:#C31049;
	overflow-y:hidden;
}
.alfa {
	position:absolute;
	top:50%;
	left:50%;
	width:400px;
	height:400px;
	margin-left:-200px;
	margin-top:-200px;
	perspective:1000px;
	transform-style:preserve-3d;
}
.mov {
	position:absolute;
	top:0px;
	left:0px;
	width:400px;
	height:400px;
	animation-name:rod;
	animation-duration:10s;
	animation-iteration-count:infinite;
	transform-style:preserve-3d;
}
@keyframes rod {
	0% {
	transform:rotateY( -20deg ) rotateX( 20deg )
}
25% {
	transform:rotateY( 20deg ) rotateX( 20deg )
}
50% {
	transform:rotateY( 20deg ) rotateX( -20deg )
}
75% {
	transform:rotateY( -20deg ) rotateX( -20deg )
}
100% {
	transform:rotateY( -20deg ) rotateX( 20deg )
}
}.frente {
	position:absolute;
	top:50px;
	left:50px;
	width:300px;
	height:300px;
	border-radius:50%;
	background-color:rgba( 255,255,255,.2);
	transform:translateZ( 30px );
}
.tras {
	position:absolute;
	top:20px;
	left:20px;
	width:360px;
	height:360px;
	border-radius:50%;
	background-color:rgba( 0,0,0,.2);
	transform:translateZ( -30px );
	animation-name:shadow;
	animation-duration:10s;
	animation-iteration-count:infinite;
	transform-style:preserve-3d;
}
@keyframes shadow {
	0% {
	box-shadow:30px 30px 40px rgba( 0,0,0,.7);
}
25% {
	box-shadow:-30px 30px 40px rgba( 0,0,0,.7);
}
50% {
	box-shadow:-30px -30px 40px rgba( 0,0,0,.7);
}
75% {
	box-shadow:30px -30px 40px rgba( 0,0,0,.7);
}
100% {
	box-shadow:30px 30px 40px rgba( 0,0,0,.7);
}
}.meio {
	position:absolute;
	top:10px;
	left:10px;
	width:380px;
	height:380px;
	border-left:5px solid #ddd;
	border-radius:50%;
	animation-name:loading;
	animation-duration:1s;
	animation-iteration-count:infinite;
}
@keyframes loading {
	to {
	transform:none
}
from {
	transform:rotate( 360deg )
}
}.frente p {
	text-align:center;
	color:#fff;
	font-size:50pt;
	font-family:'Germania One',cursive;
	margin-top:115px;
	text-shadow:0px 0px 10px #000;
}

JavaScript

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