Apple Devices Mockup

Developer
Arsen Zbidniakov
Size
2,484 Kb
Views
26,312
  1. Apple Devices Mockup Previews
  2. Apple Devices Mockup HTML Codes
  3. Apple Devices Mockup CSS Codes
  4. Apple Devices Mockup JS Codes

How do I make an apple devices mockup?

IPhone, iPad, Macbook and iMac mockups on CSS. Smoothly transform from one to another. Minimum HTML. Pure CSS3 morphing.. What is a apple devices mockup? How do you make a apple devices mockup? This script and codes were developed by Arsen Zbidniakov on 13 October 2022, Thursday.

Apple Devices Mockup Previews
IQ Test

Apple Devices Mockup - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Apple Devices Mockup</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="device"> <div id="screen"></div> <div id="mac"></div>
</div> <script src="js/index.js"></script>
</body>
</html>

Apple Devices Mockup - Script Codes CSS Codes

#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; }
}

Apple Devices Mockup - Script Codes JS Codes

/* 3 lines of HTML 3kB of CSS Try Full Page for better experience.
*/
Apple Devices Mockup - Script Codes
Apple Devices Mockup - Script Codes
Home Page Home
Developer Arsen Zbidniakov
Username ARS
Uploaded October 13, 2022
Rating 3.5
Size 2,484 Kb
Views 26,312
Do you need developer help for Apple Devices Mockup?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Arsen Zbidniakov (ARS) Script Codes
Name
GSAP Text Animation
HTML5 Audio Player
Flat UI - Checkbox FIX
Understanding CSS clip
ELEKS Digital Production
IPhone lockscreen
Infinity Morph
Long Shadows for Font Awesome
Pastel Loader
Page Transition Loader
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!