iPhone, iPad, Macbook and iMac mockups on CSS. Smoothly transform from one to another. Minimum HTML. Pure CSS3. Webkit only.
A Pen by Arsen Zbidnyakov on CodePen.
iPhone, iPad, Macbook and iMac mockups on CSS. Smoothly transform from one to another. Minimum HTML. Pure CSS3. Webkit only.
A Pen by Arsen Zbidnyakov on CodePen.
<div id="device"> | |
<div id="screen"></div> | |
<div id="mac"></div> | |
</div> |
/* | |
3 lines of HTML | |
3kB of CSS | |
Try Full Page for better experience. | |
*/ |
#device { | |
position: absolute; | |
margin: auto; | |
top: 0; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
width: 240px; | |
height: 426px; | |
padding: 76px 20px; | |
background: #eee; | |
border: 2px solid #aaa; | |
border-radius: 30px; | |
z-index: 300; | |
-webkit-transition: all 1s ease-in-out; | |
-webkit-animation: devices 14s infinite; | |
} | |
@-webkit-keyframes devices { | |
/* iPhone */ | |
0%, 20%, 100% { -webkit-transform: rotate(0deg); width: 240px; height: 426px; } | |
/* iPad */ | |
25%, 45% { -webkit-transform: rotate(-90deg); width: 440px; height: 586px; | |
padding: 76px 20px; background: #eee; border: 2px solid #aaa; border-radius: 30px; } | |
/* Macbook */ | |
50%, 70% { width: 500px; height: 800px; padding: 20px; background: #222; border: 0; | |
border-radius: 0 10px 10px 0; } | |
/* iMac */ | |
75%, 95% { -webkit-transform: rotate(-90deg); width: 600px; height: 1080px; | |
padding: 40px; background: #222; border: 0; border-radius: 0 30px 30px 0; } | |
} | |
#screen { | |
width: 100%; | |
height: 100%; | |
overflow: hidden; | |
color: #aaa; | |
background: #555; | |
border: 2px solid #aaa; | |
z-index: 300; | |
} | |
/* speaker */ | |
#device:before { | |
content: ''; | |
position: absolute; | |
left: 0; | |
right: 0; | |
margin: -25px auto 0; | |
width: 40px; | |
height: 4px; | |
background: #aaa; | |
border: 4px solid #ddd; | |
border-radius: 30px; | |
z-index: 300; | |
-webkit-animation: speaker 14s infinite; | |
} | |
@-webkit-keyframes speaker { | |
0%, 20%, 100% { opacity: 1; } | |
25%, 95% { opacity: 0; } | |
} | |
/* button */ | |
#screen:before { | |
content: ''; | |
position: absolute; | |
left: 50%; | |
bottom: 14px; | |
margin-left: -20px; | |
height: 40px; | |
width: 40px; | |
background: #ddd; | |
border: 2px solid #aaa; | |
border-radius: 50%; | |
-webkit-animation: btn-cam 14s infinite; | |
} | |
@-webkit-keyframes btn-cam { | |
0%, 45%, 100% { opacity: 1; } | |
50%, 95% { opacity: 0; } | |
} | |
/* camera */ | |
#screen:after { | |
content: ''; | |
position: absolute; | |
top: 30px; | |
left: 50%; | |
width: 6px; | |
height: 6px; | |
margin-left: -5px; | |
background: #aaa; | |
border: 2px solid #ddd; | |
border-radius: 50%; | |
-webkit-animation: btn-cam 14s infinite; | |
} | |
/* touchpad */ | |
#mac:after { | |
content: ''; | |
position: absolute; | |
bottom: 50%; | |
background: #aaa; | |
z-index: 300; | |
-webkit-animation: touchpad 14s infinite; | |
} | |
@-webkit-keyframes touchpad { | |
0%, 45%, 100% { opacity: 0; } | |
50%, 70% { opacity: 1; border-radius: 8px 0 0 8px; width: 14px; height: 120px; left: -14px; margin-bottom: -60px; } | |
75%, 95% { opacity: 1; border-radius: 50%; width: 60px; height: 60px; left: -90px; margin-bottom: -30px;} | |
} | |
/* keyboard */ | |
#mac:before { | |
content: ''; | |
position: absolute; | |
left: -30px; | |
bottom: -80px; | |
width: 30px; | |
height: 100%; | |
padding: 80px 0; | |
background: #ddd; | |
border-radius: 20px 0 0 20px; | |
z-index: 300; | |
-webkit-animation: keyboard 14s infinite; | |
} | |
@-webkit-keyframes keyboard { | |
0%, 45%, 100% { opacity: 0; } | |
50%, 70% { opacity: 1; width: 30px; left: -30px; padding: 80px 0; bottom: -80px; } | |
75%, 95% { opacity: 1; width: 120px; left: -120px; padding: 0; bottom: 0; } | |
} | |
/* stand */ | |
#device:after { | |
content: ''; | |
position: absolute; | |
left: -280px; | |
bottom: 50%; | |
width: 0; | |
height: 250px; | |
margin-bottom: -145px; | |
border-right: 200px solid #ccc; | |
border-left: 30px solid #ddd; | |
border-bottom: 20px solid transparent; | |
border-top: 20px solid transparent; | |
border-radius: 15px; | |
z-index: 100; | |
-webkit-animation: stand 14s infinite; | |
} | |
@-webkit-keyframes stand { | |
0%, 45%, 70% { opacity: 0; border-right: 0; } | |
75%, 95% { opacity: 1; border-right: 200px solid #ccc; } | |
100% { opacity: 0; } | |
} |