body {
margin: 0;
font-family: 'Arial', sans-serif;
background: radial-gradient(circle, #000033, #000011);
color: white;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
position: relative;
}
.container {
text-align: center;
}
h1 {
font-size: 3rem;
text-shadow: 0 0 10px #fff, 0 0 20px #fff;
}
.button {
display: inline-block;
margin-top: 20px;
padding: 15px 40px;
background: linear-gradient(45deg, #6a0dad, #8a2be2);
color: white;
border-radius: 30px;
text-decoration: none;
font-size: 1.5rem;
box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
transition: transform 0.3s, box-shadow 0.3s;
}
.button:hover {
transform: scale(1.1);
box-shadow: 0 0 30px rgba(255, 255, 255, 1);
}
.icon {
margin-right: 8px;
}
body::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.2), transparent);
animation: twinkle 2s infinite;
z-index: -1;
}
@keyframes twinkle {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
/* Flower Animation */
.scene {
display: flex;
justify-content: center;
align-items: flex-end;
position: relative;
height: 60vh;
}
.flower {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
animation: grow-flower 3s ease-in-out forwards;
}
.stem {
width: 5px;
height: 0;
background: green;
animation: grow-stem 2s ease-in forwards;
}
.petals {
width: 50px;
height: 5px;
background: rgb(12, 182, 12);
border-radius: 50%;
position: absolute;
bottom: 50px;
opacity: 0;
animation: bloom 2s 1.5s forwards;
}
@keyframes grow-stem {
to {
height: 150px;
}
}
@keyframes bloom {
to {
opacity: 1;
}
}
@keyframes grow-flower {
0% {
transform: scale(0.5);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 1;
}
}
Hi there!
Post a live link to your code, if possible. Also post the html file too here.