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

代码如下:

<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;
}

赞 (0)

相关推荐

  • 利用jQuery实现打字机字幕效果实例代码

    利用jQuery实现打字机字幕效果实例代码

    实现效果: 实现原理: 把html里的代码读进来, 然后跳过"<"和">"之间的代码, 顺便保存了内容的格式, 然后一个定时器,逐个输出. 用到的基础知识: jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法. jQuery.fn.extend(object);给jQuer

  • 基于jQuery实现的打字机效果

    话不多说,请看实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="

  • jQuery打字效果实现方法(附demo源码下载)

    jQuery打字效果实现方法(附demo源码下载)

    本文实例讲述了jQuery打字效果实现方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示效果. 1.前台页面代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3

  • jQuery 写的简单打字游戏可以提示正确和错误的次数

    var off_x; //横坐标 var count=0; //总分 var speed=5000; //速度,默认是5秒. var keyErro=0; //输入错误次数 var keyRight=0; //输入正确的次数 //组织字母 var charArray=new Array("A", "B", "C", "D", "E", "F", "G", "

  • jQuery实现标题有打字效果的焦点图代码

    jQuery实现标题有打字效果的焦点图代码

    本文实例讲述了jQuery实现标题有打字效果的焦点图代码.分享给大家供大家参考,具体如下: 给大家分享一款基于jQuery标题有打字效果的焦点图,具有标题打字形式逐渐显示的功能.这款焦点图适用浏览器有:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-title-print-style-flash-codes/ 完整实例代码代码点击此处本站

  • 基于Css3和JQuery实现打字机效果

    基于Css3和JQuery实现打字机效果

    先给大家附上效果图: 最近做项目的时候需要实现一个字符逐个出现的打字效果,用css的clip+css的动画实现的,与自己写的打字机效果相结合,整 理一起,效果很赞. 先来说说这个线条,我们会看到它是条,实际上就是个四周border有规律的显示隐藏,那么这里必定会想到after,before属性, 我们暂且先考虑after. 先建立一个box,然后after一个边框 <div class="box"></div> .box:before{ content: '';

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

    复制代码 代码如下: <h1>Libraries give you  <span class="txt-rotate fw700" data-period=500" data-rotate='[ "knowledge", "community", "an outlet", "中国起源", "OSCHINA" ]'></span></h1

  • JS实现的自动打字效果示例

    JS实现的自动打字效果示例

    本文实例讲述了JS实现的自动打字效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>js typing</title> </head> <body> <div id='divTyping'></div> <script> var str = 'js 实现的 打字效果,感

  • JS打字效果的动态菜单代码分享

    JS打字效果的动态菜单代码分享

    这是一款基于javascript实现的打字效果的动态菜单特效代码,分享给大家学习学习. 运行效果图:----------------------查看效果----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的JS打字效果的动态菜单代码如下 <html> <head> <title>JS打字效果的动态菜单</title> <meta http-equiv="imagetoolbar&

  • jQuery实现的放大镜效果示例

    jQuery实现的放大镜效果示例

    本文实例讲述了jQuery实现的放大镜效果.分享给大家供大家参考,具体如下: zoom.css: *{ padding: 0; margin: 0; } li{ list-style-type: none; } .zoom{ margin: 50px; position: relative; } .zoomMiddle{ border: 1px solid #ccc; width: 300px; height: 300px; margin-bottom: 3px; position: relat

  • Js 打字效果 逐一出现的文字

    第一种:打印多个文字 逐个出现的文字 var layers =document.layers,style=document.all,both=layers||style,idme=908601; if(layers){layerRef='document.layers';styleRef ='';}if(style){layerRef='document.all';styleRef = '.style';} function writeOnText(obj,str){ if(layers)wit

  • jquery实现背景墙聚光灯效果示例分享

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title

  • jquery制作搜狐快站页面效果示例分享

    jquery制作搜狐快站页面效果示例分享

    复制代码 代码如下: <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script><script type="text/javascript" src="js/jquery-ui-1.10.3.min.js"></script><script type="text/javascript&

  • Jquery easyui 下loaing效果示例代码

    复制代码 代码如下: //采用jquery easyui loading css效果 function ajaxLoading(){     $("<div class=\"datagrid-mask\"></div>").css({display:"block",width:"100%",height:$(window).height()}).appendTo("body");  

  • Spring Data Jpa+SpringMVC+Jquery.pagination.js实现分页示例

    Spring Data Jpa+SpringMVC+Jquery.pagination.js实现分页示例

    本博客介绍基于Spring Data这款orm框架加上 Jquery.pagination插件实现的分页功能. 本博客是基于一款正在开发中的github开源项目的,项目代码地址:https://github.com/u014427391/jeeplatform 欢迎star(收藏)或者可以下载去学习,还在开发- 介绍一下Spring Data框架 spring Data : Spring 的一个子项目.用于简化数据库访问,支持NoSQL 和 关系数据存储. 下面给出SpringData 项目所支

  • jquery马赛克拼接翻转效果代码分享

    jquery马赛克拼接翻转效果代码分享

    jquery实现的非常漂亮的图片马赛克翻转效果,经测试图片切换过程非常酷,整个图片分成一个一个的小方格进行翻转变换,感兴趣的朋友快来学习学习吧 运行效果图:----------------------查看效果 下载源码----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery马赛克拼接翻转效果代码如下 <!DOCTYPE html> <head> <meta http-equiv="Conten

随机推荐