[站长]简单几行代码实现打字效果 - 微夏博客网 - 致力于网络优秀资源的分享、交流!
  • 首页
  • [站长]简单几行代码实现打字效果

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

由 ℡若兮相言 于 2016-10-31 19:20 Monday 发表,已有1025人观看。


    先来看最终实现的效果:



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

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






↓↓↓↓↓你可能在找下面的内容↓↓↓↓↓

特别申明:若无说明,文章均为原创,转载时请注明本文地址,谢谢合作!
本文链接:
评论:
千变郎君 2016-11-03 11:06 Google Chrome 53.0.2785.143 非主流操作系统
有没有兼容好一点的js的剪切板操作代码呢!

℡若兮相言 2016-11-03 12:18
@千变郎君:你的意思是复制后弹出窗口提醒什么的?
没注册过这方面内容,因为网站主要就是分享资源给大家嘛,复制什么的,随便吧

千变郎君 2016-11-03 09:33
博主,代码高亮插件用的什么插件

℡若兮相言 2016-11-03 10:08
@千变郎君:是通过添加代码实现的,这里有详细的教程。
http://www.vxia.net/post-377.html

分钱榜 2016-11-02 09:24 Google Chrome 47.0.2526.80 Windows XP
怎么把它放到网站标题上呢

℡若兮相言 2016-11-02 10:13
@分钱榜:已更新相应内容,演示效果:http://www.vxia.net/demo/title.html

发表评论: