利用transition實(shí)現(xiàn)文字上下抖動(dòng)的效果
更新時(shí)間：2017年01月21日 08:40:38 作者：happyzgm
這篇文章主要給大家介紹了利用transition屬性如何實(shí)現(xiàn)文字上下抖動(dòng)的效果，文中給出了詳細(xì)的介紹和完整的實(shí)例代碼，相信對(duì)大家的學(xué)習(xí)具有一定的參考借鑒價(jià)值，有需要的朋友們下面來一起看看吧。
實(shí)現(xiàn)思路
通過改變字母的top值
每個(gè)字母不能同時(shí)運(yùn)動(dòng)，通過延遲時(shí)間，for循環(huán) 2s (i*50)ms ...
infinite 動(dòng)畫會(huì)無限次地循環(huán)播放。
alternate 播放次數(shù)是奇數(shù)時(shí)，動(dòng)畫向原方向播放；播放次數(shù)是偶數(shù)時(shí)，動(dòng)畫向反方向播放
靜態(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é)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
您可能感興趣的文章:
- CSS3中Transition屬性詳解以及示例分享
- filters.revealTrans.Transition使用方法小結(jié)
- 全面解析Bootstrap中transition、affix的使用方法
- 實(shí)例講解iOS中的CATransition轉(zhuǎn)場(chǎng)動(dòng)畫使用
- JS實(shí)現(xiàn)動(dòng)畫兼容性的transition和transform實(shí)例分析
- jQuery+css3實(shí)現(xiàn)文字跟隨鼠標(biāo)的上下抖動(dòng)
- js實(shí)現(xiàn)的文字橫向無間斷滾動(dòng)
- 淺析js 文字滾動(dòng)效果
- 基于Jquery的文字滾動(dòng)跑馬燈插件(一個(gè)頁面多個(gè)滾動(dòng)區(qū))
- 文字不間斷滾動(dòng)(上下左右)實(shí)例代碼
相關(guān)文章
Layui組件Table綁定行點(diǎn)擊事件和獲取行數(shù)據(jù)的方法
今天小編就為大家分享一篇Layui組件Table綁定行點(diǎn)擊事件和獲取行數(shù)據(jù)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
Set是一種叫做集合的數(shù)據(jù)結(jié)構(gòu)(結(jié)構(gòu)和Array很像),Map是一種叫做字典的數(shù)據(jù)結(jié)構(gòu),這篇文章主要為大家詳細(xì)介紹了JavaScript中Map與Set用法與區(qū)別,需要的小伙伴可以參考下2023-11-11
微信小程序開發(fā)之實(shí)現(xiàn)心情記事本
這篇文章主要為大家詳細(xì)介紹了如何通過微信小程序開發(fā)一個(gè)簡(jiǎn)單的心情記事本，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以和小編一起學(xué)習(xí)一下2023-01-01
這篇文章主要介紹了寫一個(gè)飛快的 JavaScript 打包壓縮工具，非常好用，本文給大家分享實(shí)現(xiàn)思路,需要的朋友可以參考下2020-04-04
javascript勻速動(dòng)畫和緩沖動(dòng)畫詳解
這篇文章主要為大家詳細(xì)介紹了javascript勻速動(dòng)畫和緩沖動(dòng)畫,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要介紹了微信小程序的引導(dǎo)頁實(shí)現(xiàn)代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06
這篇文章主要為大家詳細(xì)介紹了純js實(shí)現(xiàn)打字機(jī)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)手寫板簽名，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
本文主要介紹了JavaScript中的AJAX的相關(guān)知識(shí)，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-03-03
滑動(dòng)門,簡(jiǎn)潔,新手上路制作篇 (小鴿子系列)
滑動(dòng)門,簡(jiǎn)潔,新手上路制作篇 (小鴿子系列)...2007-04-04