Wie man diese Animation in css3 kodiert?

Question

es ist eine lange Zeit, die ich zuletzt in HTML und CSS, das war vor diesem schönen HTML5 und CSS3 codiert wurde. Also, in den frühen 2000er Jahren haben wir ein Logo in Gif erstellt, was so cool war, und ich habe es gerade auf meinem PC gefunden. Es wäre schön, anstelle von limited-size-gif in reines css zu konvertieren, aber ich habe keine Ahnung, wie ich es starten soll. Here is my animated gif

Könnten Sie mir erste Eindrücke geben, welche css3-Attribute sollte ich dafür wählen? Danke

Answer 1

Sie werden wahrscheinlich die Animationseigenschaft mit benutzerdefinierten Keyframes verwenden möchten. Hier ist ein grobes Beispiel. Ich habe nicht viel Zeit mit der Animation verbracht. Das ist Ihr Job;)

https://codepen.io/bygrace1986/pen/POypXX

HTML

<div class="logo" data-logo="wp"></div> 

CSS

.logo { 
    position: relative; 
    width: 2em; 
    height: 2em; 
    font-size: 5em; 
    font-family: arial; 
    font-weight: bold; 
    font-style: italic; 
    text-transform: uppercase; 
} 

.logo::before, .logo::after { 
    content: attr(data-logo); 
    position: absolute; 
    z-index: -1; 
    left: 0; 
} 

.logo::before { 
    color: red; 
    animation: rotate 1s infinite; 
} 

.logo::after { 
    color: black; 
    animation: rotate 1s infinite reverse; 
} 

@keyframes rotate { 
    0% { 
    left: 0; 
    top: 0; 
    } 
    25% { 
    left: 10%; 
    } 
    50% { 
    top: 10%; 
    } 
    75% { 
    left: 0; 
    } 
    100% { 
    top: 0; 
    } 
}