使用transition實現一個文字上下抖動效果？針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
實現思路
通過改變字母的top值
每個字母不能同時運動，通過延遲時間，for循環 2s (i*50)ms ...
infinite 動畫會無限次地循環播放。
alternate 播放次數是奇數時，動畫向原方向播放；播放次數是偶數時，動畫向反方向播放
實例代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
@keyframes move{
0%{
top: 0;
}
100%{
top: 10px;
}
}
@-webkit-keyframes move{
0%{
top: 0;
}
100%{
top: 10px;
}
}
#box {
width: 200px;
height: 100px;
background: red;
font-size: 20px;
color: #fff;
}
#box span {
position: relative;
/*animation: .2s move linear infinite alternate; */
}
</style>
<script>
window.onload = function() {
var span = document.querySelectorAll('#box span');
for(var i = 0; i < span.length; i++){
span[i].style.WebkitAnimation = span[i].style.animation = " .2s "+(i*50)+"ms move linear infinite alternate";
}
};
</script>
</head>
<body>
<div id="box">
<span>L</span>
<span>o</span>
<span>a</span>
<span>d</span>
<span>i</span>
<span>n</span>
<span>g</span>
</div>
</body>
</html>關于使用transition實現一個文字上下抖動效果問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
