您当前的位置:首页 > 网站制作 > 前端设计

用Html标签和CSS3写的一个手机!

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

预览页面:https://www.tjcblog.com/skin/html/phone/

先看看效果图:

用Html标签和CSS3写的一个手机!

接下来我大概说一下步骤:

第一步,定义一个.phone类,设置其宽度为400像素,高800像素的长方形,边框大小为20像素的圆角,并且居中显示。

Html

<div class="phone">  
</div>

CSS

.phone {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 400px;
    height: 800px;
    margin-top: -400px;
    margin-left: -200px;
    border: 20px solid #000;
    border-radius: 60px;
}
用Html标签和CSS3写的一个手机!

第二步,定义其伪元素:before,:after实现逼真的边框效果。

其中:before是一个内边框,它的宽和高都要比上一步的总体宽(400+40px左右边框)和高都要少一些,所以我这里设置的是宽421px,高815px,圆角也要设置的小一点,重点在要给它定义一个box-shadow增加一个阴影效果。:after用来填充背景色。

.phone:before {
    content: "";
    position: absolute;
    width: 421px;
    height: 815px;
    box-shadow: 0 0 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;
}

用Html标签和CSS3写的一个手机!

第三步,接下来画主体部分,定义一个类.box,高宽定义后,一定要写一个像素的边框,颜色调整深一点,box-shadow起到的作用是将周围的颜色更加柔和自然一点。伪元素:before设置其背景两种蓝色过渡。

.box {
    position: absolute;
    border: #000000 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%);
}

用Html标签和CSS3写的一个手机!

第四步,画音量,电源、听筒等部分。

Html

<div class="volume"></div>
<div class="power"></div>
<div class="camera"></div>
<div class="receiver">
    <div></div>
</div>

CSS

.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;
}
.camera {
    position: absolute;
    width: 22px;
    height: 22px;
    background: #19191d;
    border-radius: 100%;
    top: 10px;
    left: 20px;
    z-index: 9;
}
.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 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);
}

用Html标签和CSS3写的一个手机!

这样一个CSS画手机的效果就做完了,其他的可以根据自己的需求画点小图标。比如我在后面继续画了,联通信号,wifi,电池等等图标,再加上时间效果,后面还可以直接做一个pc版本的手机网站。

源码下载

你觉得文章内容怎么样

阿里云代金券 100 云产品通用

有效期30天 首购用户

立即领取
阿里云代金券 100 云产品通用

有效期30天 复购+升级

立即领取