利用transition实现文字上下抖动的效果
时间:2019-03-24
本文章向大家介绍利用transition实现文字上下抖动的效果,主要包括利用transition实现文字上下抖动的效果使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
实现思路
通过改变字母的top值
每个字母不能同时运动,通过延迟时间,for循环 2s (i*50)ms ...
infinite 动画会无限次地循环播放。
alternate 播放次数是奇数时,动画向原方向播放;播放次数是偶数时,动画向反方向播放
静态效果图
实例代码
<!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>
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
- DNS迭代穷举脚本
- 走进计算机取证分析的神秘世界
- SYNPROXY:最廉价的抗DoS攻击方案
- 如何使用AndroidStudio将开源项目library发布到jcenter
- Android Studio 使用Gradle多渠道打包
- 某些浏览器中因cookie设置HttpOnly标志引起的安全问题
- 偷懒新姿势,打造属于RecyclerView的万能适配器Adapter和ViewHolder
- 科普哈希长度扩展攻击(Hash Length Extension Attacks)
- 分析 WordPress 3.8.2 修復的cookie偽造漏洞
- 技术宅打造全能美剧播放器
- 判断是否支持Heartbeat的NSE脚本
- [原创]Fluent NHibernate之旅二--Entity Mapping
- [原创]Fluent NHibernate之旅(三)-- 继承
- Web应用手工渗透测试——用SQLMap进行SQL盲注测试
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- [数据结构与算法] 邂逅链表
- 【LeetCode每日一题】23. Merge k Sorted Lists
- MyBatis Generator( 逆向工程以及源码分析 )
- 虚拟机(Linux)常用命令
- Spring框架
- Servlet技术2
- 你缺的不是天赋,而是亲和度
- TypeScript: 为什么必须学
- 一、环境搭建、以及聊聊更重要的...
- 四、作用域与作用域链
- 【从0到1学算法】递归
- 手把手教你创建 Spring MVC 实例
- 举一反三:三种问题,两个指针,一种方法
- torch.backends.cudnn.benchmark ?!
- jQuery ui中sortable draggable droppable的使用