Are you looking to add some dynamic and engaging animations to your website? Consider creating an “iPhone X Animation” using HTML and CSS. This design is perfect for showcasing your web design skills and adding some flair to your website. In this tutorial, we’ll walk you through the step-by-step process of creating an “iPhone X Animation” from scratch, using only HTML and CSS. You’ll learn how to create the iPhone X device, add the animation elements, and use CSS to animate them. Plus, you’ll gain valuable experience in using CSS to create dynamic and responsive designs. By the end of this tutorial, you’ll have a functional and visually stunning “iPhone X Animation” that you can use to engage your website visitors and make your website stand out. So, let’s get started on creating a beautiful and engaging iPhone X animation using HTML and CSS!
Before we start here are 50 projects to create using HTML CSS and JavaScript –
I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.
Demo
HTML Code
Starter Template
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS -->
<link rel="stylesheet" href="style.css">
<title>IPhone X Animation using HTML and CSS - Coding Torque</title>
</head>
<body>
<!-- Further code here -->
<script src="script.js"></script>
</body>
</html>Paste the below code in your <body> tag.
<main>
<div class="iphonex">
<div class="front">
<div class="screen">
<div class="screen__view">
<div class="dribbbleLogo"><span></span></div>
<div class="hello">
<p>Hello </p>
<div class="dribbbleLogo white"><span></span></div>
</div>
</div>
<div class="screen__front">
<div class="screen__front-speaker"></div>
<div class="screen__front-camera"></div>
</div>
</div>
<div class="front__line"></div>
<div class="front__line front__line-second"></div>
</div>
<div class="phoneButtons phoneButtons-right"></div>
<div class="phoneButtons phoneButtons-left"></div>
<div class="phoneButtons phoneButtons-left2"></div>
<div class="phoneButtons phoneButtons-left3"></div>
<div class="back"></div>
</div>
<div class="title">
<p>IPHONE</p>
<div class="title__svg">
<video playsinline autoplay muted loop preload>
<source src="http://iphoneh.surge.sh/assets/video/background.mp4" type="video/mp4">
</video>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 285 80" preserveAspectRatio="xMidYMid slice">
<defs>
<mask id="mask" x="0" y="0" width="100%" height="100%">
<rect x="0" y="0" width="100%" height="100%" />
<text x="43.77%" y="71%">X</text>
</mask>
</defs>
<rect x="0" y="0" width="100%" height="100%" />
</svg>
</div>
</div>
</main>Output Till Now
CSS Code
Create a file style.css and paste the code below.
body {
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
font-family: "Major Mono Display", monospace;
user-select: none;
background: #000;
}
main {
display: flex;
flex: 1;
justify-content: center;
align-items: center;
flex-direction: row-reverse;
}
.title {
color: rgba(255, 255, 255, 0.07);
display: flex;
flex-direction: row;
align-items: center;
position: absolute;
transition: opacity 0.4s;
}
.title p {
font-size: 14vw;
}
.title .title__svg {
width: 17vw;
height: 34vw;
overflow: hidden;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.title .title__svg video {
width: 95%;
height: 95%;
object-fit: cover;
}
.title .title__svg svg {
width: 100%;
position: absolute;
top: 0;
left: 0;
height: 100%;
}
.title .title__svg svg text {
font-family: "Major Mono Display", monospace;
text-transform: uppercase;
transform-origin: center center;
font-size: 3em;
}
.title .title__svg svg rect {
fill: #fff;
}
.title .title__svg svg > rect {
-webkit-mask: url(#mask);
mask: url(#mask);
fill: #000;
}
.iphonex {
width: 20em;
height: 40em;
display: flex;
position: absolute;
transform: rotate(0deg);
transition: all cubic-bezier(0.36, 0.41, 0.38, 1) 0.4s;
z-index: 10;
}
.iphonex:hover {
transform: rotate(0deg) scale(0.95);
margin-right: 0%;
}
.iphonex:hover ~ .title {
opacity: 0;
}
.iphonex .back {
display: flex;
flex: 1;
margin: 0.2em;
border-radius: 3em;
position: absolute;
z-index: 1;
width: calc(100% - 0.6em);
height: calc(100% - 0.6em);
top: 0;
right: 0;
box-shadow: 0 0 10em rgba(70, 70, 70, 0.1);
transition: all 0.4s;
}
.iphonex:hover .back {
box-shadow: 0 0 15em rgba(70, 70, 70, 0.4);
}
.iphonex .front {
display: flex;
flex: 1;
background-color: #292c2d;
border-radius: 3em;
margin: 0.2em;
overflow: hidden;
position: relative;
box-shadow: 0 0.1em 0.4em rgba(255, 255, 255, 0.1) inset;
z-index: 10;
}
.iphonex .screen {
display: flex;
flex: 1;
background-color: #191b1c;
margin: 0.4em;
border-radius: 2.6em;
border: solid 0.2em #121415;
position: relative;
z-index: 10;
}
.iphonex .front__line {
background: linear-gradient(to right, #515455, #454748, #515455);
position: absolute;
z-index: 8;
width: 100%;
height: 0.5em;
top: 10%;
}
.iphonex .front__line-second {
top: 90%;
}
.iphonex .screen .screen__view {
display: flex;
flex: 1;
margin: 0.6em;
border-radius: 2em;
overflow: hidden;
position: relative;
width: 100%;
position: relative;
align-items: center;
justify-content: center;
}
.iphonex .screen .screen__view:after,
.iphonex .screen .screen__view:before {
content: "";
position: absolute;
z-index: 1;
width: 50em;
height: 50em;
border-radius: 50%;
background: linear-gradient(110deg, #ab34b2, #d63776, #5d2b8b);
bottom: 0;
}
.iphonex .screen .screen__view:after {
transform: translateY(100%) scaleX(1.4);
opacity: 0.3;
transition: all ease 0.5s 0.1s;
}
.iphonex .screen:hover .screen__view:after {
transform: translateY(10%) scaleX(1.4);
transition: all ease 0.9s;
}
.iphonex .screen .screen__view:before {
transform: translateY(100%) scaleX(1.4);
opacity: 1;
z-index: 40;
transition: all ease 0.6s;
}
.iphonex .screen:hover .screen__view:before {
transform: translateY(10%) scaleX(1.4);
transition: all ease 0.9s 0.2s;
}
.iphonex .screen .screen__view .dribbbleLogo {
width: 8em;
height: 8em;
border: solid 0.7em #d33572;
border-radius: 50%;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
background: #ea4c89;
position: absolute;
z-index: 10;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
transition: all ease 0.7s;
}
.iphonex .screen .screen__view .dribbbleLogo.white {
width: 0.9em;
height: 0.9em;
border: solid 0.07em #fff;
position: relative;
margin-left: 0.3em;
background: transparent;
box-sizing: border-box;
}
.iphonex .screen:hover .screen__view .dribbbleLogo:not(.white) {
transform: translateY(100%) translateZ(1px);
transition: all ease 1s 0.1s;
}
.iphonex .screen .screen__view .dribbbleLogo:after,
.iphonex .screen .screen__view .dribbbleLogo:before,
.iphonex .screen .screen__view .dribbbleLogo span {
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
border: solid 0.45em #d33572;
position: absolute;
}
.iphonex .screen .screen__view .dribbbleLogo.white:after,
.iphonex .screen .screen__view .dribbbleLogo.white:before,
.iphonex .screen .screen__view .dribbbleLogo.white span {
border: solid 0.04em #fff;
}
.iphonex .screen .screen__view .dribbbleLogo:after {
bottom: 0;
transform: translateY(63%) scaleY(1.65) scaleX(1.5) rotate(-30deg);
transform-origin: top center;
}
.iphonex .screen .screen__view .dribbbleLogo:before {
top: 0;
transform: translateY(-62%) scaleY(1.65) scaleX(1.5) rotate(-30deg);
transform-origin: bottom center;
}
.iphonex .screen .screen__view .dribbbleLogo span {
top: 0;
transform: translateY(-50%) scaleY(1.85) scaleX(1.5) rotate(-63deg);
transform-origin: bottom right;
}
.iphonex .screen .screen__view .hello {
font-size: 2.5em;
color: #fff;
position: absolute;
z-index: 60;
opacity: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
transition: all ease 0.3s;
transform: translateY(40%);
font-weight: 600;
}
.iphonex .screen:hover .screen__view .hello {
opacity: 1;
transform: translateY(0%);
transition: all ease 0.6s 0.7s;
}
.iphonex .screen .screen__front {
position: absolute;
width: 50%;
background-color: #191b1c;
height: 1.8em;
border-radius: 0 0 0.9em 0.9em;
right: 25%;
top: 0px;
display: flex;
justify-content: center;
align-items: center;
padding-bottom: 0.3em;
box-sizing: border-box;
margin-top: 0.5em;
z-index: 999;
}
.iphonex .screen .screen__front::after,
.iphonex .screen .screen__front::before {
content: "";
width: 10%;
height: 50%;
position: absolute;
background: transparent;
top: -0.3em;
border: solid 0.4em #191b1c;
border-bottom: 0;
}
.iphonex .screen .screen__front::after {
left: 0.4em;
transform: translateX(-100%);
border-left: 0;
border-radius: 0 0.7em 0 0;
}
.iphonex .screen .screen__front::before {
right: 0.4em;
transform: translateX(100%);
border-right: 0;
border-radius: 0.7em 0 0 0;
}
.iphonex .screen .screen__front-speaker {
background: #070808;
border-radius: 0.2em;
height: 0.35em;
width: 28%;
}
.iphonex .screen .screen__front-camera {
height: 0.35em;
width: 0.35em;
background: #272727;
margin-left: 0.5em;
border-radius: 50%;
margin-right: -0.8em;
}
.iphonex .phoneButtons {
width: 1em;
height: 6em;
position: absolute;
z-index: 2;
background: linear-gradient(to bottom, #212324, #2b2e31, #212324);
box-shadow: 0 0 0.4em rgba(255, 255, 255, 0.1) inset;
border-radius: 2px;
}
.iphonex .phoneButtons-right {
right: 0;
top: 30%;
}
.iphonex .phoneButtons-left {
left: 0;
top: 15%;
height: 3em;
}
.iphonex .phoneButtons-left2 {
left: 0;
top: 25%;
height: 5em;
}
.iphonex .phoneButtons-left3 {
left: 0;
top: calc(25% + 6em);
height: 5em;
}
@media (max-height: 40em) {
body {
font-size: 70%;
}
.iphonex {
width: 48vh;
height: 94vh;
}
.title .title__svg svg text {
font-size: 4em;
}
}Final Output
Written by: Piyush Patil
Code Credits: @hosseinshabani
If you found any mistakes or have any doubts please feel free to Contact Us
Hope you find this post helpful💖
