[站长]简单几行代码实现打字效果


先来看最终实现的效果:



看到上面的图片,第一感觉,应该很难实现吧?

其他源码很简单,只需要几行 CSS 样式就可解决。


这里微夏博客把源码贴上来(为了方便,微夏博客把CSS整合在了一个HTML文件中了)



<html>
<head>
<meta charset="UTF-8">
<title>微夏博客简单实现打字效果</title>
</head>

<style type="text/css">
  #type{

        width:300px;	/*这里修改文字长度*/
        white-space:nowrap;
        overflow:hidden;
        -webkit-animation: dy 3s steps(60, end) infinite;
        animation: dy 3s steps(50, end) infinite;
    }
    @-webkit-keyframes dy{
        from { width: 0;}
    }
    @keyframes dy{
        from { width: 0;}
    }
</style>

<body>
<p id="type">微夏博客网 [vxia.net] </p>
</body>
</html>




来看下演示效果链接:

http://www.vxia.net/demo/dzxg.html


标题字流动字体效果:


<span id="ContentArea"><html>
  <head>
	<meta charset="UTF-8">
  <title></title>
  <script language="Javascript">
  var msg="微夏博客网 vxia.net	"
  var delay=200
  function scrollTitle() {
   window.document.title=msg
   msg=msg.substring(1,msg.length)+msg.substring(0,1)
   timeID=setTimeout("scrollTitle()",delay)
  }
  </script>
  </head>
  <body onload="scrollTitle()">
	<center>微夏博客网 vxia.net</center>
  </body>
  </html></span>


演示效果:

http://www.vxia.net/demo/title.html



内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.vxia.net/post-948.html

相关推荐

评论

  1. 2016-11-03 11:06
    有没有兼容好一点的js的剪切板操作代码呢!
    1. 2016-11-03 12:18
      @千变郎君:你的意思是复制后弹出窗口提醒什么的?
      没注册过这方面内容,因为网站主要就是分享资源给大家嘛,复制什么的,随便吧
  1. 2016-11-03 09:33
    博主,代码高亮插件用的什么插件
    1. 2016-11-03 10:08
      @千变郎君:是通过添加代码实现的,这里有详细的教程。
      http://www.vxia.net/post-377.html
  1. 2016-11-02 09:24
    怎么把它放到网站标题上呢
    1. 2016-11-02 10:13
      @分钱榜:已更新相应内容,演示效果:http://www.vxia.net/demo/title.html

你肿么看?

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。