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


先来看最终实现的效果:



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

其他源码很简单,只需要几行 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



赞赏
X
赞赏方式:
  • 支付宝
  • 微信

打开支付宝扫一扫

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

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

相关推荐