js实现一个金属密码旋钮锁效果代码-html代码-BFW代码库

js实现一个金属密码旋钮锁效果代码

代码语言：html

所属分类：其他

代码描述：js实现一个金属密码旋钮锁效果代码，在手机端预览后可在规定时间内旋转密码锁解锁

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
	<title></title>
<style>
    body{
	background: #15191f;
}
.number{
	width: 200px;height: 60px;
	position: fixed;top:10px;left: 50%;
	margin-left: -80px;
}
.number .num{
	height: 60px;text-align: center;color: #fff;
	font-size: 68px;line-height: 60px;
}
.light{
	text-align: center;
}
.light i{
	width: 20px;height: 20px;background: #ccc;
	display: inline-block; border-radius: 50%;
	margin-left: 10px;z-index: 999999;
}
.light i.on{
	background: #090;
}
.button{
	width: 360px;height: 360px;
	background:url(//repo.bfw.wiki/bfwrepo/image/60eb7375786a9.png) no-repeat;background-size: 100%;
	position: fixed;top: 50%;left: 50%;
	margin-left:-180px;margin-top: -160px;
}

.button .btn_a{
	width: 280px;height: 280px;
	background: url(//repo.bfw.wiki/bfwrepo/image/60eb7389e0b8d.png) no-repeat;background-size: 100%;
	border-radius: 50%;position: absolute;left: 50%;
	top: 50%;margin: -125px 0 0 -140px;color: #fff;
	line-height:280px; 
}
.button .btn_b{
	width: 200px;height: 200px;
	background: url(//repo.bfw.wiki/bfwrepo/image/60eb7389e0b8d.png) no-repeat;background-size: 100%;
	border-radius: 50%;position: absolute;left: 50%;
	top: 50%;margin: -85px 0 0 -100px;color: #000;
	line-height:140px;
}
.button .btn_c{
	width: 120px;height: 120px;
	background: url(//repo.bfw.wiki/bfwrepo/image/60eb7389e0b8d.png) no-repeat;background-size: 100%;
	border-radius: 50%;position: a.........完整代码请登录后点击上方下载按钮下载查看