转一个css3绘制的iPhone6

css3绘制的iPhone6

<!DOCTYPE html>

<html>

<head>

<title></title>

<style type="text/css">

@font-face {

font-family: Helvetica;

src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/164210/HelveticaNeue-UltraLight.otf) format('TrueType');

font-weight: 300;

}

body {

font-family: 'Helvetica', sans-serif;

background: #f5f5f5;

color: #333;

letter-spacing: 1px;

}

html,body {

height: 100%;

margin: 0;

padding: 0;

overflow: hidden;

}

#wrapper {

height: 520px;

width: 800px;

margin-left: -400px;

margin-top: -260px;

position: absolute;

perspective: 6000px;

top: 50%;

left: 50%;

}

#iphone {

height: 760px;

width: 372px;

border-radius: 50px;

position: absolute;

background: none;

box-shadow: none;

left: 206px;

top: -140px;

transform: rotateX(54deg) rotateZ(-46deg);

transform-style: preserve-3d;

}

#side {

background: #CDD0D5;

width: 393px;

height: 780px;

border-top-left-radius: 77px;

border-bottom-left-radius: 49px;

border-bottom-right-radius: 86px;

border-top-right-radius: 70px;

position: absolute;

top: 5px;

left: -26px;

box-shadow: inset #3D3E42 0 0 15px 9px;

}

#front {

width: 362px;

height: 750px;

border-radius: 49px;

position: absolute;

background-image: -webkit-linear-gradient(-27deg,#444,#000 10%, #000 42%, #333, #000 57%, #000 91%, #444);

left: 5px;

top: 5px;

box-shadow: inset #000 0 0 0 4px, #555 0px 0 3px 0px, #222 -3px 2px, #000 -5px 5px, #E0E0E0 -7px 6px 1px, #6D6D6D -7px 6px 9px;

transform: translateZ(1px);

}

#front-cover {

width: 344px;

height: 734px;

background: #000;

border-radius: 39px;

position: absolute;

top: 8px;

left: 9px;

}

#home {

position: absolute;

width: 52px;

height: 52px;

border-radius: 50%;

background: linear-gradient(32deg,#666,#000,#666);

top: 684px;

left: 160px;

}

#home div {

background: #000;

border-radius: 50%;

width: 46px;

height: 46px;

position: absolute;

left: 3px;

top: 3px;

}

#camera {

width: 11px;

height: 11px;

background: #000;

position: absolute;

top: 35px;

left: 124px;

border-radius: 50%;

box-shadow: inset #666 -5px 2px 9px -2px;

}

#camera div {

width: 6px;

height: 6px;

background: radial-gradient(#E1E4F5,#0D2B69 33%);

background-position: -1px -1px;

position: absolute;

top: 3px;

left: 3px;

border-radius: 50%;

}

#speaker {

width: 50px;

height: 4px;

border-radius: 2px;

background: #555;

position: absolute;

top: 39px;

left: 156px;

box-shadow: inset #222 0 0px 4px;

}

#volume {

height: 128px;

width: 11px;

border-radius: 10px;

position: absolute;

background: #F9F9FA;

top: 171px;

left: -20px;

transform: rotateY(95deg);

transform-style: preserve-3d;

box-shadow: inset #292A2F 4px 0 8px 1px, #D5D5D5 -1px 0px 2px;

}

#volume div {

width: 8px;

height: 55px;

background: #BBBCC0;

border-radius: 10px;

position: absolute;

box-shadow: #eee -1px 1px, #777 -1px 3px, #505057 -3px 3px, inset #909197 -3px 0 3px;

}

#volume div:first-child {

top: 2px;

left: 4px;

}

#volume div:last-child {

top: 69px;

left: 4px;

}

#toggler {

height: 34px;

width: 8px;

border-radius: 10px;

position: absolute;

background: #2B2C31;

top: 105px;

left: -20px;

transform: rotateY(95deg);

transform-style: preserve-3d;

box-shadow: inset #292A2F 4px 0 8px 1px, #D5D5D5 -1px 0px 2px;

}

#toggler div {

width: 4px;

height: 31px;

background: #BBBCC0;

border-radius: 10px;

position: absolute;

box-shadow: #eee -1px 1px, #777 -2px 3px, #505057 -3px 3px, inset #909197 -3px 0 3px;

top: -1px;

left: 3px;

}

#aux {

width: 19px;

height: 19px;

background: #3B3B3B;

border-radius: 50%;

transform: rotateX(90deg) translateZ(1px);

transform-style: preserve-3d;

position: absolute;

top: 766px;

left: 45px;

box-shadow: inset #000 6px -3px 10px 1px, #C7C7C7 1px 0px 1px;

}

#lightning {

width: 48px;

height: 12px;

border-radius: 10px;

background: #3F3F3F;

transform: rotateX(90deg) translate3d(0px,1px,0px);

top: 771px;

position: absolute;

left: 139px;

box-shadow: inset #8E8F94 -1px 1px 0px 2px, #515258 0px 0px 0 1px, inset #000 0 -3px 10px, #DADADA 1px 0 0 1px;

}

#bottom-speaker {

position: absolute;

transform: rotateX(90deg);

top: 781px;

left: 70px;

}

#bottom-speaker div {

width: 8px;

height: 8px;

border-radius: 50%;

background: #6C6D72;

position: absolute;

box-shadow: inset #000 1px -1px 4px 1px, #DADADA 1px 0px;

}

#bottom-speaker div:nth-child(2) { left: 150px; }

#bottom-speaker div:nth-child(3) { left: 162px; }

#bottom-speaker div:nth-child(4) { left: 174px; }

#bottom-speaker div:nth-child(5) { left: 186px; }

#bottom-speaker div:nth-child(6) { left: 198px; }

#bottom-speaker div:nth-child(7) { left: 210px; }

#skrews {

position: absolute;

top: 780px;

left: 120px;

transform: rotateX(90deg);

}

#skrews div {

position: absolute;

width: 8px;

height: 8px;

background: rgb(95, 92, 92);

border-radius: 50%;

top: 0;

z-index: 4;

box-shadow: inset #999AA0 0 0 0px 2px, #444 1px 0px;

}

#skrews div:last-child {

left: 70px;

}

#lines {

position: absolute;

top: 82px;

left: -32px;

}

#lines > div:last-child {

top: 634px;

}

#lines div {

width: 7px;

height: 11px;

position: absolute;

transform-style: preserve-3d;

transform-origin: 100% 100%;

}

#lines > div {

background: linear-gradient(right,#393A3C,#5A595E);

transform: rotateY(90deg);

}

#lines > div > div {

background: linear-gradient(right,#5A595E,#87868A);

transform: rotateY(17deg);

left: -6px;

}

#lines > div > div > div {

background: linear-gradient(right,#87868A,#A8A6AD);

transform: rotateY(17deg);

left: -6px;

}

#shadow {

width: 350px;

height: 755px;

background: black;

position: absolute;

top: 5px;

left: 0;

transform: translateZ(-17px);

transform-style: preserve-3d;

box-shadow: #000 0 0 10px 15px;

opacity: 0.4;

border-top-left-radius: 76px;

border-top-right-radius: 200px;

border-bottom-left-radius: 40px;

border-bottom-right-radius: 56px;

}

#screen {

background: linear-gradient(#A1E5E5,#1987AA);

width: 336px;

height: 589px;

position: absolute;

top: 80px;

left: 13px;

font-weight: 300;

color: #fff;

background-size: 200% 100%;

overflow: hidden;

}

#time {

font-size: 86px;

left: 57px;

top: 37px;

position: absolute;

}

#date {

font-size: 20px;

left: 85px;

top: 130px;

position: absolute;

}

#bottom {

width: 37px;

height: 7px;

border-radius: 5px;

background: #2AB1DB;

position: absolute;

top: 573px;

left: 149px;

}

#top {

width: 37px;

height: 7px;

border-radius: 5px;

background: #D7FFFF;

position: absolute;

top: 10px;

left: 149px;

}

#slide {

position: absolute;

top: 489px;

left: 88px;

font-size: 28px;

color: #2AB1DB;

background: linear-gradient(left,#2EC4F3 30%,#fff,#2EC4F3 70%);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

background-size: 350px;

animation: slide 5s linear infinite;

}

@keyframes slide {

0% { background-position: 100px 0; }

40% { background-position: 440px 0; }

100% { background-position: 440px 0; }

}

#slide div {

transform: rotate(135deg);

border-left: 2px solid #2AB1DB;

border-top: 2px solid #2AB1DB;

width: 15px;

height: 15px;

position: absolute;

left: -29px;

top: 10px;

}

#signal {

position: absolute;

top: 9px;

left: 7px;

}

#signal div {

width: 6px;

height: 6px;

border-radius: 50%;

background: #fff;

border: 1px solid #fff;

position: absolute;

}

#signal div:nth-child(2) {

left: 9px;

}

#signal div:nth-child(3) {

left: 18px;

}

#signal div:nth-child(4) {

left: 27px;

}

#signal div:nth-child(5) {

left: 36px;

background: none;

}

#battery {

position: absolute;

top: 3px;

left: 270px;

font-size: 13px;

}

#battery > div:last-child {

width: 27px;

height: 9px;

border: 1px solid #fff;

position: absolute;

top: 4px;

left: 27px;

border-radius: 2px;

}

#battery div div:first-child {

width: 21px;

height: 7px;

background: #fff;

position: absolute;

top: 1px;

left: 1px;

}

#battery div div:last-child {

width: 1px;

height: 6px;

background: #FFF;

position: absolute;

left: 29px;

top: 2px;

border-radius: 0 1px 1px 0;

}

#fabrizio {

border-top: 100px solid black;

border-right: 63px solid transparent;

width: 0;

transform: scale(.33);

transform-origin: 0 0;

margin: 20px;

opacity:.6;

position: absolute;

bottom: -130px;

}

#fabrizio:before {

background: black;

width: 20px;

height: 30px;

content: '';

display: block;

transform: skewX(-32deg);

position: relative;

top: -65px;

left: 29px;

}

#fabrizio:after {

background: black;

width: 40px;

height: 36px;

content: '';

display: block;

transform: skewX(-32deg);

position: relative;

top: -130px;

left: 49px;

}

#circle {

width: 50px;

height: 50px;

background: none;

border-radius: 50%;

box-shadow: rgba(255,255,255,0.1) 160px 335px,rgba(255,255,255,0.1) 120px 275px 0 12px,rgba(255,255,255,0.1) 60px 355px 0 23px,rgba(255,255,255,0.1) 230px 445px 0 -8px,rgba(255,255,255,0.1) 60px 125px,rgba(255,255,255,0.1) 260px 145px 0 12px,rgba(255,255,255,0.1) 300px 145px 0 23px,rgba(255,255,255,0.1) 100px 85px 0 -8px,rgba(255,255,255,0.1) 50px 155px,rgba(255,255,255,0.1) 150px 273px 0 -2px,rgba(255,255,255,0.1) 50px 555px 0 23px,rgba(255,255,255,0.1) 180px 5px 0 -8px;

animation: circle 30s linear infinite alternate;

}

@keyframes circle {

0%{

box-shadow: rgba(255,255,255,0.1) 160px 335px,rgba(255,255,255,0.1) 120px 275px 0 12px,rgba(255,255,255,0.1) 60px 355px 0 23px,rgba(255,255,255,0.1) 230px 445px 0 -8px,rgba(255,255,255,0.1) 60px 125px,rgba(255,255,255,0.1) 260px 145px 0 12px,rgba(255,255,255,0.1) 300px 145px 0 23px,rgba(255,255,255,0.1) 100px 85px 0 -8px,rgba(255,255,255,0.1) 350px 555px,rgba(255,255,255,0.1) 350px 273px 0 -2px,rgba(255,255,255,0.1) 150px 355px 0 23px,rgba(255,255,255,0.1) 180px 205px 0 -8px,rgba(255,255,255,0.1) 0px 0px 0 -8px,rgba(255,255,255,0.1) 100px 555px 0 10px;

}

100%{

box-shadow: rgba(255,255,255,0.1) 70px 10px,rgba(255,255,255,0.1) 300px 205px 0 12px,rgba(255,255,255,0.1) 0px 155px 0 23px,rgba(255,255,255,0.1) 330px 45px 0 -8px,rgba(255,255,255,0.1) 460px 325px,rgba(255,255,255,0.1) 0px 445px 0 12px,rgba(255,255,255,0.1) 300px 145px 0 23px,rgba(255,255,255,0.1) 100px 85px 0 -8px,rgba(255,255,255,0.1) 50px 155px,rgba(255,255,255,0.1) 150px 273px 0 -2px,rgba(255,255,255,0.1) 0px 555px 0 23px,rgba(255,255,255,0.1) 180px 5px 0 -8px,rgba(255,255,255,0.1) 300px 555px 0 -8px,rgba(255,255,255,0.1) 350px 355px 0 10px;

}

}

#reminder {

position: absolute;

top: 230px;

left: 40px;

width: 296px;

height: 50px;

border-top: 1px solid #86E2F0;

border-bottom: 1px solid #86E2F0;

line-height: 50px;

font-weight: 400;

opacity: 0;

animation: reminder .1s linear forwards 15s;

}

#reminder div:first-child {

background: #fff;

width: 16px;

height: 16px;

border-radius: 3px;

position: absolute;

top: 18px;

}

#reminder div:nth-child(2) {

position: absolute;

left: 30px;

}

#reminder div:last-child{

position: absolute;

left: 251px;

font-size: 11px;

color: #86E2F0;

}

@keyframes reminder {

100% {

opacity: 1;

}

}

#awwwards {

position: absolute;

bottom: 30px;

left: 70px;

}

#awwwards a {

color: #444;

text-decoration: none;

border-bottom: 1px solid #888;

}

#coolors {

position: absolute;

bottom: 30px;

right: 30px;

color: #444;

text-decoration: none;

border-bottom: 1px solid #888;

animation: coolors 1s infinite;

opacity: 1;

}

@keyframes coolors {

50% { right: 40px; }

}

</style>

</head>

<body>

<div id="wrapper">

<div id="iphone">

<div id="side"></div>

<div id="lines">

<div>

<div>

<div></div>

</div>

</div>

<div>

<div>

<div></div>

</div>

</div>

</div>

<div id="toggler">

<div></div>

</div>

<div id="aux"></div>

<div id="lightning"></div>

<div id="bottom-speaker">

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

</div>

<div id="skrews">

<div></div>

<div></div>

</div>

<div id="volume">

<div></div>

<div></div>

</div>

<div id="front">

<div id="front-cover"></div>

<div id="camera">

<div></div>

</div>

<div id="speaker"></div>

<div id="screen">

<div id="reminder">

<div></div>

<div>Made by @_fbrz</div>

<div>now</div>

</div>

<div id="circle"></div>

<div id="time">12:42</div>

<div id="date">Saturday, January 4</div>

<div id="bottom"></div>

<div id="top"></div>

<div id="slide">

<div></div>

slide to unlock

</div>

<div id="signal">

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

</div>

<div id="battery">

<div>86%</div>

<div>

<div></div>

<div></div>

</div>

</div>

</div>

<div id="home">

<div></div>

</div>

</div>

<div id="shadow"></div>

</div>

</div>

</body>

</html>

提示:你可以先修改部分代码再运行。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏叁金大数据

EmguCV学习——简单算法 差分与高斯

公司项目需要检测运动物体,我对opencv也没啥研究,google了好久看了好多方法,最简单的就是差分与高斯背景建模了。

1313
来自专栏码字搬砖

scrapy之user-agent池

常见的反爬策略有很多,今天我们一起跟随小省开始,ua的反爬之旅,咳咳咳,敲黑板喽!

1201
来自专栏一个会写诗的程序员的博客

ClassMetadataReadingVisitor has interface org.springframework.asm.ClassVisitor as super class

ClassMetadataReadingVisitor has interface org.springframework.asm.ClassVisitor a...

1005
来自专栏从零开始的linux

linux基础命令6

tr命令 # tr 'a-z' 'A-Z' < /etc/fstab # # /ETC/FSTAB # CREATED BY ANACONDA ON THU ...

2777
来自专栏练小习的专栏

符合标准的有序列表分页源码示例

一个符合标准的有序列表分页源码示例。 你可以根据你所应用的不同程序语言,打包生成一个符合标准的分页控件。 DOM结构: <ul class="paginatio...

2089
来自专栏小白安全

某素材网扒下来情人节网页代码

素材网里卖几分钱的 效果图: 演示地址:http://www.17sucai.com/pins/demo-show?id=23136 提供...

5085
来自专栏linux驱动个人学习

高通msm8909耳机调试

1、DTS相应修改: DTS相关代码:kernel/arch/arm/boot/dts/qcom/msm8909-qrd-skuc.dtsi: 1 s...

8725
来自专栏Blogbyme

【代码分享】一个超级炫酷的404页面

8045
来自专栏GIS讲堂

Openlayers中热力图的实现

Heatmap 是用来呈现一定区域内的统计度量,最常见的网站访问热力图就是以特殊高亮的形式显示访客热衷的页面区域和访客所在的地理区域的图示。Heatmap.j...

2413
来自专栏Django Scrapy

python爬虫反爬取---设置User Agent自动变换header文件

__author__ = 'Lee' import requests import random #随机数模块 def requests_headers():...

3355

扫码关注云+社区