Hello, reader welcome to my new blog. Today I am back with another awesome project for my readers in this blog, we are going to create a Dynamic Island iPhone 14 Animation using HTML and CSS step by step. Yes, guys, today we will create a beautiful iPhone 14 animation. You have seen an option in the new iPhone 14 that display all the notifications all the music controls and everything in that dynamic island so let’s get started.
Recently I created a Simple Login Form Desing Please check this.
What is Dynamic Island in iPhone?
First of all, we should know what is dynamic island iPhone 14 animation is. When Apple launched the iPhone 14 Pro model, it astonished many with its creative combination of software operations with the “pill-shaped” notch at the top of the screen, they called it Dynamic Island.
Dynamic Island iPhone 14 Design
In this design, apple has created an amazing feature in this phone, the Dynamic Island may show both active and background tasks. When you unlock your iPhone, for example, the unlock icon appears on Dynamic Island, and when you connect the AirPods, the connection status is displayed. The capabilities of Dynamic Island are mentioned below.
Display Outputs and Alerts on a Dynamic Island
- Confirmation of Apple Pay transactions.
- When a microphone or camera is in use, privacy flags appear.
- File transfers through AirDrop.
- AirPods battery life and connection status.
- Battery life and the state of charging for iPhone.
- Alerts on low battery.
- Whether silent mode is active or not.
- Unlocking with Face ID.
- locking/unlocking a car key.
- Unlocking an Apple Watch.
- Near–field communication (NFC) interaction.
- Connections via Airplay.
- Focusing mode shifts.
- Quick actions.
- Alerts for airplane mode/no data.
- SIM card alert.
- Accessories connect.
- Find my alert.
And many more attractive features today we are going to make a calling option that will pop up on the display, so as you can see in this picture below.
In this picture, you can see I have created an iPhone mobile, and when I will hover over this screen or we can say when I will move the cursor on the mobile screen a dynamic island feature comes with a calling option as you can see in the next picture.
Making a Dynamic Island Calling Design
- In this design first, we will create HTML and CSS files.
- Then we’ll connect them.
- Then we’ll make a mobile.
- Then later on, we’ll create a dynamic island option, after creating the option we’ll create an image of the person who is calling us.
- Then we’ll create two options one for the attended call and one for the hangup call.
- Then we’ll use the hover effect.
- And then some attractive animations.
- We’ll hide the whole feature and then on hover, it will pop up with the help of transform, transitions, and translates. And in the last, we’ll use the same animations.
Steps to Create a Dynamic Island iPhone 14
- First, we’ll make a file of HTML with the name index.HTML.
- Then we’ll make a second file of CSS with the name style.CSS.
- Then we’ll connect the HTML file with the CSS file by using code in the HTML file rel=” stylesheet” href=”style.css”>}.
- Then we’ll create a beautiful design of mobile by using CSS.
- And in the end, we’ll create an attractive dynamic island iPhone 14 feature.
Source code Of Dynamic Island Using HTML and CSS only
For making a mobile application first we will make a file with the name index.HTML then copy the given source code of HTML and paste it into your HTML file.
HTML FILE
<!doctype html> <!-- Created By Coding Pakistan --> <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 14 Dynamic Island using HTML and CSS only with Source Code </title> </head> <body> <!-- Further Code here --> <input type="radio" name="theme" id="deep-purple" checked="checked"> <input type="radio" name="theme" id="gold"> <input type="radio" name="theme" id="space-black"> <input type="radio" name="theme" id="silver"> <div class="phone"> <div class="buttons"> <div class="left"> <div class="button"></div> <div class="button"></div> <div class="button"></div> </div> <div class="right"> <div class="button"></div> </div> </div> <div class="camera"></div> <div class="screen-container"> <div class="bg"> <div class="deep-purple"> <div class="section"> <div class="glow"></div> </div> <div class="section"> <div class="glow"></div> </div> </div> <div class="gold"> <div class="section"> <div class="glow"></div> </div> <div class="section"> <div class="glow"></div> </div> </div> <div class="space-black"> <div class="section"> <div class="glow"></div> </div> <div class="section"> <div class="glow"></div> </div> </div> <div class="silver"> <div class="section"> <div class="glow"></div> </div> <div class="section"> <div class="glow"></div> </div> </div> </div> <div class="notch-container" tabindex="0"> <div class="notch"> <div class="content"> <div class="left"> <div class="title"></div> <div class="text"></div> </div> <div class="right"></div> <div class="bar"> <div class="duration"></div> </div> </div> </div> </div> <div class="notch-blur"></div> </div> </div> <div class="pallette"> <label for="deep-purple" class="swatch"></label> <label for="gold" class="swatch"></label> <label for="space-black" class="swatch"></label> <label for="silver" class="swatch"></label> </div> </body> </html>
Similarly, make a file with the name style.CSS, copy the source code I have provided below, and paste it into your CSS file. If you have a little bit of understanding of CSS, you can also be creative by altering the background color of your phone as well as its design, so that the caller will appear in the middle and the icons for picking up and hanging up will be in the bottom. You may even design the phone as you wish.
CSS FILE
@import url("https://fonts.googleapis.com/css2?family=Inter&display=swap");
/* Created By Coding Pakistan */
:root {
--size: max(5px, 1vmin);
--heght: 80em;
--pad: 1.25em;
--border-radius: 6.666em;
--gutter: calc(var(--pad) * 2);
--button-width: 0.333em;
--notch-height: 3.33em;
--notch-width: 33.3%;
--notch-radius: calc(var(--border-radius) - calc(var(--pad) * 2));
--notch-duration: 0.333s;
--ease: cubic-bezier(0.666, 0, 0.4, 1);
--ease-spring: cubic-bezier(0.666, 0, 0.4, 1.2);
--ease-out: cubic-bezier(0.15, 0, 0.333, 1);
--border-width: 0.4em;
--deep-purple: 284;
--gold: 30;
--space-black: 215;
--silver: 254;
--c-h: var(--deep-purple);
--c-s: 100%;
--c-l: 50%;
}
@-webkit-keyframes appear {
to {
transform: scale3d(1, 1, 1);
opacity: 1;
}
}
@keyframes appear {
to {
transform: scale3d(1, 1, 1);
opacity: 1;
}
}
body {
background: #00000a;
display: flex;
flex-direction: column;
gap: 3em;
align-items: center;
justify-content: center;
min-height: 100vh;
font-family: "Inter";
font-size: var(--size);
}
.phone {
position: relative;
z-index: 1;
aspect-ratio: 37/76;
background: black;
height: var(--heght);
border-radius: var(--border-radius);
box-shadow: 0 0 0.1em 0.25em hsl(var(--c-h), 20%, 25%),
0 0 0 var(--border-width) hsl(var(--c-h), 30%, 85%);
box-sizing: border-box;
opacity: 0;
transform: scale3d(1.1, 1.1, 1);
-webkit-animation: appear 1s var(--ease-out) forwards;
animation: appear 1s var(--ease-out) forwards;
-webkit-backface-visibility: hidden;
}
.phone::before {
content: "";
position: absolute;
top: var(--border-radius);
right: calc(var(--border-width) * -1);
bottom: calc(var(--border-radius));
left: calc(var(--border-width) * -1);
border: 0.5em solid hsl(var(--c-h), 20%, 30%);
border-left-width: 0;
border-right-width: 0;
}
.buttons {
position: absolute;
inset: calc(var(--border-width) * -1);
pointer-events: none;
}
.buttons .left,
.buttons .right {
position: absolute;
width: var(--button-width);
display: flex;
flex-direction: column;
align-items: stretch;
gap: 1.5em;
}
.buttons .left {
right: 100%;
top: calc(var(--border-radius) * 2);
}
.buttons .left .button:nth-child(1) {
height: 3em;
margin-bottom: 0.5em;
}
.buttons .right {
left: 100%;
transform: scale3d(-1, 1, 1);
top: calc(var(--border-radius) * 3);
}
.buttons .right .button {
height: 9.5em;
}
.buttons .button {
background: hsl(var(--c-h), 20%, 95%);
height: 6em;
box-shadow: inset -0.15em 0 0.1em black,
inset 0 0 0.1em hsl(var(--c-h), 30%, 90%),
inset 0 0.2em 0.1em hsl(var(--c-h), 30%, 90%),
inset 0 -0.2em 0.1em hsl(var(--c-h), 30%, 90%),
inset -0.1em 0.333em 0.1em rgba(0, 0, 0, 0.5),
inset -0.1em -0.333em 0.1em rgba(0, 0, 0, 0.5);
border-top-left-radius: 0.2em;
border-bottom-left-radius: 0.2em;
}
.screen-container {
position: absolute;
inset: 0;
border-radius: var(--border-radius);
border: var(--pad) solid black;
display: flex;
flex-direction: column;
align-items: center;
gap: calc(var(--pad) * 2);
}
.screen-container::before {
content: "";
position: absolute;
z-index: 2;
background: white;
width: 36.6%;
bottom: calc(var(--pad) * 0.75);
height: calc(var(--pad) * 0.5);
border-radius: calc(var(--pad) * 0.25);
filter: drop-shadow(0 0.1em 0.25em rgba(0, 0, 0, 0.1));
}
.bg {
position: absolute;
inset: 0;
background: black;
border-radius: calc(var(--border-radius) - var(--pad));
overflow: hidden;
}
.bg > * {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
opacity: 0;
transition: opacity 1s var(--ease-out) 0.5s;
}
.bg .section {
--g-h: var(--c-h);
--g-s: var(--c-s);
--g-l: var(--c-l);
flex-grow: 1;
position: relative;
overflow: hidden;
border-radius: calc(var(--border-radius) - var(--pad));
border-bottom-left-radius: 20em;
border-bottom-right-radius: 20em;
}
.bg .section:before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(85% 125% at 50% 140%, black 66.6%, transparent),
radial-gradient(
120% 120% at 50% 145%,
hsl(calc(var(--g-h) - 45), 100%, 50%) 50%,
transparent
),
radial-gradient(
150% 100% at 50% 80%,
transparent 35%,
hsl(calc(var(--g-h) + 50), 100%, 99%)
);
background-color: hsl(var(--g-h), var(--g-s), var(--g-l));
transform: scale3d(1.1, 1.25, 1);
transform-origin: bottom;
transition: transform 1s var(--ease-out) 0.5s;
}
.bg .section:after {
content: "";
position: absolute;
inset: 0;
border: var(--border-width) solid rgba(255, 255, 255, 0.8);
border-radius: inherit;
filter: blur(0.05em);
-webkit-mask-image: radial-gradient(
100% 100% at 50% 70%,
black 30%,
transparent 50%
);
mask-image: radial-gradient(100% 100% at 50% 70%, black 30%, transparent 50%);
}
.bg .section .glow {
position: absolute;
inset: 0;
border-radius: inherit;
mix-blend-mode: overlay;
z-index: 1;
background: radial-gradient(
80% 150% at 50% 100%,
hsl(var(--g-h), 100%, var(--g-l)),
transparent 70%
);
}
.bg .section:last-of-type {
--g-h: calc(var(--c-h) - var(--g-hue-adjust, 0));
--g-s: calc(var(--c-s) - 25%);
--g-l: calc(var(--c-l) + 20%);
transform: scale3d(1, -1, 1) translateZ(1px);
}
.bg .section:last-of-type::before {
background: radial-gradient(85% 125% at 50% 140%, black 66.6%, transparent),
radial-gradient(
120% 120% at 50% 145%,
hsl(
calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust, 0))),
100%,
50%
)
50%,
transparent
),
radial-gradient(
150% 100% at 50% 95%,
transparent 15%,
hsl(calc(var(--g-h) + 5), 100%, var(--g-lightness, 100%))
);
background-color: hsl(var(--g-h), var(--g-s), var(--g-l));
}
.notch-container {
position: absolute;
z-index: 3;
top: var(--pad);
right: var(--pad);
left: var(--pad);
display: flex;
justify-content: center;
height: 100%;
max-height: calc(var(--notch-radius) * 2);
pointer-events: none;
outline: none;
transition: var(--notch-duration) var(--ease);
transition-property: max-height, max-width, filter, transform;
will-change: max-width, max-height, filter;
}
.notch-container:hover,
.notch-container:focus-within {
--shadow-opacity: 0.5s;
transition-timing-function: var(--ease-spring);
}
.notch-container:hover .content,
.notch-container:focus-within .content {
--content-padding: 2em;
}
.notch-container:hover .content .text,
.notch-container:focus-within .content .text {
opacity: 1;
}
.notch-container:hover .notch,
.notch-container:focus-within .notch {
max-width: 100%;
max-height: 100%;
pointer-events: all;
transform: scale3d(1, 1, 1);
}
.notch-container:hover ~ .notch-blur,
.notch-container:focus-within ~ .notch-blur {
opacity: 1;
max-height: calc(var(--notch-radius) * 2.75 + var(--pad));
}
.notch-container:focus-within {
max-height: calc(var(--notch-radius) * 3);
--bar-height: 1em;
--bar-opacity: 1;
}
.notch-container:focus-within .left,
.notch-container:focus-within .right {
max-height: calc(100% - var(--bar-height, 0%) - var(--content-gap));
}
.notch-container:focus-within ~ .notch-blur {
max-height: calc(var(--notch-radius) * 5);
opacity: 1;
}
.notch-blur {
position: absolute;
z-index: 2;
top: calc(var(--pad) - 3px);
right: calc(var(--pad) - 3px);
left: calc(var(--pad) - 3px);
height: 100%;
max-height: calc(var(--notch-radius) * 1.5);
-webkit-backdrop-filter: blur(0.2em);
backdrop-filter: blur(0.2em);
fill: blur(0.1em);
-webkit-mask-image: linear-gradient(
to bottom,
black calc(100% - var(--notch-radius)),
transparent
);
mask-image: linear-gradient(
to bottom,
black calc(100% - var(--notch-radius)),
transparent
);
opacity: 0;
transition: var(--notch-duration) ease-in-out;
border-radius: calc(var(--border-radius) - var(--pad));
transition: var(--notch-duration) var(--ease);
transition-property: max-height, max-width, filter, transform;
will-change: max-width, max-height, filter;
}
.notch {
position: relative;
background: black;
border-radius: var(--notch-radius);
pointer-events: all;
overflow: hidden;
color: white;
display: flex;
cursor: pointer;
width: 100%;
transition: inherit;
transition-property: inherit;
will-change: inherit;
filter: drop-shadow(0 1em 2em hsla(0 0% 0% / var(--shadow-opacity, 0)));
transform: scale3d(0.375, 0.4, 1);
transform-origin: top;
}
.content {
--content-padding: 1.75em;
--duration-height: 0.5em;
--content-gp: 1em;
width: 100%
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: stretch;
padding: var(--content-padding);
gap: var(--content-gap);
font-size: 125%;
transition-property: padding;
will-change: padding;
}
.content .left,
.content .right {
height: 100%;
max-height: calc(100% - var(--bar-height, 0%));
display: flex;
align-items: center;
gap: 1em;
}
.content,
.content .left,
.content .right,
.content .bar,
.content .text {
transition: var(--notch-duration) --ease-out;
}
.content .left,
.content .right,
.content .bar {
transition-property: max-height, opacity;
will-change: max-height;
}
.content .left {
flex-grow: 2;
}
.content .text {
display: flex;
flex-direction: column;
gap: 0.333em;
transition-property: opacity;
opacity: var(--bar-opacity, 0);
}
.content .text:before {
content: "Montagem Orchestra Sinfonica";
order: 1;
text-transform: uppercase;
}
.content .text:after {
order: 2;
content: "DJ Tenebroso";
opacity: 0.5;
}
.content .right {
flex-grow: 1;
}
.content .title {
background: #1a1ab3;
height: 100%;
aspect-ratio: 1;
border-radius: 33.3%;
position: relative;
}
.content .title:before {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: radial-gradient(
50% 50% at 55% 40%,
#131386,
#cd1385 75%,
transparent
)
center/133.3% 133.3%;
background-color: yellow;
filter: blur(0.05em);
}
.content .bar {
display: flex;
align-items: center;
gap: 1em;
flex-basis: 100%;
max-height: var(--bar-height, 0%);
color: rgba(255, 255, 255, 0.5);
opacity: var(--bar-opacity, 0);
}
.content .bar .duration {
position: relative;
height: var(--duration-height);
background: rgba(255, 255, 255, 0.25);
border-radius: calc(var(--duration-height) * 0.5);
overflow: hidden;
flex-grow: 1;
}
.content .bar .duration::before {
content: "";
height: 100%;
background: white;
width: 25%;
position: absolute;
}
.content .bar::before {
content: "0:16";
}
.content .bar:after {
content: "3:19";
}
.camera {
display: flex;
justify-content: center;
align-items: center;
height: var(--notch-height);
aspect-ratio: 1/1;
border-radius: 50%;
pointer-events: none;
position: absolute;
z-index: 4;
top: calc(var(--pad) * 2);
right: calc(50% - calc(var(--notch-width) * 0.5));
margin-right: calc(var(--pad) * 0.333);
}
.camera::before {
content: "";
height: 33.3%;
aspect-ratio: 1;
border-radius: inherit;
box-shadow: inset 0 0 0.25em #4c4da3;
background: radial-gradient(#6667ac, transparent 50%) no-repeat 33.3% 10%/75%
50%,
radial-gradient(#454680, transparent 50%) no-repeat 60% 85%/50% 50%;
background-color: #080928;
}
.pallette {
display: flex;
gap: 2em;
margin-bottom: -0.25em;
}
input[type="radio"] {
display: none;
}
.swatch {
--swatch-size: 5em;
background: white;
width: var(--swatch-size);
height: var(--swatch-size);
border-radius: 50%;
position: relative;
cursor: pointer;
border: var(--border-width) solid black;
box-sizing: border-box;
transition: 0.333s var(--ease-out);
transition-property: border-color, transform;
background: radial-gradient(
100% 100% at 50% 30%,
var(--swatch-s1),
var(--swatch-s2)
);
opacity: 0;
transform: translate3d(0, 20%, 0) scale3d(0.75, 0.75, 1);
-webkit-animation: appear 0.333s var(--ease-out) forwards 0.75s;
animation: appear 0.333s var(--ease-out) forwards 0.75s;
}
.swatch:nth-child(1) {
transform-origin: 80% 200%;
}
.swatch:nth-child(2) {
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
transform-origin: 60% 200%;
}
.swatch:nth-child(3) {
-webkit-animation-delay: 0.85s;
animation-delay: 0.85s;
transform-origin: 40% 200%;
}
.swatch:nth-child(4) {
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
transform-origin: 20% 200%;
}
.swatch:before {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
border: var(--border-width) solid black;
background-image: radial-gradient(
400% 300% at 50% 225%,
transparent 20%,
white
);
}
.swatch[for="deep-purple"] {
--swatch-s1: hsl(var(--deep-purple), 100%, 50%);
--swatch-s2: hsl(calc(var(--deep-purple) - 60), 100%, 20%);
}
.swatch[for="deep-purple"]:before {
opacity: 0.5;
}
.swatch[for="gold"] {
--swatch-s1: hsl(var(--gold), 100%, 50%);
--swatch-s2: hsl(var(--gold), 100%, 50%);
}
.swatch[for="space-black"] {
--swatch-s1 hsl(var(--space-black), 50%, 20%);
--swatch-s2: hsl(var(--space-black), 50%, 10%);
}
.swatch[for="space-black"]:before {
opacity: 0.5;
}
.swatch[for="silver"] {
--swatch-s1: hsl(var(--silver), 50%, 80%);
--swatch-s2: hsl(var(--silver), 50%, 10%);
}
.swatch[for="silver"]:before {
opacity: 0.75;
}
.deep-purple {
--c-h: var(--deep-purple);
--g-hue-adjust: 60;
}
.gold {
--c-h: var(--gold);
--g-hue-adjust-2: -100;
}
.space-black {
--c-h: var(--space-black);
--g-hue-adjust: 190;
--g-hue-adjust-2: 145;
--g-lightness: 95%;
}
.silver {
--c-h: var(--silver);
--c-s: 10%;
--g-hue-adjust: 30;
--g-lightnes: 95%;
}
.silver .glow {
opacity: 0.25;
}
#deep-purple:checked ~ .phone .bg .deep-purple {
opacity: 1;
z-index: 1;
transition-delay: 0s;
}
#deep-purple:checked ~ .phone .bg .deep-purple .section::before {
transition-delay: 0s;
animation: test 1s infinite alternate-reverse;
}
#deep-purple:checked ~ .pallette label[for="deep-purple"] {
border-color: hsl(var(--deep-purple), 50%, 75%);
}
#gold:checked ~ .phone .bg .gold {
opacity: 1;
z-index: 1;
transition-delay: 0s;
}
#gold:checked ~ .phone .bg .gold .section::before {
transition-delay: 0s;
transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
animation: test 1s infinite alternate-reverse;
}
#gold:checked~ .pallette label[for="gold"] {
border-color: hsl(var(--gold), 50%, 75%);
}
#space-black:checked ~ .phone .bg .space-black {
opacity: 1;
z-index: 1;
transition-delay: 0s;
}
#space-black:checked ~ .phone .bg .space-black .section::before {
transition-delay: 0s;
transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
animation: test 1s infinite alternate-reverse;
}
#space-black:checked ~ .pallette label[for="space-black"] {
border-color: hsl(var(--space-black), 50%, 75%);
}
#silver:checked ~ .phone .bg .silver {
opacity: 1;
z-index: 1;
transition-delay: 0s;
}
#silver:checked ~ .phone .bg .silver .section::before {
transition-delay: 0s;
transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
animation: test 1s infinite alternate-reverse;
}
#silver:checked ~ .pallette label[for="silver"] {
border-color: hsl(var(--silver), 50%, 75%);
}
@keyframes test {
from {
transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
}
to {
transform: scale3d(2, 2, 2) translate3d(50px, 50px, 50px);
}
}
Know your dynamic island iPhone 14 of call feature is ready. You may also view the video if you want to get more in-depth information.
You Might Like This
- Responsive Menu Using HTML and CSS
- Animated Login Form Using HTML and CSS only
- Netflix Clone Using HTML and CSS
That’s all, now you’ve successfully created a dynamic island iPhone 14 design in HTML and CSS. Please obtain the source code files from the provided download button if your code doesn’t function or you’ve encountered any errors or problems. You must first extract the .zip file that will be downloaded as part of the free service.
Download Source Code
For further amazing and pleasurable topics keep visiting my blogging channel www.codingpakistan.com. I always try to give some special techniques to my readers. Thank you for your time I am sure you will like my content, and if any other topic is on your mind so feel free and share it with me.
