不使用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 相关文章推荐
javascript:history.go()和History.back()的区别及应用
Nov 25 Javascript
详谈jQuery中的this和$(this)
Nov 13 Javascript
使用npm发布Node.JS程序包教程
Mar 02 Javascript
巧用jQuery选择器提高写表单效率的方法
Aug 19 Javascript
jQuery图片切换动画效果
Feb 28 Javascript
vue指令以及dom操作详解
Mar 04 Javascript
vue.js+Echarts开发图表放大缩小功能实例
Jun 09 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
Aug 18 Javascript
js匿名函数使用&amp;传参(实例)
Sep 08 Javascript
vue中的scope使用详解
Oct 29 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
Jul 03 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
Jul 29 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
玩家交还《星际争霸》原始码光盘 暴雪报以厚礼
2017/05/05 星际争霸
PHP面向对象编程快速入门
2006/10/09 PHP
jquery validate.js表单验证的基本用法入门
2010/05/13 Javascript
JQuery从头学起第二讲
2010/07/04 Javascript
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
2011/09/20 Javascript
jquery实现一个简单好用的弹出框
2014/09/26 Javascript
ie8模式下click无反应点击option无反应的解决方法
2014/10/11 Javascript
Javascript检查图片大小不要让大图片撑破页面
2014/11/04 Javascript
重写document.write实现无阻塞加载js广告(补充)
2014/12/12 Javascript
如何利用模板将HTML从JavaScript中抽离
2016/10/08 Javascript
详解堆的javascript实现方法
2016/11/29 Javascript
ajax图片上传,图片异步上传,更新实例
2016/12/30 Javascript
轻量级JS Cookie插件js-cookie的使用方法
2018/03/22 Javascript
浅谈VUE单页应用首屏加载速度优化方案
2018/08/28 Javascript
原生JS实现获取及修改CSS样式的方法
2018/09/04 Javascript
微信小程序基于picker实现级联菜单
2019/02/15 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
2019/04/17 Javascript
Vue render函数实战之实现tabs选项卡组件
2019/04/22 Javascript
微信小程序日历弹窗选择器代码实例
2019/05/09 Javascript
Nuxt配置Element-UI按需引入的操作方法
2020/07/06 Javascript
[49:18]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 OG vs TNC
2018/04/01 DOTA
Python使用urllib2模块实现断点续传下载的方法
2015/06/17 Python
Python3实现的简单工资管理系统示例
2019/03/12 Python
Python中的类与类型示例详解
2019/07/10 Python
Python实现Excel自动分组合并单元格
2021/02/22 Python
英国领先的大码时装品牌之一:Elvi
2018/08/26 全球购物
比利时的在线灯具店:Lampen24.be
2019/07/01 全球购物
描述RIP和OSPF区别以及特点
2015/01/17 面试题
linux下进程间通信的方式
2014/12/23 面试题
辞旧迎新演讲稿
2014/09/15 职场文书
教师党员自我剖析材料
2014/09/29 职场文书
销售代理协议书
2014/09/30 职场文书
暑期社会实践证明书
2014/11/17 职场文书
合作合同协议书范本
2015/01/27 职场文书
商务邀请函
2015/01/30 职场文书
Nginx实现会话保持的两种方式
2022/03/18 Servers