Rotierender Globus in CSS

Question 1

Ich erstelle einen rotierenden Erdeffekt in CSS. Ich habe den Globus in CSS erstellt:

body {
  background-color: #111;
}

#earth {
    width: 300px;
    height: 300px;
    background: url(https://web.archive.org/web/20150807125159if_/http://www.noirextreme.com/digital/Earth-Color4096.jpg);
    border-radius: 50%;
    background-size: 610px;
    box-shadow: inset 8px 36px 80px 36px rgb(0, 0, 0),
    inset -6px 0 12px 4px rgba(255, 255, 255, 0.3);
    animation-name: rotate;
    animation-duration: 12s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation-name: rotate;
    -webkit-animation-duration: 12s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}

@keyframes rotate {
    from { background-position: 0px 0px; }
    to { background-position: 500px 0px; }
}
@-webkit-keyframes rotate {
    from { background-position: 0px 0px; }
    to { background-position: 500px 0px; }
}

<div id="earth"></div>

Erweitern Sie das Snippet

Aber es stoppt und dann wird das Bild zurückgesetzt und erneut gestartet. Ich möchte, dass es sich reibungslos bewegt, ohne zu ruckeln. Vielen Dank!

Question 2

In background-position: 500px 0px;ersetzen 500px mit 610px, das ist diebackground-size

body {
  background-color: #111;
}
#earth {
  width: 300px;
  height: 300px;
  background: url(https://web.archive.org/web/20150807125159if_/http://www.noirextreme.com/digital/Earth-Color4096.jpg);
  border-radius: 50%;
  background-size: 610px;
  box-shadow: inset 8px 36px 80px 36px rgb(0, 0, 0), inset -6px 0 12px 4px rgba(255, 255, 255, 0.3);
  animation-name: rotate;
  animation-duration: 12s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -webkit-animation-name: rotate;
     -webkit-animation-duration: 12s;
     -webkit-animation-iteration-count: infinite;
     -webkit-animation-timing-function: linear;
}
@keyframes rotate {
  from {
    background-position: 0px 0px;
  }
  to {
    background-position: 610px 0px;
  }
}
@-webkit-keyframes rotate {
  from {
    background-position: 0px 0px;
  }
  to {
    background-position: 610px 0px;
  }
}

<div id="earth"></div>

Erweitern Sie das Snippet

Question 3

Das Problem in Ihrem Code ist , dass das image ( 610px ) und die Animation des Offset ( 500px ) unterscheiden und bei dem Zurücksetzen des Animations es Hopfen (110px).

Ein einfacher Trick, den ich gerne verwende, anstatt den Animationsversatz in Pixel zu definieren : Definieren Sie ihn in Prozent .
Anstatt ihm zu sagen, dass er sich um 610px bewegen soll, sage ich ihm, dass er sich zu 100% bewegen soll .

Der Vorteil der 100% -Methode besteht darin, dass Sie nicht alle fest codierten Werte in Ihrem CSS ändern müssen, wenn Sie das Bild bearbeiten möchten. Dies sollte IMO die bevorzugte Methode sein.

Bitte beachten Sie: Es scheint, als würde ein Wechsel von 0 auf -100% einen Sprung erzeugen. Da die Drehung in die richtige Richtung erfolgen muss, habe ich versucht, 100% zu starten und auf 0 zu verschieben, aber zu diesem Zeitpunkt ist das Bild nicht mehr vorhanden.

@keyframes rotate {
   from { background-position:  100%  0; }
   to {   background-position:    0   0; }
}

Hier ist das Snippet, jedoch mit 100% anstelle eines Pixelwerts:
* Bitte beachten Sie: Die Animation ist immer noch gesprungen, aber ich kann keinen neuen Code testen, da das Bild nicht mehr vorhanden ist. Die Logik funktioniert, aber diese Implementierung scheint nicht zu funktionieren. Der folgende Code ist nur eine Demo mit dem TS-Code.

Code-Snippet anzeigen

body {
  background-color: #111;
}
#earth {
  width: 300px;
  height: 300px;
  background: url(https://web.archive.org/web/20150807125159if_/http://www.noirextreme.com/digital/Earth-Color4096.jpg);
  border-radius: 50%;
  background-size: 610px;
  box-shadow: inset 8px 36px 80px 36px rgb(0, 0, 0), inset -6px 0 12px 4px rgba(255, 255, 255, 0.3);
  animation-name: rotate;
  animation-duration: 12s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes rotate {
   from { background-position:  100%  0; }
   to {   background-position:    0   0; }
}

<div id="earth"></div>

Erweitern Sie das Snippet

Answer 1

74

Ich erstelle einen rotierenden Erdeffekt in CSS. Ich habe den Globus in CSS erstellt:

body {
  background-color: #111;
}

#earth {
    width: 300px;
    height: 300px;
    background: url(https://web.archive.org/web/20150807125159if_/http://www.noirextreme.com/digital/Earth-Color4096.jpg);
    border-radius: 50%;
    background-size: 610px;
    box-shadow: inset 8px 36px 80px 36px rgb(0, 0, 0),
    inset -6px 0 12px 4px rgba(255, 255, 255, 0.3);
    animation-name: rotate;
    animation-duration: 12s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation-name: rotate;
    -webkit-animation-duration: 12s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}

@keyframes rotate {
    from { background-position: 0px 0px; }
    to { background-position: 500px 0px; }
}
@-webkit-keyframes rotate {
    from { background-position: 0px 0px; }
    to { background-position: 500px 0px; }
}

<div id="earth"></div>

Erweitern Sie das Snippet

Aber es stoppt und dann wird das Bild zurückgesetzt und erneut gestartet. Ich möchte, dass es sich reibungslos bewegt, ohne zu ruckeln. Vielen Dank!

html css css-animations Benutzer4420272
quelle

2

Das ist ein ordentlicher Effekt, aber ich wäre vorsichtig damit. Auf Chrome 39.0.2171.95 m ist es ziemlich abgehackt (natürlich auch mit dem Fix) und eine spürbare Belastung für eine CPU.

Tim Medora

2

@ TimMedora Ich weiß nicht warum, aber es läuft sehr reibungslos auf Firefox 34. Auf GC. Es funktioniert besser mit einem kleinen Bild oder mit Hardwarebeschleunigung (HW acc erhöht die Speichernutzung erheblich). Sehen Sie hier einen Globus mit kleinerem Bild: Link .

Der Pragmatick

1

@ TimMedora Ich bin auf dieser Chrome-Version und es ist ziemlich flüssig.

AStopher

1

Schöner Effekt! Läuft sehr gut auf meinem alten HW / SW (Chromium27 auf PuppyLinux 5.2.8, einer All-in-RAM-Distribution basierend auf Ubuntu 10.04)

DocSalvager

1

Ich habe diesen Effekt noch nie gesehen - das ist großartig! Ein großes Lob an Sie

Blake Frederick

Answer 2

2

Das ist ein ordentlicher Effekt, aber ich wäre vorsichtig damit. Auf Chrome 39.0.2171.95 m ist es ziemlich abgehackt (natürlich auch mit dem Fix) und eine spürbare Belastung für eine CPU.

Tim Medora

Answer 3

2

@ TimMedora Ich weiß nicht warum, aber es läuft sehr reibungslos auf Firefox 34. Auf GC. Es funktioniert besser mit einem kleinen Bild oder mit Hardwarebeschleunigung (HW acc erhöht die Speichernutzung erheblich). Sehen Sie hier einen Globus mit kleinerem Bild: Link .

Der Pragmatick

Answer 4

1

@ TimMedora Ich bin auf dieser Chrome-Version und es ist ziemlich flüssig.

AStopher

Answer 5

1

Schöner Effekt! Läuft sehr gut auf meinem alten HW / SW (Chromium27 auf PuppyLinux 5.2.8, einer All-in-RAM-Distribution basierend auf Ubuntu 10.04)

DocSalvager

Answer 6

1

Ich habe diesen Effekt noch nie gesehen - das ist großartig! Ein großes Lob an Sie

Blake Frederick

Answer 7

91

In background-position: 500px 0px;ersetzen 500px mit 610px, das ist diebackground-size

body {
  background-color: #111;
}
#earth {
  width: 300px;
  height: 300px;
  background: url(https://web.archive.org/web/20150807125159if_/http://www.noirextreme.com/digital/Earth-Color4096.jpg);
  border-radius: 50%;
  background-size: 610px;
  box-shadow: inset 8px 36px 80px 36px rgb(0, 0, 0), inset -6px 0 12px 4px rgba(255, 255, 255, 0.3);
  animation-name: rotate;
  animation-duration: 12s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -webkit-animation-name: rotate;
     -webkit-animation-duration: 12s;
     -webkit-animation-iteration-count: infinite;
     -webkit-animation-timing-function: linear;
}
@keyframes rotate {
  from {
    background-position: 0px 0px;
  }
  to {
    background-position: 610px 0px;
  }
}
@-webkit-keyframes rotate {
  from {
    background-position: 0px 0px;
  }
  to {
    background-position: 610px 0px;
  }
}

<div id="earth"></div>

Erweitern Sie das Snippet

The Pragmatick
quelle

5

Upvoted, es war ein einfaches Problem, einen der Positionspunkte verpasst zu haben. Wenn Sie Downvoted haben, sagen Sie bitte warum, damit der Antwortende die Antwort verbessern kann.

Mauro

2

Ich will nicht nur ein Kritiker sein, aber soll sich die Erde nicht die ganze Zeit in die gleiche Richtung drehen? In dieser Antwort stoppt und startet die Rotation rückwärts, um dann anzuhalten und vorwärts neu zu starten

Chiapa

Ah, jetzt viel besser :)

Chiapa

Vielen Dank für den Hinweis. Ich habe das Einfügen von browserspezifischen Codes kopiert und diese fälschlicherweise kopiert. In GC hat es auch früher gut funktioniert, so dass ich das Problem nicht sehen konnte. Vielen Dank. Chiapa und Kaiido .

Der Pragmatick

Answer 8

5

Upvoted, es war ein einfaches Problem, einen der Positionspunkte verpasst zu haben. Wenn Sie Downvoted haben, sagen Sie bitte warum, damit der Antwortende die Antwort verbessern kann.

Mauro

Answer 9

2

Ich will nicht nur ein Kritiker sein, aber soll sich die Erde nicht die ganze Zeit in die gleiche Richtung drehen? In dieser Antwort stoppt und startet die Rotation rückwärts, um dann anzuhalten und vorwärts neu zu starten

Chiapa

Answer 10

Ah, jetzt viel besser :)

Chiapa

Answer 11

Vielen Dank für den Hinweis. Ich habe das Einfügen von browserspezifischen Codes kopiert und diese fälschlicherweise kopiert. In GC hat es auch früher gut funktioniert, so dass ich das Problem nicht sehen konnte. Vielen Dank. Chiapa und Kaiido .

Der Pragmatick

Answer 12

Das Problem in Ihrem Code ist , dass das image ( 610px ) und die Animation des Offset ( 500px ) unterscheiden und bei dem Zurücksetzen des Animations es Hopfen (110px).

Ein einfacher Trick, den ich gerne verwende, anstatt den Animationsversatz in Pixel zu definieren : Definieren Sie ihn in Prozent .
Anstatt ihm zu sagen, dass er sich um 610px bewegen soll, sage ich ihm, dass er sich zu 100% bewegen soll .

Der Vorteil der 100% -Methode besteht darin, dass Sie nicht alle fest codierten Werte in Ihrem CSS ändern müssen, wenn Sie das Bild bearbeiten möchten. Dies sollte IMO die bevorzugte Methode sein.

Bitte beachten Sie: Es scheint, als würde ein Wechsel von 0 auf -100% einen Sprung erzeugen. Da die Drehung in die richtige Richtung erfolgen muss, habe ich versucht, 100% zu starten und auf 0 zu verschieben, aber zu diesem Zeitpunkt ist das Bild nicht mehr vorhanden.

@keyframes rotate {
   from { background-position:  100%  0; }
   to {   background-position:    0   0; }
}

Hier ist das Snippet, jedoch mit 100% anstelle eines Pixelwerts:
* Bitte beachten Sie: Die Animation ist immer noch gesprungen, aber ich kann keinen neuen Code testen, da das Bild nicht mehr vorhanden ist. Die Logik funktioniert, aber diese Implementierung scheint nicht zu funktionieren. Der folgende Code ist nur eine Demo mit dem TS-Code.

Code-Snippet anzeigen

body {
  background-color: #111;
}
#earth {
  width: 300px;
  height: 300px;
  background: url(https://web.archive.org/web/20150807125159if_/http://www.noirextreme.com/digital/Earth-Color4096.jpg);
  border-radius: 50%;
  background-size: 610px;
  box-shadow: inset 8px 36px 80px 36px rgb(0, 0, 0), inset -6px 0 12px 4px rgba(255, 255, 255, 0.3);
  animation-name: rotate;
  animation-duration: 12s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes rotate {
   from { background-position:  100%  0; }
   to {   background-position:    0   0; }
}

<div id="earth"></div>

Erweitern Sie das Snippet

Answer 13

4

Eigentlich war es so, wie es gemacht werden sollte. (+1)

Der Pragmatick

Answer 14

11

Dies springt in meinem Browser (Safari) immer wieder von China nach Mexiko.

200_erfolg

Answer 15

2

Es springt auch für mich von China nach Mexiko. FF 31.2.0 auf RHEL 6

Holloway

Answer 16

4

Hey, es funktioniert nicht einmal unter FF 34.0.5 (Windows 8)! Ihre Lösung funktioniert nur mit GC.

Answer 17

6

Für mich springen sowohl Embedded als auch Fullpage. Aber warum arbeitet meins an Firefox? Das ist seltsam.

Der Pragmatick

Rotierender Globus in CSS

Antworten: