Skip to content

Commit fa238d1

Browse files
mitul-bhatiamitu1046
mitul-bhatia
and
mitu1046
authored
Animatedphone (#715)
* Solar_System Animation ART * Animatedphone --------- Co-authored-by: mitul-bhatia <mitumuma@gmail.com>
1 parent 38865ae commit fa238d1

File tree

2 files changed

+160
-0
lines changed

2 files changed

+160
-0
lines changed

‎Animated_Iphone_design/animatedipne.html

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<style>
5+
body {
6+
display: flex;
7+
justify-content: center;
8+
align-items: center;
9+
min-height: 100vh;
10+
background: #111;
11+
margin: 0;
12+
}
13+
14+
.iphone {
15+
position: relative;
16+
width: 250px;
17+
height: 480px;
18+
background: #222;
19+
border-radius: 40px;
20+
animation: float 3s ease-in-out infinite, rotate 15s linear infinite;
21+
box-shadow: 0 0 30px rgba(0,0,0,0.3);
22+
}
23+
24+
.iphone::before {
25+
content: '';
26+
position: absolute;
27+
width: 90%;
28+
height: 92%;
29+
background: #000;
30+
top: 4%;
31+
left: 5%;
32+
border-radius: 33px;
33+
}
34+
35+
.iphone::after {
36+
content: '';
37+
position: absolute;
38+
width: 45%;
39+
height: 4%;
40+
background: #222;
41+
top: 0;
42+
left: 27.5%;
43+
border-radius: 0 0 20px 20px;
44+
}
45+
46+
.screen {
47+
position: absolute;
48+
width: 85%;
49+
height: 87%;
50+
background: linear-gradient(45deg, #4facfe, #00f2fe);
51+
top: 6.5%;
52+
left: 7.5%;
53+
border-radius: 28px;
54+
overflow: hidden;
55+
animation: screenGlow 2s ease-in-out infinite;
56+
}
57+
58+
.notch {
59+
position: absolute;
60+
width: 50%;
61+
height: 4%;
62+
background: #222;
63+
top: 0;
64+
left: 25%;
65+
border-radius: 0 0 20px 20px;
66+
}
67+
68+
.shine {
69+
position: absolute;
70+
width: 100%;
71+
height: 100%;
72+
background: linear-gradient(
73+
135deg,
74+
rgba(255,255,255,0.5) 0%,
75+
transparent 50%,
76+
rgba(255,255,255,0.5) 100%
77+
);
78+
animation: shine 4s linear infinite;
79+
}
80+
81+
.circles {
82+
position: absolute;
83+
width: 100%;
84+
height: 100%;
85+
}
86+
87+
.circle {
88+
position: absolute;
89+
border-radius: 50%;
90+
background: rgba(255,255,255,0.1);
91+
animation: moveCircle 8s linear infinite;
92+
}
93+
94+
.circle:nth-child(1) {
95+
width: 60px;
96+
height: 60px;
97+
left: -30px;
98+
top: 50%;
99+
animation-delay: 0s;
100+
}
101+
102+
.circle:nth-child(2) {
103+
width: 80px;
104+
height: 80px;
105+
right: -40px;
106+
top: 20%;
107+
animation-delay: -2s;
108+
}
109+
110+
.circle:nth-child(3) {
111+
width: 40px;
112+
height: 40px;
113+
left: 50%;
114+
bottom: -20px;
115+
animation-delay: -4s;
116+
}
117+
118+
@keyframes float {
119+
0%, 100% { transform: translateY(0); }
120+
50% { transform: translateY(-20px); }
121+
}
122+
123+
@keyframes rotate {
124+
0% { transform: rotate(0deg); }
125+
100% { transform: rotate(360deg); }
126+
}
127+
128+
@keyframes screenGlow {
129+
0%, 100% { box-shadow: 0 0 30px rgba(79,172,254,0.6); }
130+
50% { box-shadow: 0 0 50px rgba(0,242,254,0.8); }
131+
}
132+
133+
@keyframes shine {
134+
0% { transform: translateX(-100%) translateY(-100%); }
135+
100% { transform: translateX(100%) translateY(100%); }
136+
}
137+
138+
@keyframes moveCircle {
139+
0% { transform: translate(0, 0); }
140+
25% { transform: translate(50px, 50px); }
141+
50% { transform: translate(0, 100px); }
142+
75% { transform: translate(-50px, 50px); }
143+
100% { transform: translate(0, 0); }
144+
}
145+
</style>
146+
</head>
147+
<body>
148+
<div class="iphone">
149+
<div class="screen">
150+
<div class="notch"></div>
151+
<div class="shine"></div>
152+
<div class="circles">
153+
<div class="circle"></div>
154+
<div class="circle"></div>
155+
<div class="circle"></div>
156+
</div>
157+
</div>
158+
</div>
159+
</body>
160+
</html>

‎Animated_Iphone_design/output.png

534 KB
Loading

0 commit comments

Comments
 (0)