Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit f70f42f

Browse files
ShasikhanShasikhan
committed
added 3 new aniamtions
1 parent cc9b4f9 commit f70f42f

2 files changed

Lines changed: 174 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -258,6 +258,38 @@ <h1>Loading Animations</h1>
258258
</div>
259259
<span class="animation-label">Data Stream</span>
260260
</div>
261+
262+
<div class="animation-item">
263+
<div class="loader-card">
264+
<div class="hologram-loader">
265+
<div class="hologram-circle"></div>
266+
<div class="hologram-scan"></div>
267+
<div class="hologram-lines"></div>
268+
</div>
269+
</div>
270+
<span class="animation-label">Hologram Scanner</span>
271+
</div>
272+
273+
<div class="animation-item">
274+
<div class="loader-card">
275+
<div class="matrix-loader">
276+
<div class="matrix-column"></div>
277+
<div class="matrix-column"></div>
278+
<div class="matrix-column"></div>
279+
</div>
280+
</div>
281+
<span class="animation-label">Matrix Rain</span>
282+
</div>
283+
284+
<div class="animation-item">
285+
<div class="loader-card">
286+
<div class="neural-pulse">
287+
<div class="pulse-node"></div>
288+
<div class="pulse-rings"></div>
289+
</div>
290+
</div>
291+
<span class="animation-label">Neural Pulse</span>
292+
</div>
261293
</div>
262294
</section>
263295
</main>

‎styles.css‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,7 @@ header p {
9292
backdrop-filter: blur(10px);
9393
border: 1px solid rgba(255, 255, 255, 0.1);
9494
transition: transform 0.3s ease, box-shadow 0.3s ease;
95+
overflow: hidden;
9596
}
9697

9798
.loader-card:hover {
@@ -367,6 +368,41 @@ header p {
367368
}
368369
}
369370

371+
/* Matrix Rain Animation */
372+
.matrix-loader {
373+
position: relative;
374+
width: 80px;
375+
height: 80px;
376+
display: flex;
377+
justify-content: space-between;
378+
margin: 10px auto;
379+
}
380+
381+
.matrix-column {
382+
width: 3px;
383+
height: 100%;
384+
background: linear-gradient(180deg,
385+
transparent 0%,
386+
var(--neon-blue) 50%,
387+
transparent 100%);
388+
animation: matrix-rain-fall 1.5s infinite;
389+
opacity: 0;
390+
}
391+
392+
.matrix-column:nth-child(2) {
393+
animation-delay: 0.5s;
394+
}
395+
396+
.matrix-column:nth-child(3) {
397+
animation-delay: 1s;
398+
}
399+
400+
@keyframes matrix-rain-fall {
401+
0% { transform: translateY(-100%); opacity: 0; }
402+
50% { opacity: 1; }
403+
100% { transform: translateY(100%); opacity: 0; }
404+
}
405+
370406
/* Infinity Animation */
371407
.infinity {
372408
width: 60px;
@@ -1241,6 +1277,60 @@ header p {
12411277
animation-duration: 1.5s;
12421278
}
12431279

1280+
/* Neural Pulse Animation */
1281+
.neural-pulse {
1282+
position: relative;
1283+
width: 100px;
1284+
height: 100px;
1285+
}
1286+
1287+
.pulse-node {
1288+
position: absolute;
1289+
width: 20px;
1290+
height: 20px;
1291+
background: var(--neon-pink);
1292+
border-radius: 50%;
1293+
top: 50%;
1294+
left: 50%;
1295+
transform: translate(-50%, -50%);
1296+
box-shadow: 0 0 20px var(--neon-pink);
1297+
animation: pulse-glow 2s ease-in-out infinite;
1298+
}
1299+
1300+
.pulse-rings {
1301+
position: absolute;
1302+
width: 100%;
1303+
height: 100%;
1304+
border: 2px solid var(--neon-pink);
1305+
border-radius: 50%;
1306+
top: 0;
1307+
left: 0;
1308+
opacity: 0;
1309+
animation: pulse-expand 2s ease-out infinite;
1310+
}
1311+
1312+
.pulse-rings::before,
1313+
.pulse-rings::after {
1314+
content: '';
1315+
position: absolute;
1316+
width: 100%;
1317+
height: 100%;
1318+
border: 2px solid var(--neon-pink);
1319+
border-radius: 50%;
1320+
animation: pulse-expand 2s ease-out infinite;
1321+
animation-delay: 0.5s;
1322+
}
1323+
1324+
@keyframes pulse-glow {
1325+
0%, 100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.5; }
1326+
50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
1327+
}
1328+
1329+
@keyframes pulse-expand {
1330+
0% { transform: scale(0.5); opacity: 1; }
1331+
100% { transform: scale(2); opacity: 0; }
1332+
}
1333+
12441334
/* GitHub Corner */
12451335
.github-corner {
12461336
position: absolute;
@@ -1351,4 +1441,56 @@ footer a:hover {
13511441
.animation-label {
13521442
font-size: 1rem;
13531443
}
1444+
}
1445+
1446+
/* Hologram Scanner Animation */
1447+
.hologram-loader {
1448+
position: relative;
1449+
width: 100px;
1450+
height: 100px;
1451+
}
1452+
1453+
.hologram-circle {
1454+
position: absolute;
1455+
width: 100%;
1456+
height: 100%;
1457+
border: 2px solid var(--neon-blue);
1458+
border-radius: 50%;
1459+
animation: hologram-rotate 4s linear infinite;
1460+
}
1461+
1462+
.hologram-scan {
1463+
position: absolute;
1464+
width: 100%;
1465+
height: 2px;
1466+
background: var(--neon-blue);
1467+
top: 50%;
1468+
transform-origin: center;
1469+
animation: hologram-scan 2s ease-in-out infinite;
1470+
box-shadow: 0 0 15px var(--neon-blue);
1471+
}
1472+
1473+
.hologram-lines {
1474+
position: absolute;
1475+
width: 100%;
1476+
height: 100%;
1477+
border: 1px dashed var(--neon-blue);
1478+
border-radius: 50%;
1479+
opacity: 0.5;
1480+
animation: hologram-pulse 2s ease-in-out infinite;
1481+
}
1482+
1483+
@keyframes hologram-rotate {
1484+
0% { transform: rotate(0deg); }
1485+
100% { transform: rotate(360deg); }
1486+
}
1487+
1488+
@keyframes hologram-scan {
1489+
0%, 100% { transform: translateY(-50%) rotate(0deg); opacity: 0.3; }
1490+
50% { transform: translateY(-50%) rotate(180deg); opacity: 1; }
1491+
}
1492+
1493+
@keyframes hologram-pulse {
1494+
0%, 100% { transform: scale(0.8); opacity: 0.3; }
1495+
50% { transform: scale(1.2); opacity: 0.7; }
13541496
}

0 commit comments

Comments
 (0)