CSS-Animation zu Pulsabschnitt des Bildes

Ich verwende CSS-Animation auf ein einfaches Bild.
Ich möchte die Impulsanimation nur auf einen Teil des Bildes zielen.
Wie kann ich diese Pulsanimation so machen, dass nur der Text "Trello" die Deckkraft ändert?CSS-Animation zu Pulsabschnitt des Bildes

Hier ist mein Code:

.element { 
 
    /*animation-delay: 2s;*/ 
 
    animation: pulse 3s infinite; 
 
    margin: 0 auto; 
 
    display: table; 
 
    margin-top: 50px; 
 
    animation-direction: alternate; 
 
} 
 

 
@keyframes pulse { 
 
    0% { 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    opacity: 0.3; 
 
    } 
 
} 
 

 
html, 
 
body { 
 
    height: 100%; 
 
    background-color: #e74c3c; 
 
}

<img src="https://d78fikflryjgj.cloudfront.net/images/50b4ebc64391dc394a38e73aed57f0e2/header-logo.png" alt="" class="element" />

View on CodePen

Quelle

2017-01-16 Penalse

Wenn Ihr Versuch, die ‚Trello‘ Puls zu machen und das Symbol nicht neben ihm, Sie gehen zu müssen, zwei getrennte Bilder verwenden und nur die Puls Animation mit dem Text auf das Bild zu werfen. –

Danke für den Kommentar. Gibt es trotzdem die gleiche Animation mit nur einem Bild? Wenn es keinen Weg gibt, dies zu machen, dann mache ich es einfach mit zwei Bildern. – Penalse

Nicht sicher, warum dies in der Bearbeitungs-Warteschlange ist - sieht gut aus für mich. – Stidgeon

Sie dieses Beispiel für beide verwenden können. Ich hoffe, es ist hilfreich für Sie.

.pulse { 
    animation: pulse 3s infinite; 
    margin: 0 auto; 
    display: table; 
    margin-top: 50px; 
    animation-direction: alternate; 
    -webkit-animation-name: pulse; 
    animation-name: pulse; 
} 

@-webkit-keyframes pulse { 
    0% { 
    -webkit-transform: scale(1); 
    } 
    50% { 
    -webkit-transform: scale(1.1); 
    } 
    100% { 
    -webkit-transform: scale(1); 
    } 
} 

@keyframes pulse { 
    0% { 
    transform: scale(1); 
    } 
    50% { 
    transform: scale(1.1); 
    } 
    100% { 
    transform: scale(1); 
    } 
}

Quelle

2017-01-16 14:22:13

CSS-Animation zu Pulsabschnitt des Bildes

Antwort

Verwandte Themen