不使用jquery实现js打字效果示例分享


Posted in Javascript onJanuary 19, 2014

<h1>Libraries give you  <span class="txt-rotate fw700" data-period=500" data-rotate='[ "knowledge", "community", "an outlet", "中国起源", "OSCHINA" ]'></span></h1>
html,body {
  font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
  padding: 3em 2em;
  font-size: 18px;
  background: #fff;
  color: #009966;
}
h1,h2 {
  font-weight: 300;
  margin: 0.4em 0;
}
h1 { font-size: 3.5em; }
h2 { font-size: 2.5em; font-weight: 700; color: #505050; }
h3 {
  color: #505050;
  font-size: 1.5em;
}
.fw700 {
  font-weight: 700;
}
input {
  font-size: 100%;
  background: #fff;
  border: none;
  color: #000;
  padding: 12px;
  margin: 0 -0.25em 0 0.3em;
  border-top-left-radius: 9px;
  border-bottom-left-radius: 9px;
  box-shadow: 0 0 5px rgba(0,0,0,0.5) inset;
}
#call {
  border-top-right-radius: none;
  border-radius: none;
}
::-webkit-input-placeholder {
   color: #222;
}
:-moz-placeholder { /* Firefox 18- */
   color: #222;  
}
::-moz-placeholder {  /* Firefox 19+ */
   color: #222;  
}
:-ms-input-placeholder {  
   color: #222;  
}
.inline {
  display: inline;
}
.button {
  display: inline-block;
  background: #009966;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  padding: 0.44em 0.89em 0.39em;
  margin: 0 1em 0 0;
  border-top-right-radius: 9px;
  border-bottom-right-radius: 9px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: 0px;
  font-size: 1em;
  box-shadow: none;
  border: 1px solid rgba(0,0,0,0.1);
  border-left: none;
}
.field-wrapper {
  position:relative;
  margin-bottom:20px;
  display: inline-block;
}
label {
  position:absolute;
  bottom:-20px;
  left:6px;
  font-size:16px;
  color:#aaa;
  transition: all 0.1s linear;
  opacity:0;
  font-weight:bold;
  display: block;
}
label.on {
  color: #4481C4;
}
label.show {
  bottom: -30px;
  opacity: 1;
}
body {
  /* the following line fixes a blink in chrome https://code.google.com/p/chromium/issues/detail?id=108025 */
  -webkit-backface-visibility: hidden;
}
Javascript 相关文章推荐
Iframe thickbox2.0使用的方法
Mar 05 Javascript
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
Jul 17 Javascript
JS获取浏览器语言动态加载JS文件示例代码
Oct 31 Javascript
javascript中call,apply,bind的用法对比分析
Feb 12 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
Mar 31 Javascript
基于Javascript实现返回顶部按钮
Feb 29 Javascript
Node.js程序中的本地文件操作用法小结
Mar 06 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
Jul 09 Javascript
jQuery元素选择器实例代码
Feb 06 Javascript
vue-router实现组件间的跳转(参数传递)
Nov 07 Javascript
Vue 2.0 侦听器 watch属性代码详解
Jun 19 Javascript
vue 组件销毁并重置的实现
Jan 13 Javascript
简单的ajax连接库分享(不用jquery的ajax)
Jan 19 #Javascript
js取float型小数点后两位数的方法
Jan 18 #Javascript
js数组循环遍历数组内所有元素的方法
Jan 18 #Javascript
js使用eval解析json实例与注意事项分享
Jan 18 #Javascript
收集json解析的四种方法分享
Jan 17 #Javascript
javascript在子页面中函数无法调试问题解决方法
Jan 17 #Javascript
ie7+背景透明文字不透明超级简单的实现方法
Jan 17 #Javascript
You might like
PHP中16个高危函数整理
2019/09/19 PHP
基于PHP实现解密或加密Cloudflar邮箱保护
2020/06/24 PHP
jquery下异步提交表单 异步跨域提交表单
2010/11/17 Javascript
js自执行函数的几种不同写法的比较
2012/08/16 Javascript
JavaScript词法作用域与调用对象深入理解
2012/11/29 Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
2013/07/15 Javascript
jquery each的几种常用的使用方法示例
2014/01/21 Javascript
require、backbone等重构手机图片查看器
2016/11/17 Javascript
微信小程序 PHP后端form表单提交实例详解
2017/01/12 Javascript
Vue 单文件中的数据传递示例
2017/03/21 Javascript
JS作用域链详解
2017/06/26 Javascript
详解Vue结合后台的列表增删改案例
2018/08/21 Javascript
微信小程序列表中item左滑删除功能
2018/11/07 Javascript
用vscode开发vue应用的方法步骤
2019/05/06 Javascript
Vue通过WebSocket建立长连接的实现代码
2019/11/05 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
2020/09/28 Javascript
[00:33]2018DOTA2亚洲邀请赛TNC出场
2018/04/04 DOTA
[30:00]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第二场 11.28
2020/12/01 DOTA
详解python中 os._exit() 和 sys.exit(), exit(0)和exit(1) 的用法和区别
2017/06/23 Python
Python 错误和异常代码详解
2018/01/29 Python
Django基础知识与基本应用入门教程
2018/07/20 Python
python elasticsearch从创建索引到写入数据的全过程
2019/08/04 Python
Python对列表的操作知识点详解
2019/08/20 Python
Pytorch使用PIL和Numpy将单张图片转为Pytorch张量方式
2020/05/25 Python
Python fileinput模块如何逐行读取多个文件
2020/10/05 Python
pycharm 使用anaconda为默认环境的操作
2021/02/05 Python
canvas实现有递增动画的环形进度条的实现方法
2019/07/10 HTML / CSS
Right-on官方网站:日本知名的休闲服装品牌
2019/07/12 全球购物
事业单位个人应聘自荐信
2013/09/21 职场文书
迟到检讨书800字
2014/01/13 职场文书
办理居住证介绍信
2014/01/15 职场文书
2014年文学毕业生自我鉴定
2014/04/23 职场文书
铁路安全反思材料
2014/12/24 职场文书
党小组推荐意见
2015/06/02 职场文书
如何写观后感
2015/06/19 职场文书
「我的青春恋爱物语果然有问题。-妄言录-」第20卷封面公开
2022/03/21 日漫