Scrollendes CSS3 erstellen
Das Scrollen kann viel Platz sparen und kann in CSS3 sehr fein gehandhabt werden, gepaart mit der Leistungsfähigkeit des CSS-Sprites-Bildes und etwas Mathematik, wir werden dieses Bild unten in das rotierende Banner verwandeln.
CSS
<style type="text/css">/*Sprite Backgrounds*/.smFbk64{background-position: 0px -0px}.smTwi64{background-position:-66px -0px}.smGoo64{background-position:-132px -0px}.smLin64{background-position:-198px -0px}.sm64{width:64px;height:64px;display:inline-block;overflow:hidden;background-image: url('https://www.claytabase.co.uk/Academy/Learning-Web-Design/Using-CSS/Create-Scrolling-CSS/SocialMedia_64.png');background-repeat:no-repeat;}.rnd50{border-radius:50%}/*Moving Parts*/.parentDiv{width:64px;height:64px;overflow:hidden;margin:auto}.followDiv{width:320px;height:64px;position:relative;animation:followDivSlide ease infinite 10s;-webkit-animation:followDivSlide ease infinite 10s;-moz-animation:followDivSlide ease infinite 10s;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;animation-fill-mode:forwards;}@keyframes followDivSlide{from{left:0px;}15%{left:0px;}25%{left:-64px;}40%{left:-64px;}50%{left:-128px;}65%{left:-128px;}75%{left:-192px;}90%{left:-192px;}to{left:-256px;}}@-webkit-keyframes followDivSlide{from{left:0px;}15%{left:0px;}25%{left:-64px;}40%{left:-64px;}50%{left:-128px;}65%{left:-128px;}75%{left:-192px;}90%{left:-192px;}to{left:-256px;}}@-moz-keyframes followDivSlide{from{left:0px;}15%{left:0px;}25%{left:-64px;}40%{left:-64px;}50%{left:-128px;}65%{left:-128px;}75%{left:-192px;}90%{left:-192px;}to{left:-256px;}}</style>/*HTML*/<div class="parentDiv"><div class="followDiv"><a class="sm64 rnd50 smFbk64" href="https://www.facebook.com/Claytabase"></a><a class="sm64 rnd50 smTwi64" href="https://twitter.com/claytabase"></a><a class="sm64 rnd50 smGoo64" href="https://plus.google.com/+ClaytabaseCoUk"></a><a class="sm64 rnd50 smLin64" href="https://www.linkedin.com/company/claytabase-ltd"></a><a class="sm64 rnd50 smFbk64" href="https://www.facebook.com/Claytabase"></a></div></div>Der Sprit
Das Bild ist 8x64 breit und 8x64 hoch Bilder kombiniert als Bild 658px breit und 196px hoch, uns interessieren im Moment nur die ersten 4 Bilder.
Wir erstellen 4 CSS-Klassen für jede von ihnen, um sie mit der Shorthand-Hintergrundeigenschaft zu erstellen.
Wie Sie sehen können, hat das Bild einen Abstand von 2 Pixel zwischen jedem Bild, also fügen wir das zur Position hinzu, -68 Pixel usw.
Wir können auch 2 gemeinsame Klassen wählen, um alle Gegenstände zu verwenden, sie legen den Grenzradius und die Größe jedes Gegenstands fest.
Wir können auch 2 gemeinsame Klassen wählen, um alle Gegenstände zu verwenden, sie legen den Grenzradius und die Größe jedes Gegenstands fest.
Der Kontainer
Dies ist ein einfaches div, das genau die gleiche Breite und Höhe (64 x 64) wie die oben definierten Bilder hat. Wir setzen overflow auf hidden, um den Rest des untergeordneten Elements auszublenden.
Parent-Div-Beispiel
Das Kind/die Kinder
Dies ist das zweite div, das im CSS verschoben wird. Wir setzen die Höhe auf 64 Pixel, aber diesmal muss die Breite 64 Pixel * 4 betragen, was uns insgesamt 256 Pixel ergibt.
In diesem Beispiel möchten wir das erste am Ende erscheinende Sprite replizieren, um einen plötzlichen Ruck zwischen Facebook und Linked In zu verhindern, also passen Sie die Breite auf 320px an.
Die Animation
Unsere Animation verschiebt das div dann auf Positionen von 0px, -64px, -128px, -192px und -256px, sodass zu jedem Zeitpunkt während der Bewegung nur das eine Element sichtbar ist. Unten finden Sie ein Beispiel ohne Überlauf und auf der rechten Seite eine Illustration, wie die Positionierung jedes Element bewegt.
