Angel Of Death
Hi ihr Lieben
vielleicht könnt ihr mir helfen.
ich mach da jetzt seit 5 Stunden rum und ich weiss nicht mehr so richtig weiter.
Ich möchte für meine Webseite ein Intro machen welches kommt bevor die Hauptseite erscheint.
Das Ganze mit CSS 3
Ich möchte das wenn ich die Seite öffne Text eingeblendet wird ala "Herzlich Willkommen auf meiner Seite bla bla"....Und dann das Ganze ausblendet und an der Stelle zentriert mein Bild kommt.
Aber erst dann, wenn der Text wieder weg ist. Also so lange soll es unsichtbar sein.
So richtig krieg ich das nicht hin. Ich muss dazu sagen dass ich heute auch das erste Mal praktisch mit CSS3 arbeite.
Es ist bei mir im Moment so:
Logo erscheint sofort beim Laden der Seite... gleichzeitig fadet der Text ein.
Logo geht weg und fadet ein zur festgelegten Verzögerungszeit und bleibt
Aber wie bekomme ich es hin dass es am Anfang erstmal weg bleibt bis der Text da ist,
der Text dann geht und das Logo erscheint?
.
Eigentlich wollte ich auch dass der Text genauso an der Stelle erscheint wie das Logo im Moment ist,
aber das hab ich bisher von den Abständen noch nicht gemacht. Ich wollte erstmal dass die Animation
richtig funktioniert.
Hier mal der Code:
Was mir auch noch komisch vor kommt... :
Bei den @Keyframe Schnipseln die letzte geschlossene
geschweifte Klammer ist dunkelrot, die anderen sind in Dreamweaver rosa.
Das heisst ja eigentlich dass sie nicht richtig sitzt oder zu viel ist aber es funktioniert und wurde mir auch so angegeben dass ich sie so setzen muss.
Hier mal als Beispiel::
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
Ich weiss das man die ganzen Animationseigenschaften auch zusammen fassen kann aber bis ich mir merken kann was was ist schreibe ich es ausführlicher.
ich hoffe mir kann jemand helfen und sag schon mal lieb danke
LG Christin
vielleicht könnt ihr mir helfen.
ich mach da jetzt seit 5 Stunden rum und ich weiss nicht mehr so richtig weiter.
Ich möchte für meine Webseite ein Intro machen welches kommt bevor die Hauptseite erscheint.
Das Ganze mit CSS 3
Ich möchte das wenn ich die Seite öffne Text eingeblendet wird ala "Herzlich Willkommen auf meiner Seite bla bla"....Und dann das Ganze ausblendet und an der Stelle zentriert mein Bild kommt.
Aber erst dann, wenn der Text wieder weg ist. Also so lange soll es unsichtbar sein.
So richtig krieg ich das nicht hin. Ich muss dazu sagen dass ich heute auch das erste Mal praktisch mit CSS3 arbeite.
Es ist bei mir im Moment so:
Logo erscheint sofort beim Laden der Seite... gleichzeitig fadet der Text ein.
Logo geht weg und fadet ein zur festgelegten Verzögerungszeit und bleibt
Aber wie bekomme ich es hin dass es am Anfang erstmal weg bleibt bis der Text da ist,
der Text dann geht und das Logo erscheint?
.
Eigentlich wollte ich auch dass der Text genauso an der Stelle erscheint wie das Logo im Moment ist,
aber das hab ich bisher von den Abständen noch nicht gemacht. Ich wollte erstmal dass die Animation
richtig funktioniert.
Hier mal der Code:
PHP:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<!-- <meta http-equiv="refresh" content="5; URL=home.html">-->
<title>..........</title>
<style type="text/css">
<!--
html, body {
Hier sind nur ein paar Zeilen für einen Hintergrund
andere Einstellungen.
}
......CSS..............
img {
margin-left:23%;
margin-top:3%;
-webkit-animation-name:imgblend;
-webkit-animation-duration:8s;
-webkit-animation-delay:5s;
-moz-animation-name:imgblend;
-moz-animation-duration:8s;
-moz-animation-delay:5s;
-o-animation-name:imgblend;
-o-animation-duration:8s;
-o-animation-delay:5s;
animation-name:imgblend;
animation-duration:8s;
animation-delay:5s;
}
@-webkit-keyframes imgblend {
from { opacity: 0; }
to { opacity: 1; }
}
@-moz-keyframes imgblend {
from { opacity: 0; }
to { opacity: 1; }
}
@-o-keyframes imgblend {
from { opacity: 0; }
to { opacity: 1; }
}
@-moz-keyframes imgblend {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes imgblend {
from { opacity: 0; }
to { opacity: 1; }
}
p {
margin-left:35%;
padding:2%;
font-size:1em;
-webkit-animation-name:fadeIn;
-webkit-animation-duration:8s;
-moz-animation-name:fadeIn;
-moz-animation-duration:8s;
-o-animation-name:fadeIn;
-o-animation-duration:8s;
animation-name:fadeIn;
animation-duration:8s;
}
@-webkit-keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@-moz-keyframes fadeIn {
from { opacity: 0; }
to{ opacity: 1; }
}
@-o-keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@-moz-keyframes fadeIn {
from { opacity: 0;}
to { opacity: 1; }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
-->
</style>
</head>
<body>
.....bisschen HTML..............
<div>
<img src="bilder/logo.png" width="50%" alt="hier steht auch text">
<p> Herzlich Willkommen auf meiner Seite</p>
</div>
</body>
</html>Was mir auch noch komisch vor kommt... :
Bei den @Keyframe Schnipseln die letzte geschlossene
geschweifte Klammer ist dunkelrot, die anderen sind in Dreamweaver rosa.
Das heisst ja eigentlich dass sie nicht richtig sitzt oder zu viel ist aber es funktioniert und wurde mir auch so angegeben dass ich sie so setzen muss.
Hier mal als Beispiel::
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
Ich weiss das man die ganzen Animationseigenschaften auch zusammen fassen kann aber bis ich mir merken kann was was ist schreibe ich es ausführlicher.
ich hoffe mir kann jemand helfen und sag schon mal lieb danke
LG Christin
Zuletzt bearbeitet:
