CSS写一个手机

最新推荐文章于 2023-06-29 16:50:11 发布

yq2256116

最新推荐文章于 2023-06-29 16:50:11 发布

阅读量1.3k

点赞数 2

文章标签： css html css3

本文链接：https://blog.csdn.net/yq2256116/article/details/123282254

版权

手机外形上来说就是长方形，然后加上圆角边框，如果是简单的平面图形，几分钟就可以用html标签和css写一个手机模型。但如果有高光，菱角等让手机展示的更逼真，可以用到css背景渐变属性。

预览页面：CSS画手机

先看看效果图：

手机完整代码：

<div class="phone">
  <div class="box">   
  </div>
  <!--other begin-->
  <div class="volume"></div>
  <div class="power"></div>
  <div class="camera"></div>
  <div class="receiver">
    <div></div>
  </div>
  <!--other end--> 
</div>


.phone {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 400px;
    height: 800px;
    margin-top: -400px;
    margin-left: -200px;
    border: 20px solid #000;
    border-radius: 60px;
}

.phone:before {
    content: "";
    position: absolute;
    width: 421px;
    height: 815px;
    box-shadow: 0px 0px 24px #fff;
    border-radius: 45px;
    left: -10px;
    top: -8px;
}

.phone:after {
    content: "";
    position: absolute;
    width: 382px;
    height: 751px;
    border: 16px solid #19191d;
    background: #19191d;
    border-top: 30px solid #19191d;
    border-bottom: 30px solid #19191d;
    border-radius: 41px;
    left: -6px;
    top: -6px;
}

.box {
    position: absolute;
    border: #19191d 1px solid;
    width: 423px;
    height: 817px;
    left: -12px;
    top: -10px;
    z-index: 9;
    border-radius: 50px;
    box-shadow: #2e2c2c 0 0 14px;
}

.box:before {
    content: "";
    position: absolute;
    width: 410px;
    height: 789px;
    border-radius: 50px;
    top: 10px;
    left: 6px;
    z-index: -1;
    background-size: 100%;
    background-position: bottom;
    background-image: linear-gradient(45deg, #46a7c0 50%, #185c92 50%, #185c92 100%);
}

.volume {
    width: 9px;
    height: 100px;
    border: #000 1px solid;
    background: linear-gradient(#8c8c8c, #000 9%, #222, #000 94%, #353535 100%);
    position: absolute;
    right: -25px;
    top: 125px;
    z-index: -1;
    border-radius: 20px;
}

.power {
    width: 9px;
    height: 46px;
    border: #000 1px solid;
    background: linear-gradient(#8c8c8c, #000 9%, #222, #000 94%, #353535 100%);
    position: absolute;
    right: -25px;
    top: 260px;
    z-index: -1;
    border-radius: 20px;
}

.receiver {
    position: absolute;
    top: -13px;
    left: 50%;
    margin-left: -50px;
    background: #000000;
    border: #484848 1px solid;
    width: 100px;
    height: 8px;
    z-index: 9;
    border-radius: 20px;
}

.receiver ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    margin: 1px;
    justify-content: space-around;
}

.receiver ul li {
    background: #303030;
    width: 1px;
    height: 1.5px;
    float: left;
    transform: skewX(-38deg);
}

.camera {
    position: absolute;
    width: 22px;
    height: 22px;
    background: #19191d;
    border-radius: 100%;
    top: 10px;
    left: 20px;
    z-index: 9;
}


.receiver div {
    width: 100px;
    height: 8px;
}

.receiver div:after {
    content: "";
    display: block;
    width: 95%;
    height: 83%;
    top: 1px;
    left: 3px;
    position: absolute;
    background-repeat: no-repeat;
    background-image: repeating-linear-gradient(to right, #434242, #000000 1px, rgba(255,255,255,0) 1px, rgba(255,255,255,0) 3px), repeating-linear-gradient(to right, #434242, #19191d 1px, rgba(255,255,255,0) 1px, rgba(255,255,255,0) 3px);
    background-size: 100% 50%;
    background-position: 0 0, 2px 4px;
    transform: skew(-25deg);
}