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

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

代码语言：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;
	.........完整代码请登录后点击上方下载按钮下载查看