Partage
  • Partager sur Facebook
  • Partager sur Twitter

Mettre un texte par dessus une animation

CSS/HTML

LozzSti
    20 janvier 2021 à 11:29:13

    Bonjour, je suis en terminale STI2D et nous apprenons a developper en HTML/CSS

    j'ai réussi à mettre en backround une animation prise sur internet, cependant mon texte n'apparait pas et mon prof n'a pas de solution. 

    Je vous met le code en HTML et CSS ci-dessous

    HTML:

    <!DOCTYPE html>

    <html>

         <head>

            <meta charset="utf-8"/>

            <link rel="stylesheet" href="style.css"/>

         <title>Space</title>

        </head>

        <body>

            <div1>

                <h1>Space</h1>

            </div1>

            <div2 class="background">

       <span></span>

       <span></span>

       <span></span>

       <span></span>

       <span></span>

       <span></span>

       <span></span>

       <span></span>

       <span></span>

       <span></span>

       <span></span>

       <span></span>

       <span></span>

       <span></span>

       <span></span>

       <span></span>

       <span></span>

       <span></span>

       <span></span>

    </div2>

        </body>

    </html>

    CSS:

    @keyframes move {

        100% {

            transform: translate3d(0, 0, 1px) rotate(360deg);

        }

    }

    .background {

        position: fixed;

        width: 100vw;

        height: 100vh;

        top: 0;

        left: 0;

        background: #18131a;

        overflow: hidden;

    }

    .background span {

        width: 20vmin;

        height: 20vmin;

        border-radius: 20vmin;

        backface-visibility: hidden;

        position: absolute;

        animation: move;

        animation-duration: 45;

        animation-timing-function: linear;

        animation-iteration-count: infinite;

    }

    .background span:nth-child(0) {

        color: #8688f9;

        top: 24%;

        left: 81%;

        animation-duration: 51s;

        animation-delay: -42s;

        transform-origin: -13vw 4vh;

        box-shadow: 40vmin 0 5.234158824563618vmin currentColor;

    }

    .background span:nth-child(1) {

        color: #8688f9;

        top: 15%;

        left: 26%;

        animation-duration: 20s;

        animation-delay: -39s;

        transform-origin: 5vw 4vh;

        box-shadow: 40vmin 0 5.9822554584478125vmin currentColor;

    }

    .background span:nth-child(2) {

        color: #383838;

        top: 5%;

        left: 51%;

        animation-duration: 21s;

        animation-delay: -16s;

        transform-origin: -21vw 19vh;

        box-shadow: -40vmin 0 5.253477638634168vmin currentColor;

    }

    .background span:nth-child(3) {

        color: #383838;

        top: 17%;

        left: 11%;

        animation-duration: 12s;

        animation-delay: -42s;

        transform-origin: -5vw -17vh;

        box-shadow: -40vmin 0 5.884364323396579vmin currentColor;

    }

    .background span:nth-child(4) {

        color: #ff2d00;

        top: 33%;

        left: 43%;

        animation-duration: 26s;

        animation-delay: -22s;

        transform-origin: -17vw 23vh;

        box-shadow: -40vmin 0 5.335557759316618vmin currentColor;

    }

    .background span:nth-child(5) {

        color: #ff2d00;

        top: 52%;

        left: 46%;

        animation-duration: 42s;

        animation-delay: -14s;

        transform-origin: -18vw 11vh;

        box-shadow: -40vmin 0 5.929206665779688vmin currentColor;

    }

    .background span:nth-child(6) {

        color: #8688f9;

        top: 92%;

        left: 31%;

        animation-duration: 46s;

        animation-delay: -43s;

        transform-origin: 5vw 10vh;

        box-shadow: -40vmin 0 5.7115367186223756vmin currentColor;

    }

    .background span:nth-child(7) {

        color: #ff2d00;

        top: 8%;

        left: 24%;

        animation-duration: 50s;

        animation-delay: -14s;

        transform-origin: -6vw -19vh;

        box-shadow: 40vmin 0 5.803684536891869vmin currentColor;

    }

    .background span:nth-child(8) {

        color: #383838;

        top: 37%;

        left: 37%;

        animation-duration: 20s;

        animation-delay: -49s;

        transform-origin: -9vw 9vh;

        box-shadow: 40vmin 0 5.546017102817567vmin currentColor;

    }

    .background span:nth-child(9) {

        color: #8688f9;

        top: 55%;

        left: 16%;

        animation-duration: 19s;

        animation-delay: -45s;

        transform-origin: 16vw -23vh;

        box-shadow: -40vmin 0 5.386313517669292vmin currentColor;

    }

    .background span:nth-child(10) {

        color: #ff2d00;

        top: 87%;

        left: 72%;

        animation-duration: 37s;

        animation-delay: -11s;

        transform-origin: 22vw -23vh;

        box-shadow: -40vmin 0 5.970018634585196vmin currentColor;

    }

    .background span:nth-child(11) {

        color: #8688f9;

        top: 49%;

        left: 68%;

        animation-duration: 30s;

        animation-delay: -6s;

        transform-origin: -12vw -17vh;

        box-shadow: -40vmin 0 5.814449873652528vmin currentColor;

    }

    .background span:nth-child(12) {

        color: #383838;

        top: 35%;

        left: 11%;

        animation-duration: 50s;

        animation-delay: -40s;

        transform-origin: -12vw 8vh;

        box-shadow: -40vmin 0 5.350996344207672vmin currentColor;

    }

    .background span:nth-child(13) {

        color: #ff2d00;

        top: 93%;

        left: 36%;

        animation-duration: 29s;

        animation-delay: -18s;

        transform-origin: -8vw -19vh;

        box-shadow: 40vmin 0 5.459696439115486vmin currentColor;

    }

    .background span:nth-child(14) {

        color: #ff2d00;

        top: 65%;

        left: 62%;

        animation-duration: 32s;

        animation-delay: -12s;

        transform-origin: -18vw -5vh;

        box-shadow: 40vmin 0 5.7783198984182755vmin currentColor;

    }

    .background span:nth-child(15) {

        color: #8688f9;

        top: 21%;

        left: 99%;

        animation-duration: 41s;

        animation-delay: -7s;

        transform-origin: 19vw 5vh;

        box-shadow: -40vmin 0 5.285958773775644vmin currentColor;

    }

    .background span:nth-child(16) {

        color: #ff2d00;

        top: 99%;

        left: 37%;

        animation-duration: 23s;

        animation-delay: -15s;

        transform-origin: 4vw 6vh;

        box-shadow: -40vmin 0 5.503538910690528vmin currentColor;

    }

    .background span:nth-child(17) {

        color: #ff2d00;

        top: 79%;

        left: 99%;

        animation-duration: 21s;

        animation-delay: -37s;

        transform-origin: 18vw 10vh;

        box-shadow: 40vmin 0 5.3725797120735574vmin currentColor;

    }

    .background span:nth-child(18) {

        color: #8688f9;

        top: 76%;

        left: 1%;

        animation-duration: 39s;

        animation-delay: -43s;

        transform-origin: 9vw -21vh;

        box-shadow: 40vmin 0 5.789737992336106vmin currentColor;

    }

    .background span:nth-child(19) {

        color: #383838;

        top: 24%;

        left: 15%;

        animation-duration: 45s;

        animation-delay: -30s;

        transform-origin: 2vw 19vh;

        box-shadow: 40vmin 0 5.7089426385086925vmin currentColor;

    }

    h1

    {

        color:#FF2D00;

        text-align: center;

        border-width: medium;

        border-color:#FF2D00;

        border-style: outset;

    }

    #div1

    {

        z-index: 10000000;

    }

    #div2{

        z-index: 1;

    }

    Je vous remercie d'avance pour vos réponses qui pourrons peut-être m'aider

    • Partager sur Facebook
    • Partager sur Twitter
    AbcAbc6
      20 janvier 2021 à 11:46:53

      Bonjour,

      Le message qui suit est une réponse automatique activée par un membre de l'équipe. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose, ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention.
      Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.
      Pour plus d'informations, nous vous invitons à lire les règles générales du forum

      Merci de colorer votre code à l'aide du bouton Code

      Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour cela, il faut utiliser le bouton Code de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: xml;">Votre code ici</pre>.

      Merci de modifier votre message d'origine en fonction.

      Liens conseillés

      Bonjour, Passe ton code au validateur pour voir et corriger tes erreurs => https://validator.w3.org/#validate_by_input

      Tu ne peux pas inventer des balises; <div1> et <div2> n'existe pas. Il ne faut pas s’occuper  du CSS tant que tu as des erreurs de syntaxe dans le HTML;

      Pour faire passer un élément par dessus un autre donne lui un z-index supérieur;

      • Partager sur Facebook
      • Partager sur Twitter

      Mettre un texte par dessus une animation

      × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
      × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
      • Editeur ●
      • Markdown