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

代码语言：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 {
  background: none;
}
.statusBar {
  width: 100%;
  height: 3%;
  
  background-position: right;
  background-size: 11.6%;
  background-repeat: no-repeat;
}
.lockIcon {
  width: 100%;
  height: 5%;
  background-image: url("http://repo.bfw.wiki/bfwrepo/image/5ef16d00282a8.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.lockTime {
  width: 100%;
  font-family: "Work Sans", sans-serif;
  font-weight: 200;
  font-size: calc(var(--sizeVar) / 46);
  color: white;
  text-align: center;
  line-height: 250%;
  margin-top: 3%;
}
.lockTime::first-line {
  font-size: calc(var(--sizeVar) / 10.5);
}
.interactionBar {
  --colorMe: white;
  position: absolute;
  bottom: -8%;
  height: 3%;
  width: 100%;
  -webkit-transition: bottom 800ms ease-in 0s;
  transition: bottom 800ms ease-in 0s;
}
.lockScreen .interactionBar {
  bottom: 0;
}
#inAppBar {
  cursor: pointer;
}
.interactionBar::after {
  content: "";
  position: absolute;
  width: 28%;
  height: 30%;
  top: 0;
  margin-left: 36%;
  border-radius: 100px;
  background-color: var(--colorMe);
}
.lockScreen .interactionBar::after {
  -webkit-animation: interactionAnim 8000ms ease-in infinite;
          animation: interactionAnim 8000ms ease-in infinite;
}
.lockScreen .interactionBar::before {
  position: absolute;
  width: 100%;
  top: -140%;
  text-align: center;
  color: white;
  content: "swipe up to open";
  font-size: calc(var(--sizeVar) / 46);
  font-family: "Work Sans", sans-serif;
  font-weight: 200;
  -webkit-animation: interTextAnim 8000ms ease-in infinite;
          animation: interTextAnim 8000ms ease-in infinite;
}
.dockWrapper {
  position: absolute;
  bottom: -20%;
  width: 100%;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  display: -webkit-box;
  display: flex;
  -webkit-transition: bottom 400ms ease-in-out 0s;
  transition: bottom 400ms ease-in-out 0s;
}
.dockWrapper .dockbar {
  display: -webkit-inline-box;
  display: inline-flex;
  padding: 0 calc(var(--sizeVar) / 120);
  border-radius: calc(var(--sizeVar) / 40);
  background-color: rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(1vh);
          backdrop-filter: blur(1vh);
}
.dockbar .iconDiv,
.dockbar .iconDivide {
  display: -webkit-inline-box;
  display: inline-flex;
  width: calc(var(--sizeVar) / 20);
  height: calc(var(--sizeVar) / 20);
  margin: calc(var(--sizeVar) / 60) calc(var(--sizeVar) / 120);
  border-radius: calc(var(--sizeVar) / 80);
}
.dockbar .iconDiv {
  background-color: #ffffff;
  cursor: pointer;
  -webkit-transition: all 500ms ease-in-out 0s, -webkit-transform 100ms ease-in-out 0s;
  transition: all 500ms ease-in-out 0s, -webkit-transform 100ms ease-in-out 0s;
  transition: all 500ms ease-in-out 0s, transform 100ms ease-in-out 0s;
  transition: all 500ms ease-in-out 0s, transform 100ms ease-in-out 0s, -webkit-transform 100ms ease-in-out 0s;
  overflow: hidden;
  background-image: url(http://repo.bfw.wiki/bfwrepo/image/5ef16d5387cf4.png);
  background-repeat: no-repeat;
  background-size: cover;
}


.iconDiv:nth-of-type(2) {
  background-image: url(http://repo.bfw.wiki/bfwrepo/image/5ef16eeb891cd.png);
}
.dockbar .iconDivide {
  width: calc(var(--sizeVar) / 200);
  background-color: rgba(255, 255, 255, 0.1);
}
.dockbar .iconDiv:hover {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.iconDiv .imgDiv {
  position: relative;
  border: none;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image: url(http://repo.bfw.wiki/bfwrepo/image/5ef17346209cd.png);
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  -webkit-transition: opacity 300ms linear 0s;
  transition: opacity 300ms linear 0s;
}

.iconDiv:nth-of-type(2) .imgDiv {
  background-image: url(http://repo.bfw.wiki/bfwrepo/image/5ef16eb915438.png);
}
.dockWrapper {
  -webkit-transition: all 500ms linear;
  transition: all 500ms linear;
}
@-webkit-keyframes interactionAnim {
  0% {
    top: 0;
  }
  70% {
    top: 0;
  }
  80% {
    top: -50%;
  }
  92% {
    top: 0;
  }
  100% {
    top: 0;
  }
}
@keyframes interactionAnim {
  0% {
    top: 0;
  }
  70% {
    top: 0;
  }
  80% {
    top: -50%;
  }
  92% {
    top: 0;
  }
  100% {
    top: 0;
  }
}
@-webkit-keyframes interTextAnim {
  0% {
    top: -100%;
    opacity: 0;
  }
  70% {
    top: -100%;
    opacity: 0;
  }
  80% {
    top: -200%;
    opacity: 1;
  }
  90% {
    top: -200%;
    opacity: 1;
  }
  100% {
    top: -200%;
    opacity: 0;
  }
}
@keyframes interTextAnim {
  0% {
    top: -100%;
    opacity: 0;
  }
  70% {
    top: -100%;
    opacity: 0;
  }
  80% {
    top: -200%;
    opacity: 1;
  }
  90% {
    top: -200%;
    opacity: 1;
  }
  100% {
.........完整代码请登录后点击上方下载按钮下载查看