CSS動畫脈衝部分的圖像

我在一個簡單的圖像上使用CSS動畫。
我只想將脈衝動畫作爲目標的一部分圖像。
我如何製作脈衝動畫，以便只有文本「Trello」改變不透明度？CSS動畫脈衝部分的圖像

這裏是我的代碼：

.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

來源

2017-01-16 Penalse

如果你試圖讓「Trello」脈衝，而不是旁邊的圖標，你將需要使用兩個獨立的圖像，只是拋出一個帶有文字的圖像上的脈衝動畫。 –

感謝您的評論。無論如何，只有一個圖像製作相同的動畫？如果沒有辦法做到這一點，那麼我只是用兩張圖片來製作。 – Penalse

不知道爲什麼這是在編輯隊列 - 看起來不錯。 – Stidgeon

你可以使用這個例子兩種。我希望這對你有幫助。

.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); 
    } 
}

來源

2017-01-16 14:22:13

CSS動畫脈衝部分的圖像

回答

相關問題