File size: 2,397 Bytes
77c24bf |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 |
/* Global Styles */
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow-x: hidden;
box-sizing: border-box;
}
body {
/* Background gradient hijau ketupat */
background: linear-gradient(135deg, #175344, #1e604d);
font-family: "Arial", sans-serif;
font-size: 1rem;
}
/* Styling untuk kartu ucapan yang sudah ada */
.card {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
border: none;
}
/* --- Animasi Bintang --- */
@keyframes twinkle {
0%,
100% {
opacity: 0.8;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.2);
}
}
/* Style untuk bintang */
.star {
position: absolute;
background: #fff;
border-radius: 50%;
width: 2px;
height: 2px;
animation: twinkle 2s infinite ease-in-out;
}
/* --- Elemen Ketupat --- */
.eid-ketupat {
position: absolute;
z-index: 2;
width: 80px;
height: 80px;
background: #32cd32; /* Warna hijau */
/* Bentuk diamond menggunakan clip-path */
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
border: 2px solid #006400; /* Warna dark green */
border-radius: 5px;
animation: swing 3s ease-in-out infinite;
}
/* --- Elemen Lentera --- */
.eid-lantern {
position: absolute;
z-index: 2;
width: 50px;
height: 70px;
background: #ffcc00;
border: 2px solid #ff9900;
border-radius: 10px;
box-shadow: 0 0 10px rgba(255, 204, 0, 0.9);
animation: swing 2.5s ease-in-out infinite, blink 1.5s ease-in-out infinite;
}
/* Keyframes untuk efek ayunan (swing) */
@keyframes swing {
0% {
transform: translateY(0) rotate(0deg);
}
25% {
transform: translateY(-5px) rotate(5deg);
}
50% {
transform: translateY(0) rotate(0deg);
}
75% {
transform: translateY(5px) rotate(-5deg);
}
100% {
transform: translateY(0) rotate(0deg);
}
}
/* Keyframes untuk efek kedip (blink) pada lentera */
@keyframes blink {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
/* Style untuk Three.js canvas (jika ada) */
#threeCanvas,
#tunnelCanvas {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: -1;
display: block;
}
/* Video Background */
#background-video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
object-fit: cover;
filter: opacity(0.99);
}
.child-container {
text-align: center;
margin: 0 auto;
}
.img-fluid {
margin: 5px;
width: 250px;
height: auto;
object-fit: cover;
}
|