Trang Chủ Thiết kế website CSS

Tạo một chiếc Ipad Pro bằng CSS3

A+A-
PrintEmail
Tạo một chiếc Ipad Pro bằng CSS3
Làm thế nào để tạo giao diện website trông giống như một chiếc Ipad Pro. Cùng LaiXe.Xyz thông qua bài viết này để làm thử một chiếc IPAD bằng CSS3 nhé

Demo Ipad Pro Thiết Kế bằng CSS3

Hãy thử trải nghiệm chiếc Ipad Pro được tạo ra bằng CSS dưới đây
9:41
Saturday, August 17

Hướng dẫn thực hiện

Bước 1: Mã nguồn HTML như sau 

<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>
Bước 2: Thêm Css 

: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;
  }
}
Bước 3: Thêm Javascript sau 

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 +
    "
" +
    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);
Chúc các bạn thành công
Xem Full Code Demo tại đây
Chuyên Mục :
tháng 6 23, 2020

Mới Nhất Cùng Chuyên Mục

Bài Ngẫu Nhiên Cùng Chuyên Mục

Bình Luận

LaiXe.Xyz

Blog Lái Xe, chia sẻ thông tin về luật giao thông đường bộ, biển báo giao thông, thông tin về xe ô tô, thi bằng lái xe các hạng bằng A1, A2, B1, B2, C, D, E, F

Thi Thử Lái Xe B2 Mới Nhất

"Tiến hành giảng dạy bộ 600 câu hỏi vào tháng 06/2020 và áp dụng thi sát hạch vào tháng 10 năm 2020. Bộ đề 600 câu hỏi sẽ được phát hành dạng sách khoảng tháng 5/2020."

Blog Lái Xe

Giới Thiệu

Điều Khoản Sử Dụng

Chính Sách Bảo Mật

Sơ đồ website

Liên Kết: Spa Vung Tau | Phát Triển Bởi | LaiXe.Xyz
DMCA.com Protection Status