最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
利用transition实现文字上下抖动的效果的教程
时间：2017-02-13 编辑：简简单单 来源：一聚教程网
实现思路
通过改变字母的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; */ }
L o a d i n g | |
相关文章
- OCR文字识别App使用效果分享 10-23
- 文字识别OCR软件推荐 10-23
- ps如何制作3d圆柱体效果英文字体 07-18
- 咔叽相机怎么输入文字 07-18
- ppt文字动画怎么制作 07-17
- fireworks如何制作一段文字gif动画 07-16