纯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 ...
随机推荐
- 讨厌的 StorageFolder.GetFileAsync 异常。
我们在做WinRT开发的时候,会偶到这样一个场景. 获取一个文件,当他不存在的时候,我们做一些事情. 如果当不存在,我们就创建这么一个文件,那就很好办了. var file = Application ...
- Kali linux系列之 zmap 安装
Kali linux系列之 zmap 安装 官方文档地址:https://zmap.io/ 准备:保证有比较顺畅的更新源,可以更新系统,下载安装包. 安装 第一步:sudo apt-get insta ...
- 微软BI 之SSRS 系列 - 如何设置页标题重复
开篇介绍 这个问题大家经常碰到,特意写一下如何解决这个小问题. 问题 默认情况下当报表超过一定的高度会自动分成多页. 第二页默认是看不到标题的. 解决方法 2012版本下在 Column Groups ...
- [Java Web整合开发王者归来·刘京华] 2、 Java Web开发概述
1.Web相关概念 1-1.胖客户与瘦客户 >_<" RCP的定义及优缺点: >_<"TCP的定义及优缺点: 1-2.B ...
- [OpenCV] 3、直线提取 houghlines
>_<" 发现一个好的链接,是一个讲openCV的网站:http://www.opencv.org.cn/opencvdoc/2.3.2/html/index.html > ...
- [JS4] 最简单JS框架
<html> <head> <title></title> <SCRIPT TYPE="text/JavaScript"> ...
- jenkins2 pipeline入门
本文通过简单的pipeline的实例和详细的讲解,能够学习基本pipeline的groovy用法,然后开始实现自己的pipeline job. 翻译和修改自:https://github.com/je ...
- C#与数据库访问技术总结（十八）
ADO.NET 代码综合示例 前面已经介绍过OLE DB.NET和SQL Server.NET数据提供者可以用来连接不同的数据源. 以下代码不仅综合演示了使用ADO.NET的这两种数据提供者访问数据库 ...
- my linux tech object
I want to be a linux kernel development engineer. That's my dream.
- 【Oracle】Oracle锁表处理
问题分析(1)锁的分析ORACLE里锁有以下几种模式:0:none1:null 空2:Row-S 行共享(RS):共享表锁,sub share3:Row-X 行独占(RX):用于行的修改,sub ex ...