div+css实现逼真金属按钮旋转动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：div+css实现逼真金属按钮旋转动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
    .ldr {
	position:relative;
	width:200px;
	height:200px;
	top:50%;
	left:50%;
	margin-top:-100px;
	margin-left:-100px
}
.loader {
	z-index:-1;
	width:200px;
	height:200px;
	border-radius:50%;
	background:#45484d;
	background:-moz-radial-gradient(center,ellipse cover,#45484d 0,black 100%);
	background:-webkit-gradient(radial,center center,0px,center center,100%,color-stop(0%,#45484d),color-stop(100%,black));
	background:-webkit-radial-gradient(center,ellipse cover,#45484d 0,black 100%);
	background:-o-radial-gradient(center,ellipse cover,#45484d 0,black 100%);
	background:-ms-radial-gradient(center,ellipse cover,#45484d 0,black 100%);
	background:radial-gradient(ellipse at center,#45484d 0,black 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#45484d",endColorstr="#000000",GradientType=1);
	overflow:hidden;
	box-shadow:0 0 60px 0 rgba(0,0,0,0.32),inset 0 0 10px 0 rgba(0,0,0,0.7)
}
.loader:after {
	position:absolute;
	left:25px;
	top:25px;
	z-index:99999;
	border-radius:50%;
	box-shadow:0 0 10px 0 rgba(0,0,0,0.1);
	background-image:-webkit-radial-gradient(50% 0,8% 50%,rgba(255,255,255,0.5) 0,rgba(255,255,255,0) 100%),-webkit-radial-gradient(50% 100%,12% 50%,rgba(255,255,255,0.6) 0,rgba(255,255,255,0) 100%),-webkit-radial-gradient(0% 50%,50% 7%,rgba(255,255,255,0.5) 0,rgba(255,255,255,0) 100%),-webkit-radial-gradient(100% 50%,50% 5%,rgba(255,255,255,0.5) 0,rgba(255,255,255,0) 100%),-webkit-repeating-radial-gradient(50% 50%,100% 100%,rgba(0,0,0,0) 0,rgba(0,0,0,0) 3%,rgba(0,0,0,0.1) 3.5%),-webkit-repeating-radial-gradient(50% 50%,100% 100%,rgba(255,255,255,0) 0,rgba(255,255,255,0) 6%,rgba(255,255,255,0.1) 7.5%),-webkit-repeating-radial-gradient(50% 50%,100% 100%,rgba(255,255,255,0) 0,rgba(255,255,255,0) 1.2%,rgba(255,255,255,0.2) 2.2%),-webkit-radial-gradient(50% 50%,200% 50%,#e6e6e6 5%,#d9d9d9 30%,#999 100%);
	-webkit-animation-name:pulseGlow;
	-webkit-animation-duration:1000ms;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-direction:forward;
	-webkit-animation-timing-function:cubic-bezier(0.25,0.8,0.54,1);
	-webkit-animation-fill-mode:forwards;
	-webkit-animation-delay:250ms;
	width:150px;
	height:150px;
	overflow:hidden;
	content:""
}
.glow:nth-child(1) {
	position:absolute;
	left:50%;
	top:5px;
	z-index:99998;
	border-radius:50%;
	box-shadow:0 0 10px 0 rgba(0,0,0,0.1);
	background:0;
	box-shadow:1px 1px 0 1px rgba(52,152,219,0.8),0 0 3px 0 #3498db,1px 1px 3px 2px #3498db,1px 2px 14px 1px #3498db,1px 2px 24px 1px #3498db;
	width:0;
	height:190px;
	content:"";
	-webkit-animation-name:spin;
	-webkit-animation-duration:1000ms;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-direction:forward;
	-webkit-animation-timing-function:cubic-bezier(0.25,0.8,0.54,1);
	-webkit-animation-fill-mode:forwards;
	-webkit-animation-delay:-0.0111111111s
}
.glow:nth-child(1):not(:last-of-type) {
	opacity:.05
}
.glow:nth-child(2) {
	position:absolute;
	left:50%;
	top:5px;
	z-index:99998;
	border-radius:50%;
	box-shadow:0 0 10px 0 rgba(0,0,0,0.1);
	background:0;
	box-shadow:1px 1px 0 1px rgba(52,152,219,0.8),0 0 3px 0 #3498db,1px 1px 3px 2px #3498db,1px 2px 14px 1px #3498db,1px 2px 24px 1px #3498db;
	width:0;
	height:190px;
	content:"";
	-webkit-animation-name:spin;
	-webkit-animation-duration:1000ms;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-direction:forward;
	-webkit-animation-timing-function:cubic-bezier(0.25,0.8,0.54,1);
	-webkit-animation-fill-mode:forwards;
	-webkit-animation-delay:-0.0222222222s
}
.glow:nth-child(2):not(:last-of-type) {
	opacity:.1
}
.glow:nth-child(3) {
	position:absolute;
	left:50%;
	top:5px;
	z-index:99998;
	border-radius:50%;
	box-shadow:0 0 10px 0 rgba(0,0,0,0.1);
	background:0;
	box-shadow:1px 1px 0 1px rgba(52,152,219,0.8),0 0 3px 0 #3498db,1px 1px 3px 2px #3498db,1px 2px 14px 1px #3498db,1px 2px 24px 1px #3498db;
	width:0;
	height:190px;
	content:"";
	-webkit-animation-name:spin;
	-webkit-animation-duration:1000ms;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-direction:forward;
	-webkit-animation-timing-function:cubic-bezier(0.25,0.8,0.54,1);
	-webkit-animation-fill-mode:forwards;
	-webkit-animation-delay:-0.0333333333s
}
.glow:nth-child(3):not(:last-of-type) {
	opacity:.15
}
.glow:nth-child(4) {
	position:absolute;
	left:50%;
	top:5px;
	z-index:99998;
	border-radius:50%;
	box-shadow:0 0 10px 0 rgba(0,0,0,0.1);
	background:0;
	box-shadow:1px 1px 0 1px rgba(52,152,219,0.8),0 0 3px 0 #3498db,1px 1px 3px 2px #3498db,1px 2px 14px 1px #3498db,1px 2px 24px 1px #3498db;
	width:0;
	height:190px;
	content:"";
	-webkit-animation-name:spin;
	-webkit-animation-duration:1000ms;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-direction:forward;
	-webkit-animation-timing-function:cubic-bezier(0.25,0.8,0.54,1);
	-webkit-animation-fill-mode:forwards;
	-webkit-animation-delay:-0.0444444444s
}
.glow:nth-child(4):not(:last-of-type) {
	opacity:.2
}
.glow:nth-child(5) {
	position:absolute;
	left:50%;
	top:5px;
	z-index:99998;
	border-radius:50%;
	box-shadow:0 0 10px 0 rgba(0,0,0,0.1);
	background:0;
	box-shadow:1px 1px 0 1px rgba(52,152,219,0.8),0 0 3px 0 #3498db,1px 1px 3px 2px #3498db,1px 2px 14px 1px #3498db,1px 2px 24px 1px #3498db;
	width:0;
	height:190px;
	content:"";
	-webkit-animation-name:spin;
	-webkit-animation-duration:1000ms;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-direction:forward;
	-webkit-animation-timing-function:cubic-bezier(0.25,0.8,0.54,1);
	-webkit-animation-fill-mode:forwards;
	-webkit-animation-delay:-0.0555555556s
}
.glow:nth-child(5):not(:last-of-type) {
	opacity:.25
}
.glow:nth-child(6) {
	position:absolute;
	left:50%;
	top:5px;
	z-index:99998;
	border-radius:50%;
	box-shadow:0 0 10px 0 rgba(0,0,0,0.1);
	background:0;
	box-shadow:1px 1px 0 1px rgba(52,152,219,0.8),0 0 3px 0 #3498db,1px 1px 3px 2px #3498db,1px 2px 14px 1px #3498db,1.........完整代码请登录后点击上方下载按钮下载查看