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.........完整代码请登录后点击上方下载按钮下载查看