专栏首页练小习的专栏转一个css3绘制的iPhone6

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

相关文章

  • 一个CSS画的灰太狼,IE下属于重口味,慎看!

    还有几个不错的,比如一个小日本制作的多啦A梦,一个Twitter的当机页面等等,大家可以搜下看看.不得不感叹做前端的哥们闲起来还真是可怕啊.Firefox是正常...

    练小习
  • 伪类以及伪元素的一些使用小技巧

    在浏览器版本越来越高的情况下,很多以前顾及到兼容问题不敢使用的html以及css属性现在已经很普遍的在使用了。比如一些伪类和伪元素。这里稍微提一下在实际工作中用...

    练小习
  • CSS3绘图实战-Nut团队标志

    css每一代都会有革命性的更新,尽管目前还有一部分浏览器没有支持CSS3,就算支持也是部分支持。但是她那强大的能力依然还是让我兴奋,一些早期不敢想象的东西,如今...

    练小习
  • CSS3径向渐变实现优惠券波浪造型

    很多人看到左右的波浪边框,第一想法,应该是用图片实现。现在我们就打破这一想法,用CSS搞定这个效果。

    Javanx
  • 【博客美化】01.推荐和反对炫酷样式

    悟空聊架构
  • 动态内容的等高布局实现

    首先不同内容的固定高度等高布局没有任何难度,本文讲的不是这种。本文讲的是,不同行级或者浮动元素具有不定高度时,将其他元素的高度填充为最大高度元素的高度这种场景。

    RobinsonZhang
  • CSS 3.0实现创意点击按钮

    越陌度阡
  • Valine Admin后台搭建(最新修订版)

    Valine Admin 是 Valine 评论系统的扩展和增强,主要实现评论邮件通知、评论管理、垃圾评论过滤等功能。支持完全自定义的邮件通知模板,基于Akis...

    Caleb
  • PHP+MYSQL分页css篇2

    body{ font-size: 12px;font-family: verdana;width: 100%; } div.page{ text-ali...

    用户7873631
  • 详解:30 text-shadow的开端

    核心知识点是:text-shadow:x y 模糊的大小 模糊的颜色,请大家记住一点:xy可以负数形式出现 嘿嘿。核心是复制哈

    用户7873631

扫码关注云+社区

领取腾讯云代金券