div+css模拟手机锁屏密码输入解锁ui效果代码-html代码-BFW代码库

div+css模拟手机锁屏密码输入解锁ui效果代码

代码语言：html

代码描述：div+css模拟手机锁屏密码输入解锁ui效果代码

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

<html lang="en">

<head>
  
    <meta charset="UTF-8">
  
    <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
	margin:0;
	padding:0;
	box-sizing:border-box
}
body {
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
	width:100vw;
	height:100vh;
	background:linear-gradient(to right top,#78009c,#663eba,#4d5ed0,#2f79e1,#1291eb)
}
.device {
	position:relative;
	border-radius:16px;
	margin:0 auto;
	display:inline-block;
	transform:scale(1)
}
.device .device-bezel {
	border-radius:inherit;
	padding:36px 10px 24px 10px;
	overflow:hidden;
	background:linear-gradient(240deg,#8da4c3 0,#4f8285 30%,#070f0a 35%,#0a0606 100%);
	position:relative;
	box-sizing:content-box
}
.device .device-viewport {
	contain:strict;
	width:350px;
	height:622.2222222222px;
	background:white;
	border-radius:inherit;
	transform:scale(1)
}
* {
	font-family:"Montserrat",sans-serif;
	user-select:none
}
.container {
	background:transparent;
	height:100%
}
.content {
	background:white
}
.content img {
	height:200px;
	width:100%;
	object-fit:cover;
	object-position:center
}
.body-content {
	padding:16px
}
.body-content h3 {
	margin-bottom:16px
}
.body-content p {
	line-height:1.5em;
	margin-bottom:8px
}
.body-content button {
	width:100%;
	height:48px;
	border-radius:1000px;
	background:cyan;
	border:0;
	outline:0;
	margin-top:24px;
	cursor:pointer
}
.pin-info {
	position:fixed;
	top:0;
	left:0;
	right:0;
	background:white;
	background:#EAEAEA
}
.pin-display {
	position:fixed;
	bottom:0;
	left:0;
	right:0;
	background:white
}
.keypad {
	padding:16px;
	background:white
}
.keypad--row {
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	align-items:center
}
.keypad--button {
	font-family:"Montserrat",sans-serif;
	height:48px;
	width:100%;
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
	font-size:24px;
	font-weight:600;
	cursor:pointer;
	transition:all 100ms ease-out
}
.keypad--button:active .........完整代码请登录后点击上方下载按钮下载查看