SOURCE

console 命令行工具 X clear

                    
>
console
function powerMe() {
  document.getElementById("inAppBar").style.bottom = "-8%";
  document.getElementById("inAppBar").style.pointerEvents = "none";
  document.getElementsByClassName("wallpaper")[0].style.backgroundImage =
    "url('https://assets.codepen.io/2722301/bg.jpg')";
  if (powerVar == 1) {
    document.getElementsByClassName("ipadScreen")[0].style.opacity = 1;
    document.getElementsByClassName("ipadScreen")[0].style.pointerEvents =
      "all";
    powerVar = 0;
    document.getElementsByClassName("lockScreen")[0].style.transition =
      "top 800ms ease-in 0s, backdrop-filter 200ms ease-in 0s";
    document.getElementsByClassName("dockWrapper")[0].style.transition =
      "bottom 400ms ease-in-out 0s";
  } else {
    document.getElementsByClassName("ipadScreen")[0].style.opacity = 0;
    document.getElementsByClassName("ipadScreen")[0].style.pointerEvents =
      "none";
    powerVar = 1;
    setTimeout(function () {
      document.getElementsByClassName("lockScreen")[0].style.transition =
        "none";
      document.getElementsByClassName("dockWrapper")[0].style.transition =
        "none";
      document.getElementsByClassName("lockScreen")[0].style.backdropFilter =
        "blur(0)";
      document.getElementsByClassName("lockScreen")[0].style.top = "0";
      document.getElementsByClassName("dockWrapper")[0].style.bottom = "-20%";
    }, 300);
  }
  resetIcons();
}
function lockClick() {
  document.getElementsByClassName("lockScreen")[0].style.backdropFilter =
    "blur(2vh) brightness(1.2)";
  document.getElementsByClassName("lockScreen")[0].style.top = "-110%";
  document.getElementsByClassName("dockWrapper")[0].style.bottom = "3%";
}
function checkTime() {
  var day = [
    "Sunday",
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday"
  ];
  var month = [
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July",
    "August",
    "September",
    "October",
    "November",
    "December"
  ];
  d = new Date();
  if (d.getMinutes() < 10) {
    minTime = "0" + d.getMinutes();
  } else {
    minTime = d.getMinutes();
  }
  document.getElementsByClassName("lockTime")[0].innerHTML =
    d.getHours() +
    ":" +
    minTime +
    "<br/>" +
    day[d.getDay()] +
    ", " +
    month[d.getMonth()] +
    " " +
    d.getDate();
  setTimeout(function () {
    checkTime();
  }, 500);
}
function goHome() {
  document.getElementById("inAppBar").style.bottom = "-8%";
  document.getElementById("inAppBar").style.pointerEvents = "none";
  document.getElementsByClassName("wallpaper")[0].style.backgroundImage =
    "url('https://assets.codepen.io/2722301/bg.jpg')";
  document.getElementsByClassName("dockWrapper")[0].style.bottom = "3%";
  resetIcons();
}
function resetIcons() {
  window.lastIcon = false;
  var x = document.getElementsByClassName("iconDiv");
  var i;
  for (i = 0; i < x.length; i++) {
    x[i].style.width = "calc(var(--sizeVar) / 20)";
    x[i].style.height = "calc(var(--sizeVar) / 20)";
    x[i].style.margin = "calc(var(--sizeVar) / 60) calc(var(--sizeVar) / 120)";
    x[i].style.pointerEvents = "all";
    x[i].getElementsByClassName("imgDiv")[0].style.opacity = 0;
    if (powerVar == 1) {
      x[i].style.transition =
        "all 0s ease-in-out 350ms, transform 100ms ease-in-out 0s";
      x[i].getElementsByClassName("imgDiv")[0].style.transition =
        "opacity 0s linear 350ms";
    } else {
      x[i].style.transition =
        "all 500ms ease-in-out 0s, transform 100ms ease-in-out 0s";
      x[i].getElementsByClassName("imgDiv")[0].style.transition =
        "opacity 300ms linear 0s";
    }
  }
}
function iconClick(e) {
  var x = document.getElementsByClassName("iconDiv");
  var i;
  for (i = 0; i < x.length; i++) {
    x[i].style.width = 0;
    x[i].style.height = 0;
    x[i].style.margin = 0;
    x[i].style.pointerEvents = "none";
    x[i].getElementsByClassName("imgDiv")[0].style.opacity = 0;
  }
  if (window.lastIcon) {
    e.target.style.width = "calc(var(--sizeVar) * 1)";
  } else {
    e.target.style.width = "calc(var(--sizeVar) * .96)";
  }
  e.target.style.height = "calc(var(--sizeVar) * .74)";
  e.target.style.marginLeft = "calc(var(--sizeVar) / 35)";
  document.getElementsByClassName("dockWrapper")[0].style.bottom = 0;
  e.target.getElementsByClassName("imgDiv")[0].style.opacity = 1;
  document
    .getElementById("inAppBar")
    .style.setProperty("--colorMe", window.barColor);
  document.getElementById("inAppBar").style.bottom = "0";
  document.getElementById("inAppBar").style.pointerEvents = "all";
  setTimeout(function () {
    document.getElementsByClassName("wallpaper")[0].style.backgroundImage =
      "none";
  }, 500);
}
function iconFClick(e) {
  window.lastIcon = true;
  iconClick(event);
}
powerVar = 0;
setTimeout(function () {
  document.getElementsByClassName("ipadScreen")[0].style.opacity = 1;
}, 1000);
<body onload="checkTime();">
  <div class="ipadBox">
    <button class="powerButton" onclick="powerMe();">I</button>
    <div class="ipadScreen">
      <div class="wallpaper">
        <div class="statusBar"></div>
        <div class="dockWrapper">
          <div class="dockbar">
            <div class="iconDiv" onclick="window.barColor='white';iconClick(event);">
              <div class="imgDiv"></div>
            </div>
            <div class="iconDiv" onclick="window.barColor='white';iconClick(event);">
              <div class="imgDiv"></div>
            </div>
            <div class="iconDiv" onclick="window.barColor='black';iconClick(event);">
              <div class="imgDiv"></div>
            </div>
            <div class="iconDivide"></div>
            <div class="iconDiv" onclick="window.barColor='black';iconFClick(event);">
              <div class="imgDiv"></div>
            </div>
            <div class="iconDiv" onclick="window.barColor='white';iconFClick(event);">
              <div class="imgDiv"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="lockScreen" onclick="lockClick();">
        <div class="lockContent">
          <div class="statusBar"></div>
          <div class="lockIcon"></div>
          <div class="lockTime">9:41<br />Saturday, August 17</div>
        </div>
        <div class="interactionBar"></div>
      </div>
      <div class="interactionBar" id="inAppBar" onclick="goHome();"></div>
    </div>
  </div>
</body>
: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%;
  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: 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;
  transition: opacity 300ms linear;
}
.wallpaper,
.lockContent {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-image: url("https://assets.codepen.io/2722301/bg.jpg");
  background-size: cover;
  background-position: center;
  background-color: black;
}
.lockScreen {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  cursor: pointer;
  overflow: hidden;
  backdrop-filter: blur(0);
  transition: top 800ms ease-in 0s, backdrop-filter 200ms ease-in 0s;
}
.lockContent {
  background: none;
}
.statusBar {
  width: 100%;
  height: 3%;
  background-image: url("status.png");
  background-position: right;
  background-size: 11.6%;
  background-repeat: no-repeat;
}
.lockIcon {
  width: 100%;
  height: 5%;
  background-image: url("https://assets.codepen.io/2722301/lock.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%;
  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 {
  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;
  animation: interTextAnim 8000ms ease-in infinite;
}
.dockWrapper {
  position: absolute;
  bottom: -20%;
  width: 100%;
  align-items: center;
  justify-content: center;
  display: flex;
  transition: bottom 400ms ease-in-out 0s;
}
.dockWrapper .dockbar {
  display: inline-flex;
  padding: 0 calc(var(--sizeVar) / 120);
  border-radius: calc(var(--sizeVar) / 40);
  background-color: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(1vh);
}
.dockbar .iconDiv,
.dockbar .iconDivide {
  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;
  transition: all 500ms ease-in-out 0s, transform 100ms ease-in-out 0s;
  overflow: hidden;
  background-image: url(https://assets.codepen.io/2722301/icon_sf.png);
  background-repeat: no-repeat;
  background-size: cover;
}
.iconDiv:nth-of-type(2) {
  background-image: url(https://assets.codepen.io/2722301/icon_tw.png);
}
.iconDiv:nth-of-type(3) {
  background-image: url(https://assets.codepen.io/2722301/icon_fb.png);
}
.iconDiv:nth-of-type(5) {
  background-image: url(https://assets.codepen.io/2722301/icon_md.png);
}
.iconDiv:nth-of-type(6) {
  background-image: url(https://assets.codepen.io/2722301/icon_cm.png);
}
.dockbar .iconDivide {
  width: calc(var(--sizeVar) / 200);
  background-color: rgba(255, 255, 255, 0.1);
}
.dockbar .iconDiv:hover {
  transform: scale(1.1);
}
.iconDiv .imgDiv {
  position: relative;
  border: none;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image: url(https://assets.codepen.io/2722301/img_sf.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  transition: opacity 300ms linear 0s;
}
.iconDiv:nth-of-type(2) .imgDiv {
  background-image: url(https://assets.codepen.io/2722301/img_tw.jpg);
}
.iconDiv:nth-of-type(3) .imgDiv {
  background-image: url(https://assets.codepen.io/2722301/img_fb.jpg);
}
.iconDiv:nth-of-type(5) .imgDiv {
  background-image: url(https://assets.codepen.io/2722301/img_md.jpg);
}
.iconDiv:nth-of-type(6) .imgDiv {
  background-image: url(https://assets.codepen.io/2722301/img_cm.jpg);
}
.dockWrapper {
  transition: all 500ms linear;
}
@keyframes interactionAnim {
  0% {
    top: 0;
  }
  70% {
    top: 0;
  }
  80% {
    top: -50%;
  }
  92% {
    top: 0;
  }
  100% {
    top: 0;
  }
}
@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;
  }
}