不使用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 相关文章推荐
用js的for循环获取radio选中的值
Oct 21 Javascript
js获取指定的cookie的具体实现
Feb 20 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
Dec 26 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
Jun 18 Javascript
解决微信二次分享不显示摘要和图片的问题
Aug 18 Javascript
JS基于正则表达式实现的密码强度验证功能示例
Sep 21 Javascript
利用JS hash制作单页Web应用的方法详解
Oct 10 Javascript
Nuxt.js之自动路由原理的实现方法
Nov 21 Javascript
详解vue中localStorage的使用方法
Nov 22 Javascript
three.js 如何制作魔方
Jul 31 Javascript
在VUE中使用lodash的debounce和throttle操作
Nov 09 Javascript
vue使用require.context实现动态注册路由
Dec 25 Vue.js
简单的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
NO3第三帝国留言簿制作过程
2006/10/09 PHP
php smarty模版引擎中的缓存应用
2009/12/02 PHP
php后门URL的防范
2013/11/12 PHP
php验证码的制作思路和实现方法
2015/11/12 PHP
Zend Framework使用Zend_Loader组件动态加载文件和类用法详解
2016/12/09 PHP
使用XHProf查找PHP性能瓶颈的实例
2017/12/13 PHP
浅谈javascript中的call、apply、bind
2016/03/06 Javascript
VUE axios发送跨域请求需要注意的问题
2017/07/06 Javascript
Angular4学习笔记之实现绑定和分包
2017/08/01 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
2018/01/12 Javascript
详解vue中组件参数
2018/07/09 Javascript
js中Array对象的常用遍历方法详解
2019/01/17 Javascript
在node中使用jwt签发与验证token的方法
2019/04/03 Javascript
Vue的click事件防抖和节流处理详解
2019/11/13 Javascript
jquery选择器和属性对象的操作实例分析
2020/01/10 jQuery
jQuery-App输入框实现实时搜索
2020/11/19 jQuery
vue导入.md文件的步骤(markdown转HTML)
2020/12/31 Vue.js
[05:46]DOTA2英雄梦之声_第18期_陈
2014/06/20 DOTA
编写自定义的Django模板加载器的简单示例
2015/07/21 Python
Python基于递归算法实现的走迷宫问题
2017/08/04 Python
Pandas 数据处理,数据清洗详解
2018/07/10 Python
详解pandas的外部数据导入与常用方法
2019/05/01 Python
Python判断三段线能否构成三角形的代码
2020/04/12 Python
python实现126邮箱发送邮件
2020/05/20 Python
Django怎么在admin后台注册数据库表
2020/11/14 Python
HTML5 移动页面自适应手机屏幕四类方法总结
2017/08/17 HTML / CSS
怎样声明子类
2013/07/02 面试题
便利店的创业计划书
2014/01/15 职场文书
妈妈的账单教学反思
2014/02/06 职场文书
取保候审保证书
2014/04/30 职场文书
授权委托书格式范文
2014/08/02 职场文书
2014财务年终工作总结
2014/12/08 职场文书
ktv服务员岗位职责
2015/02/09 职场文书
教师节获奖感言
2015/07/31 职场文书
教您:房贷工资收入证明应该怎么写?
2019/08/19 职场文书
Python机器学习实战之k-近邻算法的实现
2021/11/27 Python