Wenn Benutzer auf die Seite kommen, ist das große VEGA-Logo in der Mitte. Like This: [! [Bildbeschreibung hier eingeben] [1]] [1] Nach 2 Sekunden beginnt sich das Logo in die Ecke zu bewegen. So: [! [Bildbeschreibung hier eingeben] [2]] [2]Animieren mit CSS und ohne Verwendung von Hover
Wie kann dies mit CSS erreicht werden? Und alles muss passieren, ohne zu schweben.
Ohne Ihre HTML-Struktur zu wissen, können Sie etwas tun:
html,
body {
margin: 0;
width: 100%;
height: 100%;
}
.wrapper {
position: relative;
width: 100%;
height: 100%;
min-height: 400px; /* Just for demo purpose to see the animation */
}
.logo {
position: absolute;
top: 50%;
left: 50%;
width: 200px; /* Logo width */
height: 200px; /* Logo height */
margin-left: -100px; /* Logo width divided by two */
margin-top: -100px; /* Logo height divided by two */
background-image: url('https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png');
background-position: top left;
background-repeat: no-repeat;
background-size: cover;
animation-name: movelogo; /* Name of animation */
animation-duration: 1s; /* Duration of animation */
animation-iteration-count: 1; /* Number of times animation is ran */
animation-timing-function: ease-out; /* Easing of animation */
animation-fill-mode: forwards;
animation-delay: 2s; /* Delay before animation */
}
@keyframes movelogo {
0% {
top: 50%;
left: 50%;
width: 200px; /* Start logo width */
height: 200px; /* Start logo height */
}
100% {
top: 0;
left: 0;
margin-left: 10px; /* Remove the minus margin and set your own (Could be also zero and just set top and left values */
margin-top: 10px; /* Remove the minus margin and set your own (Could be also zero and just set top and left values */
width: 100px; /* End logo width */
height: 100px; /* End logo height */
}
}<div class="wrapper">
<div class="logo"></div>
</div>passen diese einfach mit Ihrem vorhandenen HTML. Sie können der Keyframes-Funktion auch -webkit- Präfixe usw. hinzufügen, um die Browserunterstützung zu verbessern.
Haben Sie schon einen Blick auf http://www.w3schools.com/css/css3_animations.asp? –
Es wird erwartet, dass Sie zumindest versuchen, dies für sich selbst zu programmieren. 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. –