转一个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 条评论
登录 后参与评论

相关文章

来自专栏抠抠空间

Orm之中介模型

什么是中介模型 中介模型针对的是ManyToMany(多对多)的时候第三张表的问题, 中介模型其实指的就是我们不通过Django创建第三张表,如果自己不创建第三...

2605
来自专栏智能计算时代

Microservices Ecosystem Transit Map

…we assembled a map of the ecosystem to help guide practitioners, vendors, inves...

3244
来自专栏图形学与OpenGL

9.3.3编程实例-图形拾取

int select_point = 0; //1 是第一个点,2是第二个,以此类推

1044
来自专栏逸鹏说道

memcached未作IP限制导致缓存数据可被攻击者控制

漏洞证明: C:\>nc -vv 61.135.178.118 11211 61.135.178.118: inverse host lookup faile...

3018
来自专栏HansBug's Lab

3299: [USACO2011 Open]Corn Maze玉米迷宫

3299: [USACO2011 Open]Corn Maze玉米迷宫 Time Limit: 10 Sec  Memory Limit: 128 MB Sub...

2624
来自专栏生信宝典

Cytoscape教程(一)

What is cytoscape Cytoscape is an open source software platform for visualizing...

2986
来自专栏Pulsar-V

Save Camera Document

#pragma once #include "HCCamera.h" #include <time.h> #include <cstdio> #incl...

2688
来自专栏GIS讲堂

Ol4中晕圈点效果的实现

结合Openlayers4中的overlay,以图片作为晕圈背景,实现晕圈的点效果。

623
来自专栏老码农专栏

一些流行Java MVC框架的调用栈

1083
来自专栏机器人网

一文教你从PLC编程菜鸟变成高手

PLC编程软件由系统程序和用户程序两部分组成。系统程序包括监控程序、编译程序、诊断程序等,主要用于管理全机、将程序语言翻译成机器语言,诊断机器故障。PLC编程软...

3295

扫码关注云+社区