css模拟手机iphone14Pro

1234Wu

于 2023-06-17 22:34:11 发布

阅读量1.4k

点赞数

分类专栏： # CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/qq_42866164/article/details/131265533

版权

CSS 专栏收录该内容

19 篇文章

订阅专栏

这是一个使用Vue编写的组件，用于展示一个模拟的iPhone设备界面。组件包含一个内容区域，用el-image展示图片，支持填充fit=fill，以及模拟的设备边框、顶部和底部的条纹、传感器、按钮和电源指示器。样式使用SCSS编写，提供了详细的CSS样式来实现逼真的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

预览：

在这里插入图片描述

代码（vue）：

<template>
  <div class="device iphone">
    <div class="frame">
      <div class="content">
        <el-image style="width: 100%; height: 100%;" :src="contentImg" fit="fill"></el-image>
      </div>
    </div>
    <div class="stripe"></div>
    <div class="header">
      <div class="sensors"></div>
    </div>
    <div class="btns"></div>
    <div class="power"></div>
  </div>
</template>

<script>
export default {
  props: {
    contentImg: {
      // type: String,
      default: ''
    },
  }

}
</script>

<style lang="scss" scoped>
// * {
//   margin: 0;
//   padding: 0;
// }

.device *,
.device *::before,
.device *::after {
  box-sizing: border-box;
  display: block;
}

// .device {
//   margin: 50px auto;
//   position: relative;
// }

.device .frame {
  z-index: 1;
}

.iphone {
  height: 324px;
  width: 170px;
  transform: scale(0.9);
  display: inline-block;
}

.iphone .frame {
  background: #222;
  border-radius: 27px;
  box-shadow: inset 0 0 0 2px #606467, inset 0 0 0 4px #e2e3e4;
  height: 324px;
  padding: 10px;
  width: 170px;
}

.iphone .content {
  background-color: #fff;
  border-radius: 16px;
  height: 304px;
  position: relative;
  width: 150px;
  overflow: hidden;
}

.iphone .stripe::after,
.iphone .stripe::before {
  border: solid rgba(51, 51, 51, .25);
  border-width: 0 6px;
  content: "";
  height: 5px;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 9;
}

.iphone .stripe::after {
  top: 68px;
}

.iphone .stripe::before {
  bottom: 68px;
}

.iphone .header {
  background: #222;
  height: 17px;
  left: 56%;
  margin-left: -41px;
  position: absolute;
  top: 12px;
  width: 66px;
  z-index: 199;
  border-radius: 15px;
}

.iphone .header::after {
  background: radial-gradient(circle at bottom left, transparent 0, transparent 75%, #222 75%, #222 100%);
  left: -3px;
}

.iphone .header::before {
  background: radial-gradient(circle at bottom right, transparent 0, transparent 75%, #222 75%, #222 100%);
  right: -3px;
}

.iphone .sensors::after,
.iphone .sensors::before {
  content: "";
  position: absolute;
}

.iphone .sensors::before {
  background: #444;
  border-radius: 50%;
  height: 5px;
  left: 50%;
  margin-left: 20px;
  top: 7px;
  width: 5px;
  background: radial-gradient(circle at 70% 30%, #6b7bc3, #4c2290 10%, #5256a1, transparent);
  box-shadow: 0 0 2px #131420,
    0 0 2px #131420 inset,
    2px 0 4px #5256a1 inset;
}

.iphone .btns {
  background: #606467;
  height: 13px;
  left: -1px;
  position: absolute;
  top: 46px;
  width: 1px;
}

.iphone .btns::after,
.iphone .btns::before {
  background: #606467;
  content: "";
  height: 25px;
  left: 0;
  position: absolute;
  width: 2px;
}

.iphone .btns::after {
  top: 24px;
}

.iphone .btns::before {
  top: 56px;
}

.iphone .power {
  background: #606467;
  height: 40px;
  position: absolute;
  right: -1px;
  top: 80px;
  width: 1px;
}
</style>