div+css实现逼真手机效果代码-html代码-BFW代码库

div+css实现逼真手机效果代码

代码语言：html

代码描述：div+css实现逼真手机效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap");
html {
  font-size: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -ms-overflow-style: scrollbar;
  height: 100%;
  scroll-behavior: smooth;
}

*,
*::before,
*::after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

.container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding-top: 40px;
  padding-bottom: 40px;
}

.row {
  display: flex;
}

.col {
  width: 100%;
  flex: 1;
}

.phone {
  background: #000;
  border-radius: 28px;
  padding: 12px;
  width: 320px;
  min-height: 568px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  position: relative;
  margin: 0 auto;
  zoom: 1.1;
  color: #000;
  font-family: "Roboto", sans-serif;
}
.phone .screen .screen-top {
  position: relative;
  z-index: 99;
}
.phone .screen .screen-menu {
  left: 1rem;
  min-height: 40px;
  position: absolute;
  width: calc(100% - 2rem);
  bottom: 1rem;
  display: flex;
}
.phone .screen .screen-menu .icon-wrap {
  flex: 1;
}
.phone .screen .screen-menu .icon-wrap .icon {
  width: 40px;
  height: 40px;
  background: #fff;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
  position: relative;
  cursor: pointer;
}
.phone.ios .screen {
  background: #fff;
  min-height: 590px;
  border-radius: 18px;
  background: url(//repo.bfw.wiki/bfwrepo/images/phone/phone-bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  overflow: hidden;
}
.phone.ios .screen .screen-top {
  padding: 5px 20px;
  position: relative;
}
.phone.ios .screen .screen-top .time {
  font-size: 12px;
.........完整代码请登录后点击上方下载按钮下载查看