利用transition實現文字上下抖動的效果
更新時間：2017年01月21日 08:40:38 作者：happyzgm
這篇文章主要給大家介紹了利用transition屬性如何實現文字上下抖動的效果，文中給出了詳細的介紹和完整的實例代碼，相信對大家的學習具有一定的參考借鑒價值，有需要的朋友們下面來一起看看吧。
實現思路
通過改變字母的top值
每個字母不能同時運動，通過延遲時間，for循環(huán) 2s (i*50)ms ...
infinite 動畫會無限次地循環(huán)播放。
alternate 播放次數是奇數時，動畫向原方向播放；播放次數是偶數時，動畫向反方向播放
靜態(tài)效果圖
實例代碼
<!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>
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
相關文章
這篇文章主要介紹了第二篇Bootstrap起步的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-06-06
JS實現為動態(tài)添加的元素增加事件功能示例【基于事件委托】
這篇文章主要介紹了JS實現為動態(tài)添加的元素增加事件功能,結合實例形式分析了javascript基于事件委托實現針對動態(tài)添加的元素增加事件的相關操作技巧,需要的朋友可以參考下2018-03-03
這篇文章主要為大家詳細介紹了bootstrap table使用入門基本用法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
Bootstrap每天必學之折疊，本文向大家講解了Bootstrap折疊操作，感興趣的小伙伴們可以參考一下2016-04-04
這篇文章主要為大家詳細介紹了javascript canvas封裝動態(tài)時鐘，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
今天在HTML中引入JavaScript文件運行時，alert彈出的提示框中文顯示為亂碼，怎么解決此問題呢？下面小編給大家?guī)砹艘隞avaScript時alert彈出框顯示中文亂碼問題的解決方法，一起看看吧2017-09-09
這篇文章主要介紹了微信小程序實現組件頂端固定或底端固定效果(不隨滾動而滾動)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
這篇文章主要介紹了JS中SetTimeout和SetInterval使用初探,需要的朋友可以參考下2017-03-03
這篇文章主要介紹了微信小程序canvas開發(fā)水果老虎機的思路，本文通過思路代碼分步驟給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2020-02-02
第一種：用flag標識，下面的代碼設置checkSubmitFlg標志；第二種：在onsubmit事件中設置，在第一次提交后使提交按鈕失效，感興趣的朋友可以了解下2013-09-09