Html
    Css
    Js

    
                        
.loadpage {
	position:fixed;
	left:0;
	top:0;
	right:0;
	bottom:0;
	background:#fff;
	z-index:999;
}
.load {
	width:200px;
	height:200px;
	position:fixed;
	left:50%;
	top:50%;
	margin-left:-100px;
	margin-top:-200px;
}
.load p {
	width:100%;
	color:red;
	position:absolute;
	bottom:-200px;
	left:0;
	text-align:center;
}
.load:before {
	content:'';
	display:block;
	width:10px;
	height:200px;
	background:#f5f5f5;
	position:absolute;
	left:50%;
	margin-left:-5px;
	top:50%;
}
.load:after {
	content:'';
	display:block;
	width:8px;
	height:8px;
	border:8px solid #fff;
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-12px;
	margin-top:-12px;
	border-radius:50%;
	z-index:10;
}
.load .fan {
	width:50px;
	height:100px;
	overflow:hidden;
	position:absolute;
	z-index:9;
	background:#35ada3;
	-webkit-animation:zhuan 2s linear infinite;
	animation:zhuan 2s linear infinite;
}
.load .fan:before {
	content:'';
	display:block;
	position:absolute;
	width:100px;
	height:100px;
	background:#bc413c;
	overflow:hidden;
	box-shadow:0 0 2px 4px rgba(0,0,0,0.1) inset;
}
.load .fan:nth-of-type(1) {
	left:50px;
	top:0;
	border-radius:60px 0 0 0;
	-webkit-transform-origin:50px 100px;
	transform-origin:50px 100px;
}
.load .fan:nth-of-type(1):before {
	border-radius:60px 0 0 240px;
}
.load .fan:nth-of-type(2) {
	width:100px;
	height:50px;
	left:50%;
	top:50px;
	border-radius:0 60px 0 0;
	background:#f2c757;
	-webkit-transform-origin:0 50px;
	transform-origin:0 50px;
}
.load .fan:nth-of-type(2):before {
	border-radius:240px 60px  0 0;
}
.load .fan:nth-of-type(3) {
	left:50%;
	top:50%;
	border-radius:0 0 60px 0;
	-webkit-transform-origin:0 0;
	transform-origin:0 0;
}
.load .fan:nth-of-type(3):before {
	left:-50px;
	border-radius:0 240px 60px 0;
}
.load .fan:nth-of-type(4) {
	width:100px;
	height:50px;
	left:0;
	top:50%;
	border-radius:0 0 0 60px;
	background:#f2c757;
	-webkit-transform-origin:100px 0;
	transform-origin:100px 0;
}
.load .fan:nth-of-type(4):before {
	top:-50px;
	border-radius:0 0 250px 60px;
}
@-webkit-keyframes zhuan {
	0% {
	transform:rotate(0deg)
}
to {
	transform:rotate(-1turn)
}
}@keyframes zhuan {
	0% {
	transform:rotate(0deg)
}
to {
	transform:rotate(-1turn)
}
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

纯css实现风车加载loading载入页面(原创)

更新时间:2021-01-13 22:52:03

此风车效果,用到了css3的自定义动画、旋转、圆角、阴影效果来实现

0