css绘制诺基亚105手机效果-html代码-BFW代码库

css绘制诺基亚105手机效果

代码语言：html

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
@font-face {font-family: "Nokia Pure Text"; src: url("//db.onlinewebfonts.com/t/b0040e9e6a6db92b5c252acee3891874.eot"); src: url("//db.onlinewebfonts.com/t/b0040e9e6a6db92b5c252acee3891874.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/b0040e9e6a6db92b5c252acee3891874.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/b0040e9e6a6db92b5c252acee3891874.woff") format("woff"), url("//db.onlinewebfonts.com/t/b0040e9e6a6db92b5c252acee3891874.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/b0040e9e6a6db92b5c252acee3891874.svg#Nokia Pure Text") format("svg"); }

* {
        padding: 0;
        margin: 0;
        
        box-sizing: border-box;
}

body {
        display: -webkit-box;
        display: flex;
        -webkit-box-align: center;
                align-items: center;
        -webkit-box-pack: center;
                justify-content: center;
        
        padding: 2rem;
        
        font-family: 'Nokia Pure Text', -apple-system, Helvetica, sans-serif;
        line-height: 1;
        
        background: lightblue;
}

.phone {
        display: inline-block;
        
        width: 44.8mm;
        height: 107mm;
        
        padding: 2mm 2mm 8mm;
        
        color: white;
        background: -webkit-gradient(linear, left top, right top, from(#222), to(#111));
        background: linear-gradient(to right, #222, #111);
        box-shadow: inset 0 1mm 1mm #fff3, inset 0 -3mm 2mm #000c, inset 0 -9mm 2mm #fff1;
        
        border-radius: 6mm;
        border-bottom-left-radius: 7mm 6mm;
        border-bottom-right-radius: 7mm 6mm;
}

.glass {
        display: -webkit-box;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
                flex-direction: column;
        -webkit-box-align: center;
                align-items: center;
        -webkit-box-pack: justify;
                justify-content: space-between;
        
        height: 50mm;
        
        padding: 3mm 6mm 10mm;
        
        background: #444;
        background: #333 linear-gradient(50deg, #fff0 25%, #fff6 100%);
        box-shadow: inset .5mm -.5mm 1mm #0007, inset -.5mm .5mm 1mm #fff2;
        
        border-radius: 4mm 4mm 0 0;
}

.glass .speaker {
        display: inline-block;
        
        z-index: 2;
        
        width: 12mm;
        height: 1mm;
        
        background: repeating-linear-gradient(to right, transparent, transparent .3mm, #888 .3mm, #888 .4mm), repeating-linear-gradient(to bottom, #666, #666 .3mm, #888 .3mm, #888 .4mm);
        box-shadow: inset 1mm 0 1mm #000a, inset -.5mm .5mm .5mm #0006;
        
        border-radius: .5mm;
}

.glass .logo {
        margin-top: 1.5mm;
}

.glass .logo img {
        width: 12mm;
        
        -webkit-filter: brightness(350%) grayscale(100%);
        
                filter: brightness(350%) grayscale(100%);
}

.glass .display {
        width: 27mm;
        height: 27mm;
        
        margin-top: auto;
        
        background: #fff1;
        box-shadow: inset .5mm .5mm .5mm #0007, inset -.5mm -.5mm .5mm #0007;
        
        border-radius: .5mm;
}

.buttons {
        height: 46mm;
        
        background: #444;
        box-shadow: inset .25mm -.25mm .25mm #ffff;
        
        border-bottom-left-radius: 6mm 4mm;
        border-bottom-right-radius: 6mm 4mm;
        
        overflow: hidden;
}

.buttons .actions {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        
        height: 15.5mm;
}

.buttons .actions div {
        background: linear-gradient(145deg, #555, #444);
}

.buttons .actions > div:not(.dial) {
        display: -webkit-box;
        display: flex;
        -webkit-box-align: center;
                align-items: center;
        -webkit-box-pack: center;
                justify-co.........完整代码请登录后点击上方下载按钮下载查看