ipad pro模拟锁屏打开app界面效果-html代码-BFW代码库

ipad pro模拟锁屏打开app界面效果

代码语言：html

代码描述：ipad pro模拟锁屏打开app界面效果

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
:root {
  --sizeVar: 90vmin;
}
.ipadBox {
  position: absolute;
  width: var(--sizeVar);
  height: calc(var(--sizeVar) * 0.77);
  background-color: #121212;
  border-radius: calc(var(--sizeVar) / 24);
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  box-shadow: 0 0 0 calc(var(--sizeVar) / 200) #9d9ea0;
}
.ipadBox::before,
.ipadBox::after {
  content: "";
  position: absolute;
  width: 4%;
  height: 1%;
  left: 6%;
  top: -1.2%;
  border-radius: calc(var(--sizeVar) / 24) calc(var(--sizeVar) / 24) 0 0;
}
.ipadBox::after {
  left: 11%;
}
.ipadBox::before,
.ipadBox::after,
.powerButton {
  background-color: #8a8a8a;
  z-index: -1;
}
.powerButton {
  position: absolute;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: 7%;
  left: -1.5vmin;
  top: 5%;
  padding: 0;
  padding-right: 0.5vmin;
  border: none;
  outline: none;
  cursor: pointer;
  color: transparent;
  border-radius: calc(var(--sizeVar) / 24) 0 0 calc(var(--sizeVar) / 24);
}
.powerButton::after {
  content: "";
  position: absolute;
  width: 200%;
  height: 150%;
  top: -25%;
  left: -100%;
}
.ipadScreen {
  position: absolute;
  width: 95%;
  height: 93.6%;
  top: 3.2%;
  left: 2.5%;
  border-radius: calc(var(--sizeVar) / 40);
  background-color: #aaaaaa;
  opacity: 0;
  overflow: hidden;
  -webkit-transition: opacity 300ms linear;
  transition: opacity 300ms linear;
}
.wallpaper,
.lockContent {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-image: url("http://repo.bfw.wiki/bfwrepo/image/5ef16bc8e6ab0.png");
  background-size: cover;
  background-position: center;
  background-color: black;
}
.lockScreen {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  cursor: pointer;
  overflow: hidden;
  -webkit-backdrop-filter: blur(0);
          backdrop-filter: blur(0);
  -webkit-transition: top 800ms ease-in 0s, -webkit-backdrop-filter 200ms ease-in 0s;
  transition: top 800ms ease-in 0s, -webkit-backdrop-filter 200ms ease-in 0s;
  transition: top 800ms ease-in 0s, backdrop-filter 200ms ease-in 0s;
  transition: top 800ms ease-in 0s, backdrop-filter 200ms ease-in 0s, -webkit-backdrop-filter 200ms ease-in 0s;
}
.lockContent .........完整代码请登录后点击上方下载按钮下载查看