Structure HTML Sunflower CSS

337 programme

Ouvrir dans l'éditeur Publiez votre code

Recommandé

30 January 2026

9007199254740992 Code source HTML du jeu

16 September 2025

Carrousel de cartes 3D HTML CSS JavaScript

12 December 2025

Modèle de jeu Flappy Bird sur toile HTML

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sunflower</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="sunflower">
        <div class="flower_wrapper">
            <div class="flower_stem"></div>
            <div class="flower_center"></div>
            <div class="flower_petal flower_petal-1"></div>
            <div class="flower_petal flower_petal-2"></div>
            <div class="flower_petal flower_petal-3"></div>
            <div class="flower_petal flower_petal-4"></div>
            <div class="flower_petal flower_petal-5"></div>
            <div class="flower_petal flower_petal-6"></div>
            <div class="flower_petal flower_petal-7"></div>
            <div class="flower_petal flower_petal-8"></div>
            <div class="flower_petal flower_petal-9"></div>
            <div class="flower_petal flower_petal-10"></div>
            <div class="flower_petal flower_petal-11"></div>
            <div class="flower_petal flower_petal-12"></div>

</body>
</html>

CSS

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

:root {
    --color-bg: linear-gradient(to top, #00d4ff, #000); 
    --line-color: linear-gradient(to left top, #82ff86 20%, #144425, #104e1c);
    --flower-center: radial-gradient(circle, #000, #ff5e00);
    --leaf-color: radial-gradient(circle, #82ff86, #104e1c);
    --petal-color: radial-gradient(circle, #ff5e00, #ffbb00);
}

body{
    background-image: var(--color-bg);
    min-height: 100vh;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
}

.flower_wrapper{
    position: absolute;
    left: 50%;
    bottom: 2vmin;
    animation: moving-flower-1 4s linear infinite;
}

.flower_stem{
    width: 2vmin;
    height: 65vmin;
    background-image: var(--line-color);
    border-radius: 4vmin;
    animation-delay: 0.3s;
}

.flower_center{
    position: absolute;
    top: 0vmin;
    left: 50%;
    z-index: 5;
    transform: translateX(-50%) rotate(-10deg);
    width: 20vmin;
    height: 20vmin;
    border-radius: 50%;
    background: var(--flower-center);
    animation: open-flower-middle 2s 0.4s backwards;
}

.flower_petal{
    position: absolute;
    left: 50%;
    z-index: 3;
    bottom: 55vmin;
    transform: translateX(-50%);
    width: 7vmin;
    height: 17vmin;
    height: 20vmin;
    background: var(--petal-color);
    clip-path: ellipse(50% 50% at 50% 50%);
    transform-origin: center bottom;
    animation: open-flower 2s 1s backwards;
}

.flower_petal-1{
    border-radius: 50% 50% 50% / 80% 80% 20% 20%;
    background-image: none;
    background: var(--petal-color);
    animation: open-flower 1.4s 1s backwards;
}

.flower_petal-2{
    transform: translateX(-50%) rotate(-30deg);
}
.flower_petal-3{
    transform: translateX(-50%) rotate(-60deg);
}
.flower_petal-4{
    transform: translateX(-50%) rotate(-90deg);
}
.flower_petal-5{
    transform: translateX(-50%) rotate(-120deg);
}
.flower_petal-6{
    transform: translateX(-50%) rotate(-150deg);
}
.flower_petal-7{
    transform: translateX(-50%) rotate(30deg);
}
.flower_petal-8{
    transform: translateX(-50%) rotate(60deg);
}
.flower_petal-9{
    transform: translateX(-50%) rotate(90deg);
}
.flower_petal-10{
    transform: translateX(-50%) rotate(120deg);
}
.flower_petal-11{
    transform: translateX(-50%) rotate(150deg);
}
.flower_petal-12{
    transform: translateX(-50%) rotate(180deg);
}

.flower_leaf{
    position: absolute;
    left: 60%;
    bottom: 18vmin;
    transform: translateX(-45%) rotate(80deg);
    width: 7vmin;
    height: 17vmin;
    background: var(--leaf-color);
    clip-path: none;
    border-radius: 10vmin 2vmin 10vmin 2vmin;
    transform-origin: center bottom;
}

.flower_leaf-1{
    bottom: 18vmin;
    transform: translateX(-45%) rotate(80deg);
}

.flower_leaf-2{
    bottom: 23vmin;
    transform: translateX(-55%) rotate(-80deg);
}

.flower_light{
    position: absolute;
    bottom: 70vmin;
    width: 1vmin;
    height: 1vmin;
    background-color: rgb(255, 251, 0);
    border-radius: 50%;
    filter: blur(0.2vmin);
    animation: light-ans 4s linear infinite backwards;
}

:nth-child(odd){
        background-color: #23f0ff;
    }

.flower_light-1{
        left: -2vmin;
        animation-delay: 1s;
    }

.flower_light-2{
        left: 3vmin;
        animation-delay: 0.5s;
    }

.flower_light-3{
        left: -6vmin;
        animation-delay: 0.3s;
    }

.flower_light-4{
        left: 6vmin;
        animation-delay: 0.9s;
    }

.flower_light-5{
        left: -1vmin;
        animation-delay: 1.5s;
    }

.flower_light-6{
        left: -4vmin;
        animation-delay: 3s;
    }

.flower_light-7{
        left: 3vmin;
        animation-delay: 2s;
    }

.flower_light-8{
        left: -6vmin;
        animation-delay: 3.5s;
    }

.light{
    position: absolute;
    bottom: 0vmin;
    width: 1vmin;
    height: 1vmin;
    background-color: rgb(255, 251, 0);
    border-radius: 50%;
    filter: blur(0.2vmin);
    animation: light-ans-background 7s linear infinite backwards;
}
    :nth-child(odd){
        background-color: #23f0ff;
    }

.light-1{
        left: 10vmin;
        animation-delay: 1s;
    }

.light-2{
        left: 20vmin;
        animation-delay: 0.5s;
    }

.light-3{
        left: 60vmin;
        animation-delay: 0.3s;
    }

.light-4{
        left: 80vmin;
        animation-delay: 0.9s;
    }

.light-5{
        left: 45vmin;
        animation-delay: 1.5s;
    }

.light-6{
        left: 10vmin;
        animation-delay: 3s;
    }

.light-7{
        left: 90vmax;
        animation-delay: 2s;
    }

.light-8{
        left: 60vmax;
        animation-delay: 3.5s;
    }

.light-9{
        left: 70vmax;
        animation-delay: 2s;
    }

.light-10{
        left: 95vmax;
        animation-delay: 3.5s;
    }

.light-11{
        left: 75vmax;
        animation-delay: 3s;
    }

.light-12{
        left: 85vmax;
        animation-delay: 0.5s;
    }

@keyframes open-flower-leaves{
    0%{
        opacity: 0;
        transform: translateX(-50%) scale(0);
    }
}

@keyframes open-flower{
    0%{
        transform: translateX(-50%) rotate(0);
    }
}

@keyframes open-flower-middle{
    0%{
        opacity: 0;
        transform: translateX(-50%) scale(0);
    }
}

@keyframes light-ans {
    0% {
      opacity: 0;
      transform: translateY(0vmin);
    }
  
    25% {
      opacity: 1;
      transform: translateY(-5vmin) translateX(-2vmin);
    }
  
    50% {
      opacity: 1;
      transform: translateY(-15vmin) translateX(2vmin);
      filter: blur(0.2vmin);
    }
  
    75% {
      transform: translateY(-20vmin) translateX(-2vmin);
      filter: blur(0.2vmin);
    }
  
    100% {
      transform: translateY(-30vmin);
      opacity: 0;
      filter: blur(1vmin);
    }
}

@keyframes light-ans-background {
    0% {
      opacity: 0;
      transform: translateY(0vmin);
    }
  
    25% {
      opacity: 1;
      transform: translateY(-10vmin) translateX(-2vmin);
    }
  
    50% {
      opacity: 1;
      transform: translateY(-20vmin) translateX(2vmin);
      filter: blur(0.2vmin);
    }
  
    60% {
      transform: translateY(-30vmin) translateX(-2vmin);
      filter: blur(0.2vmin);
    }
  
    70% {
        transform: translateY(-40vmin) translateX(2vmin);
        filter: blur(0.2vmin);
    }

80% {
        transform: translateY(-50vmin) translateX(-2vmin);
        filter: blur(0.2vmin);
    }

100% {
      transform: translateY(-60vmin);
      opacity: 0;
      filter: blur(1vmin);
    }
}