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

代码语言：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-content: center;
}

.buttons .actions > div svg {
	fill: white;
}

.buttons .actions .left {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
}

.buttons .actions .accept {
	grid-column: 1 / 2;
	grid-row: 2 / 3;
}

.buttons .actions .dial {
	display: -webkit-box;
	display: flex;
	
	z-index: 2;
	-webkit-box-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	        justify-content: center;
	
	grid-column: 2 / 3;
	grid-row: 1 / 3;
	
	background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#444));
	
	background: linear-gradient(to bottom, #555, #444);
}

.buttons .actions .dial .dial-outer {
	width: 13mm;
	height: 13mm;
	
	padding: .5mm;
	
	background: transparent;
	box-shadow: .5mm -.5mm 1mm #fff3, inset -.5mm .5mm 1mm #000c, inset .5mm -.5mm 1mm #0008;
	border-radius: 4.5mm;
}

.buttons .actions .dial .dial-main {
	height: 100%;
	padding: 1mm;
	
	background: -webkit-gradient(linear, left top, right top, from(#666), to(#333));
	
	background: linear-gradient(to right, #666, #333);
	
	border-radius: 4mm;
}

.buttons .actions .dial .dial-inner {
	width: 100%;
	height: 100%;
	
	background: -webkit-gradient(linear, left top, right top, from(#444), to(#555));
	
	background: linear-gradient(to right, #444, #555);
	
	border-radius: 3mm;
}

.buttons .actions .right {
	grid-column: 3 / 4;
	grid-row: 1 / 2;
}

.buttons .actions .deny {
	grid-column: 3 / 4;
	grid-row: 2 / 3;
}

.buttons .numbers {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: repeat(4, 1fr);
	
	height: 30.5mm;
}

.buttons .numbers .number-button {
	display: -webkit-box;
	display: flex;
	-webkit-box-align: end;
	        align-items: flex-end;
	
	padding: 2mm 2mm 2mm .........完整代码请登录后点击上方下载按钮下载查看

css绘制诺基亚105手机效果

网友评论0

css的margin-block与margin-trim布局切换示例代码

css布局实现胡桃夹子效果代码

css+div布局绘制光芒四射的可爱太阳代码

单个div+css布局实现圣诞雪花球水晶球雪景球效果代码

div+css布局实现一个立体开始按钮效果代码

单个div+css布局实现蛋糕蜡烛效果代码

单个div+css布局实现礼盒效果代码

div+css布局实现城堡建筑效果代码

div+css布局实现圣诞节装饰图案灯笼效果代码

div+css布局实现立体键盘效果代码