纯CSS3实现3D特效的iPhone 6动画
iPhone 6发布不久，屌丝怎能买得起，不过作为程序员，今天看到一个用纯CSS3绘制的iPhone 6，由于CSS3特性的运用，带有点3D的动画特效，大家可以先来看看在线演示效果。
HTML结构代码如下：
<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>
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:;
}
body {
font-family: 'Helvetica', sans-serif;
background: #f5f5f5;
color: #333;
letter-spacing: 1px;
}
html,body {
height: 100%;
margin:;
padding:;
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:;
z-index:;
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:;
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:;
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:;
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:;
opacity:;
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:;
}
}
#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:;
}
@keyframes coolors {
50% { right: 40px; }
}
CSS3值得学习，小伙伴们可以研究一下。
纯CSS3实现3D特效的iPhone 6动画的更多相关文章
- 纯CSS3实现3D动画导航，html5 webRTC技术实现免费网页电话拨打
花了一周的时间完成了 说吧 (免费网页电话) 的前端开发工作,先将技术点总结如下: 免费电话采用最新的html5 webRTC 技术 实现互联网和电信MIS网互通实现网页电话,目前只有 google ...
- 纯CSS3浮雕质感的立体文字旋转动画
还记得之前分享过一个CSS3 文字3D翻转特效,这个效果让文字有一种立体的视觉效果.今天要分享的这款CSS3文字动画特效更加炫酷,它不仅有立体的3D效果,而且文字整体展现出一种浮雕质感的视觉效果,并且 ...
- 纯CSS3打造非常炫的加载动画
纯css3打造的一款非常炫的加载图.用在需要一定时间加载的地方非常合适.先上效果图: 点击这里在线预览 代码非常简单.没有用任何javascript代码.纯css3实现. html代码: <di ...
- 纯css3 transforms 3D文字翻开翻转3D开放式效果
详细内容请点击 在线预览立即下载 在本教程中,将基于CSS3创建的一个实现一个有趣的3D开放式效果.教程的目的是展示我们如何能带来一些生活上使用CSS3 . html: <ul class=&q ...
- 简单几步用纯CSS3实现3D翻转效果
作为前端开发人员的必修课,CSS3翻转能带我们完成许多基本动效,本期我们将用CSS3实现hover翻转效果~ 第一步非常简单,我们简单画1个演示方块,为其 添加transition和transform ...
- 纯CSS3实现3D跳动小球
请使用Chrome,火狐的浏览器查看本页面,使用IE将看不到效果.如果在本页看不到一个跳动的小球,请确定您的浏览器支持CSS3,或者访问http://keleyi.com/a/bjac/iphgrtq ...
- 8个超震撼的HTML5和纯CSS3动画源码
HTML5和CSS3之所以强大,不仅因为现在大量的浏览器的支持,更是因为它们已经越来越能满足现代开发的需要.Flash在几年之后肯定会消亡,那么HTML5和CSS3将会替代Flash.今天我们要给大家 ...
- 一款纯css3实现的超炫动画背画特效
之前为大家介绍了很多款由纯css3实现的特效.今天要再给大家带来一款纯css3实现的超炫动画背画特效.代码非常简单,没有引用任何其它js代码.css代码也不多.效果非常炫.一起看下效果图: 在线预览 ...
- 8个超炫酷的纯CSS3动画及源码分享
在现代网页中,我们已经越来越习惯使用大量的CSS3元素,而现在的浏览器也基本都支持CSS3,所以很多时候我们不妨思考一下是否可以用纯CSS3制作一些有趣或者实用的网页.本文要分享8个超炫酷的纯CSS3 ...
随机推荐
- 设计模式之美：Factory Method（工厂方法）
索引 别名 意图 结构 参与者 适用性 缺点 效果 相关模式 命名约定 实现 实现方式(一):Creator 类是一个抽象类并且不提供它所声明的工厂方法的实现. 实现方式(二):Creator 类是一 ...
- 第十一章：Android数据存储（上）
数据和程序是应用构成的两个核心要素,数据存储永远是应用开发中最重要的主题之一,也是开发平台必须提供的基础功能.不光是在Android平台上,在其他的平台上,数据的存储永远是不可缺少的一块.Androi ...
- spring mvc 配置对静态资源的访问
在spring mvc的配置文件中做如下配置: 1. <?xml version="1.0" encoding="UTF-8"?> <bean ...
- linux学习笔记1
2016年09月25日 unix与linux发展史 unix是linux之父,学习linux后能容易上手unix. linux是源码开放的unix,由一位芬兰大学生李纳斯在网络上发起,和后来众多爱好者 ...
- atitit.提升备份文件复制速度(1) -----分析统计问题and解决方案
atitit.) -----分析统计问题and解决方案 1. 现在的情形 1 2. 硬盘信息 大概50mb/s, 50iops 1 3. 统计小的文件比率 2 4. 复制速度估计.. 2 5. 小文件 ...
- zookeeper 安装与配置
(1) 下载ZooKeeper,建议选择稳定版,即stable的. [root@bonnie1 ~]# cd /usr/local [root@bonnie1 local]# wget http:// ...
- 【转】Oracle 执行动态语句
1．静态SQLSQL与动态SQL Oracle编译PL/SQL程序块分为两个种:其一为前期联编(early binding),即SQL语句在程序编译期间就已经确定,大多数的编译情况属于这种类型:另外一 ...
- javaweb学习总结(十五)——JSP基础语法
任何语言都有自己的语法,JAVA中有,JSP虽然是在JAVA上的一种应用,但是依然有其自己扩充的语法,而且在JSP中,所有的JAVA语句都可以使用. 一.JSP模版元素 JSP页面中的HTML内容称之 ...
- SpringMVC 架构
SpringMVC 架构 1. 前言 SpringMVC是目前java世界中最为广泛应用的web框架,最然从学习SpringMVC的第一个程序--helloworld至今,已有好几个年头.其间伴随着项 ...
- 一步一步写miscdevice的驱动模块
(本文使用的平台为友善tiny210SDKv2) 对于linux的驱动程序来说,主要分为三种:miscdevice.platform_device.platform_driver . 这三个结构体关系 ...