Wie füge ich ein zentriertes div hinzu, das von oben über meinen Inhalt eingeblendet wird?

-2

Dies ist meine grundlegende HTML-Struktur:Wie füge ich ein zentriertes div hinzu, das von oben über meinen Inhalt eingeblendet wird?

<body> 
    <div class="fadeInDown"> 
     I want this to appear centered, from the top and over all my content 
    </div> 

    <div id='content'> 
     ...much complex html layout...bootstrap...wow 
    </div> 
</body>

Ich würde meine fadeInDown div mag wie diese Art von erscheinen: https://fabriceleven.com/dev/quickly-add-css-fade-in-animations/ (das „Going down“ Beispiel)

Wie erreiche ich ein Div zum Zentrum oben und über alles andere?

Quelle

2016-08-05 ibiza

Es wird erwartet, dass Sie zumindest versuchen, diese für sich selbst zu codieren. Stack Overflow ist kein Code-Schreibdienst. Ich würde vorschlagen, dass Sie einige [** zusätzliche Forschung **] (http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-sected-of-stack-overflow-users) tun entweder über Google oder durch die Suche nach SO, versuchen und. Wenn Sie immer noch Probleme haben, kommen Sie zurück mit ** Ihrem Code ** und erklären Sie, was Sie versucht haben und warum es nicht funktioniert hat. –

Ich habe viel probiert, bevor ich das gepostet habe ... Danke @Paulie_D :( – ibiza

... und was hast du ausprobiert? Wir haben keine Gedankenleser. Du musst * deine Forschung * zeigen, damit wir nicht verschwenden oder Duplikate etwas, das du bereits abgelehnt hast –

Es zeigt Ihnen, wie dies in der Verbindung zu erreichen, die Sie

enthalten

.on-top { 
 
    position: absolute; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 
.animate { 
 
    -webkit-animation-duration: 1s; 
 
    animation-duration: 1s; 
 
    -webkit-animation-fill-mode: both; 
 
    animation-fill-mode: both; 
 
} 
 
@-webkit-keyframes fadeInDown { 
 
    from { 
 
    opacity: 0; 
 
    -webkit-transform: translate3d(0, -100%, 0); 
 
    transform: translate3d(0, -100%, 0); 
 
    } 
 
    to { 
 
    opacity: 1; 
 
    -webkit-transform: none; 
 
    transform: none; 
 
    } 
 
} 
 
@keyframes fadeInDown { 
 
    from { 
 
    opacity: 0; 
 
    -webkit-transform: translate3d(0, -100%, 0); 
 
    transform: translate3d(0, -100%, 0); 
 
    } 
 
    to { 
 
    opacity: 1; 
 
    -webkit-transform: none; 
 
    transform: none; 
 
    } 
 
} 
 
.fadeInDown { 
 
    -webkit-animation-name: fadeInDown; 
 
    animation-name: fadeInDown; 
 
}

<body> 
 
    <div class="on-top animate fadeInDown"> 
 
    I want this to appear centered, from the top and over all my content 
 
    </div> 
 

 
    <div id='content'> 
 
    ...much complex html layout...bootstrap...wow 
 
    </div> 
 
</body>

Quelle

2016-08-05 14:41:36

Danke, aber das verblassen div findet immer noch auf der Leinwand statt, ich möchte es über den Inhaltstext erscheinen, nicht über – ibiza

@ibiza siehe update –

oh danke, mir fehlte das absolute Positionssache> _ < – ibiza

Wie füge ich ein zentriertes div hinzu, das von oben über meinen Inhalt eingeblendet wird?

Antwort

Verwandte Themen