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

代码语言：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 {
	background:#EAEAEA
}
.confirmation-dots {
	margin-bottom:48px;
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center
}
.confirmation-dots.error {
	animation-name:shake;
	animation-duration:300ms
}
.confirmation-dots svg {
	height:24px;
	max-height:24px;
	width:139px
}
.confirmation-dots .pin-circle {
	transition:all 100ms ease-out;
	fill:white;
	stroke-width:2px;
	stroke:black;
	outline-offset:-2px;
	outline-width:2px
}
.confirmation-dots .pin-circle.entered {
	fill:black
}
.confirmation-dots .pin-circle.success {
	fill:green;
	stroke:green
}
.confirmation-dots .pin-circle.error {
	fill:red;
	stroke:red
}
.circle-lock--container {
	height:72px;
	position:relative;
	display:flex;
	justify-content:center;
	flex-direction:row
}
.circle-lock {
	width:80px;
	height:80px;
	background:white;
	border-radius:1000px;
	position:relative;
	top:-40px;
	box-shadow:0 1px 1px 1px rgba(0,0,0,0.12);
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center
}
.circle-lock .lock-icon {
	color:#333
}
.page-title {
	font-size:28px;
	line-height:32px;
	text-align:center;
	font-weight:700
}
.pin-info {
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center
}
@keyframes shake {
	10%,90% {
	transform:translate3d(-1px,0,0)
}
20%,80% {
	transform:translate3d(2px,0,0)
}
30%,50%,70% {
	transform:translate3d(-4px,0,0)
}
40%,60% {
	transform:translate3d(4px,0,0)
}
}
</style>
</head>

<body>

    <div class="device">
        <div class="device-bezel">
            <div class="device-viewport">
                <!-- Begin custom content -->
                <div class="content"><img src="https://images.pexels.com/photos/373912/pexels-photo-373912.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;h=426&amp;w=640">
                    <div class="body-content">
                        <h1>Hey!you made it</h1>
                        <h3>It's good to see you!</h3>
                        <p>I just need some filler so this looks good. So I am going to add this paragraph and a button below it!</p>
                        <button id="reset-button">Reset!</button>
                    </div>
                </div>
                <div class="container">
                    <div class="pin-info" style="height: 255px;">
                        <h1 class="page-title">输入密码</h1>
                    </div>
                    <div class="pin-display">
                        <div class="circle-lock--container">
                            <div class="circle-lock">
                                <i class="material-icons lock-icon">lock</i>
                            </div>
                        </div>
                        <div class="confirmation-dots">
                            <svg>
                                <g>
                                    <circle class="pin-circle" cx="10" cy="10" r="8"></circle>
                                    <circle class="pin-circle" cx="50" cy="10" r="8"></circle>
                                    <circle class="pin-circle" cx="90" cy="10" r="8"></circle>
                                    <circle class="pin-circle" cx="130" cy="10" r="8"></circle>
                                </g>
                            </svg>
                        </div>
                        <div class="keypad">
                            <div class="keypad--row">
                                <div class="keypad--button" data-value="1">1</div>
                                <div class="keypad--button" data-value="2">2</div>
                   .........完整代码请登录后点击上方下载按钮下载查看