CodePen - disegnare fiori con Greensock

2606 Andev.web

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

18 October 2025

Modello HTML di base con pulsante (spagnolo)

12 December 2025

Gioco clicker con aggiornamenti e sistema di rinascita

14 May 2025

sistema di donazione con importi multipli

HTML

CSS

body {
  height: 100%;
  width: 100%;
  background: #080f1a;
  overflow: hidden;
}
.container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.glass {
  height: 350px;
  width: 200px;
  background: #122139;
  border-radius: 300px 300px 0px 0px;
}
.glass:before {
  content: "";
  height: 10px;
  width: 10px;
  transform-origin: center;
  border: 10px solid #122139;
  border-radius: 100%;
  position: absolute;
  left: 87px;
  top: -25px;
}
.glass:after {
  content: "";
  position: absolute;
  height: 15px;
  width: 250px;
  background: #a52a2a;
  top: 100%;
  left: -13%;
}

.shine {
  width: 12px;
  height: 140px;
  background: white;
  opacity: 0.2;
  position: absolute;
  left: 85%;
  top: 80px;
  border-radius: 100px;
  z-index: 10;
}
.shine:before {
  content: "";
  width: 12px;
  height: 20px;
  position: absolute;
  background: white;
  top: 160px;
  border-radius: 100px;
}

.petals > div {
  position: absolute;
  background: #d52d58;
  width: 45px;
  height: 80px;
  top: 55px;
  transition: all 0.5s ease-out;
}
.petals > div:nth-child(1) {
  border-radius: 15px;
  box-shadow: 0px 0px 30px #f594b8;
  left: 80px;
  top: 60px;
  background: #d52d58;
}
.petals > div:nth-child(2), .petals > div:nth-child(4), .petals > div:nth-child(6) {
  background: #b81b43;
  left: 60px;
  border-radius: 0px 30px 0px 30px;
  transform-origin: bottom right;
}
.petals > div:nth-child(3), .petals > div:nth-child(5), .petals > div:nth-child(7) {
  background: #b81b43;
  left: 100px;
  border-radius: 30px 0px 30px 0px;
  transform-origin: bottom left;
}
.petals > div:nth-child(2) {
  z-index: 5;
  background: #ab1a3f;
  top: 75px;
  height: 70px;
  box-shadow: 0px 0px 50px rgba(245, 148, 184, 0.5);
  animation: bloom2 3s ease-in-out;
  animation-fill-mode: forwards;
}
.petals > div:nth-child(3) {
  z-index: 4;
  background: #ab1a3f;
  top: 75px;
  height: 70px;
  box-shadow: 0px 0px 50px rgba(245, 148, 184, 0.5);
  animation: bloom3 3s ease-in-out, glowing 2.5s ease-in-out infinite;
  animation-fill-mode: forwards;
}
.petals > div:nth-child(4) {
  z-index: 3;
  background: #b81b43;
  top: 70px;
  height: 75px;
  box-shadow: 0px 0px 50px rgba(245, 148, 184, 0.5);
  animation: bloom4 3s ease-in-out, glowing 2.5s ease-in-out infinite;
  animation-fill-mode: forwards;
}
.petals > div:nth-child(5) {
  z-index: 2;
  background: #b81b43;
  top: 70px;
  height: 75px;
  box-shadow: 0px 0px 50px rgba(245, 148, 184, 0.5);
  animation: bloom5 3s ease-in-out, glowing 2.5s ease-in-out infinite;
  animation-fill-mode: forwards;
}
.petals > div:nth-child(6) {
  z-index: 1;
  background: #c9204b;
  top: 65px;
  height: 70px;
  box-shadow: 0px 0px 50px rgba(245, 148, 184, 0.3);
  animation: bloom6 3s ease-in-out, glowing 2.5s ease-in-out infinite;
  animation-fill-mode: forwards;
}
.petals > div:nth-child(7) {
  z-index: 0;
  background: #c9204b;
  top: 65px;
  height: 70px;
  box-shadow: 0px 0px 50px rgba(245, 148, 184, 0.3);
  animation: bloom7 3s ease-in-out, glowing 2.5s ease-in-out infinite;
  animation-fill-mode: forwards;
}

.deadPetals > div {
  position: absolute;
  background: #d52d58;
  width: 20px;
  height: 15px;
  top: 120px;
  border-radius: 0px 30px 0px 30px;
  box-shadow: 0px 0px 30px rgba(245, 148, 184, 0.5);
  transition: all 0.5s ease-out;
}
.deadPetals > div:nth-child(1) {
  left: 89px;
  transform: rotate(-30deg);
  animation: falling 20s 4s ease-in-out infinite;
}
.deadPetals > div:nth-child(2) {
  left: 72px;
  transform: rotate(-30deg);
  animation: falling 20s 8s ease-in-out infinite;
}
.deadPetals > div:nth-child(3) {
  left: 88px;
  transform: rotate(-30deg);
  animation: falling 20s 12s ease-in-out infinite;
}
.deadPetals > div:nth-child(4) {
  left: 94px;
  transform: rotate(-30deg);
  animation: falling 20s 16s ease-in-out infinite;
}

.leaves > div:nth-last-child(1) {
  position: absolute;
  width: 55px;
  height: 30px;
  background: #338f37;
  top: 120px;
  left: 75px;
  border-radius: 100px;
}
.leaves > div:nth-child(1) {
  position: absolute;
  width: 6px;
  height: 210px;
  background: #054c05;
  top: 95px;
  left: 100px;
  border-radius: 0 0 100px 100px;
}
.leaves > div:nth-child(2) {
  position: absolute;
  width: 30px;
  height: 50px;
  top: 53px;
  border-radius: 5px 40px 20px 40px;
  background: #054c05;
  transform-origin: bottom;
  transform: rotate(-30deg);
  top: 180px;
  left: 80px;
  box-shadow: inset 5px 5px #066406;
}
.leaves > div:nth-child(3) {
  position: absolute;
  width: 30px;
  height: 50px;
  top: 53px;
  border-radius: 40px 5px 40px 20px;
  background: #054c05;
  transform-origin: bottom;
  transform: rotate(30deg);
  top: 150px;
  left: 95px;
  box-shadow: inset -5px 5px #066406;
}

.thorns > div {
  position: absolute;
  width: 0;
  height: 0;
  top: 140px;
}
.thorns > div:nth-child(odd) {
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid #054c05;
  left: 105px;
}
.thorns > div:nth-child(even) {
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 5px solid #054c05;
  left: 95px;
}
.thorns > div:nth-child(1) {
  top: 200px;
}
.thorns > div:nth-child(2) {
  top: 170px;
}
.thorns > div:nth-child(4) {
  top: 230px;
}

@keyframes bloom2 {
  50% {
    transform: rotate(-90deg);
    top: 200px;
    left: 100px;
  }
  100% {
    transform: rotate(-60deg);
    top: 252px;
    left: 50px;
    background: #71122a;
    box-shadow: 0px 0px 0px rgba(245, 148, 184, 0);
  }
}
@keyframes bloom3 {
  100% {
    transform: rotate(45deg);
  }
}
@keyframes bloom4 {
  100% {
    transform: rotate(-20deg);
  }
}
@keyframes bloom5 {
  100% {
    transform: rotate(20deg);
  }
}
@keyframes bloom6 {
  100% {
    transform: rotate(-5deg);
  }
}
@keyframes bloom7 {
  100% {
    transform: rotate(5deg);
  }
}
@keyframes glowing {
  50% {
    background: #d7365f;
    box-shadow: 0px 0px 60px #f594b8;
  }
}
@keyframes falling {
  20% {
    top: 335px;
    background: #9d193b;
    box-shadow: 0px 0px 0px rgba(245, 148, 184, 0);
  }
  100% {
    top: 335px;
    opacity: 0;
  }
}

Consigliato

Modello HTML di base con pulsante (spagnolo)

Gioco clicker con aggiornamenti e sistema di rinascita

sistema di donazione con importi multipli

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS