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

代码语言:html

所属分类:动画

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

代码标签: 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-gr.........完整代码请登录后点击上方下载按钮下载查看

网友评论0