如何用html写抖动效果,利用transition实现文字上下抖动的效果

实现思路

通过改变字母的top值

每个字母不能同时运动，通过延迟时间，for循环 2s (i*50)ms ...

infinite 动画会无限次地循环播放。

alternate 播放次数是奇数时，动画向原方向播放；播放次数是偶数时，动画向反方向播放

静态效果图

实例代码

@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; */

}

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";

}

};

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。

如何用html写抖动效果,利用transition实现文字上下抖动的效果相关推荐

ajax仿百度搜索效果,利用autocomplete.js实现仿百度搜索效果（ajax动态获取后端[C#]数据）...
实现功能描述: 1.实现搜索框的智能提示 2.第二次浏览器缓存结果 3.实现仿百度搜索 * { margin: 0px; padding: 0px; } #wrapper { height: 100% ...
latex公式文字划掉的效果
当我们想要强调某公式是错误的时候,可以用线划掉,latex可以使用宏包实现这个效果,使用方法如下: \usepackage{cancel} \cancel{公式内容} 或 \bcancel{公式内容 ...
VUE利用transition标签实现摇一摇抽签效果
VUE利用transition标签监听animation动画执行完毕,触发之后的操作 transition标签文档实现效果在线试一试欢迎各位大佬进群交流
python写的脚本怎么用,如何用python写脚本
如何用python写脚本以Python2.7操作为例:1.首先需要打开电脑桌面,按开始的快捷键,点击Python2.7如图所示的选项进入. 相关推荐:<Python入门教程>2.打开之后 ...
css文字背景虚化,通过实现背景模糊、文字颜色流光渐变、边框扩展等效果学习transition、transform、@keyframes等属性及伪元素的使用...
百度前端技术学院2017于2月24日开始进行,一共有6个学院可供学习,分别是小薇学院(html/css基础).斌斌学院(js基础).耀耀学院(小游戏/交互).商业平台学院(web/ios/androi ...
自制vue组件通信插件:教你如何用mixin写插件
"vue-unicom"的作者:szpoppy,如果觉得对你有用,请一定点个star 这个项目虽然是szpoppy的个人项目,但是在szpoppy公司内是在大面积使用的,一直由sz ...
python中select模块_基于python select.select模块通信的实例讲解如何用python写个串口通信的程序...
python socket怎么利用select实现双工通信方法: Before : 0000000000000000000000000000000000000000 After pack: 0100 ...
效果过度transition:all
22. 效果过度1.(transition过度)all:所有的全部 transition:all : 给所有过度效果(单位s) transition:all ease:(默认效果慢快慢)transit ...
html中怎样写渐变色代码,如何用CSS写渐变色
原标题:如何用CSS写渐变色网页的应用中,有时会用到渐变色,文汇小编在这里跟大家分享一下使用CSS写渐变色的方法. 如下图,是由红色到青色的渐变: 附样式代码: .color1{background ...

如何用html写抖动效果,利用transition实现文字上下抖动的效果

如何用html写抖动效果,利用transition实现文字上下抖动的效果相关推荐

最新文章

热门文章