不使用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 相关文章推荐
Jquery Select操作方法集合脚本之家特别版
May 17 Javascript
在JavaScript并非所有的一切都是对象
Apr 11 Javascript
JS实现跟随鼠标立体翻转图片的方法
May 04 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
Jun 19 Javascript
jquery限定文本框只能输入数字(整数和小数)
Jan 08 Javascript
JavaScript编程学习技巧汇总
Feb 21 Javascript
JSONP跨域请求实例详解
Jul 04 Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
Sep 28 Javascript
vue.js学习笔记:如何加载本地json文件
Jan 17 Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
Apr 17 Javascript
微信小程序设置滚动条过程详解
Jul 25 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
Sep 26 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
IIS php环境配置PHP5 MySQL5 ZendOptimizer phpmyadmin安装与配置
2008/11/18 PHP
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
2012/01/13 Javascript
下雪了 javascript实现雪花飞舞
2020/08/02 Javascript
Angularjs上传图片实例详解
2017/08/06 Javascript
js+canvas实现滑动拼图验证码功能
2018/03/26 Javascript
vxe-table vue table 表格组件功能
2019/05/26 Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
2019/06/10 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
2020/07/22 Javascript
[06:01]刀塔次级联赛top10第一期
2014/11/07 DOTA
Python 抓取动态网页内容方案详解
2014/12/25 Python
用Python程序抓取网页的HTML信息的一个小实例
2015/05/02 Python
TensorFlow 实战之实现卷积神经网络的实例讲解
2018/02/26 Python
使用python获取csv文本的某行或某列数据的实例
2018/04/03 Python
Python Excel处理库openpyxl使用详解
2019/05/09 Python
python基于SMTP协议发送邮件
2019/05/31 Python
python 表格打印代码实例解析
2019/10/12 Python
python使用Geany编辑器配置方法
2020/02/21 Python
Python实现UDP程序通信过程图解
2020/05/15 Python
Python验证码截取识别代码实例
2020/05/16 Python
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
2016/04/26 HTML / CSS
css3实现画半圆弧线的示例代码
2017/11/06 HTML / CSS
html5组织文档结构_动力节点Java学院整理
2017/07/11 HTML / CSS
美国购买韩国护肤和美容产品网站:Althea Korea
2020/11/16 全球购物
如果重写了对象的equals()方法,需要考虑什么
2014/11/02 面试题
大学毕业生文采飞扬的自我鉴定
2013/12/03 职场文书
金属材料工程个人求职的自我评价
2013/12/04 职场文书
网络编辑求职信
2014/04/30 职场文书
平安工地汇报材料
2014/08/19 职场文书
销售2014年度工作总结
2014/12/08 职场文书
主持稿开场白
2015/06/01 职场文书
追悼会悼词大全
2015/06/23 职场文书
MySQL查看表和清空表的常用命令总结
2021/05/26 MySQL
快速学习Oracle触发器和游标
2021/06/30 Oracle
CentOS8.4安装Redis6.2.6的详细过程
2021/11/20 Redis
DE1103使用报告
2022/04/05 无线电
td 内容自动换行 table表格td设置宽度后文字太多自动换行
2022/12/24 HTML / CSS