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