• CSS揭秘—打字动效(四)


     

      前言:

           所有实例均来自《CSS揭秘》,该书以平时遇到的疑难杂症为引,提供解决方法,只能说秒极了,再一次刷新了我对CSS的认知

        该书只提供了关键CSS代码,虽然有在线示例代码链接,但访问速度较慢。下面示例代码是我自己写的,若有错误,欢迎指正

        注:我会在最开头附上每个相关示例所需CSS属性链接作为补充,以供查阅和学习

          我会在每个示例最后附上书中提供的在线示例代码链接;

          我会从书中选择一些css技巧来分享,有兴趣的小伙伴可以去看看这本书,你不会失望的

      CSS需知:

         ch长度单位  (ch介绍及实际使用场景)

          steps通俗易懂的steps属性讲解)

       场景:

        如果让你实现自动打字动效(如下图,想象用键盘在电脑上输入文字的场景)你会怎么做呢?

          

          以前要实现该效果可能需要写较多复杂的JS代码,而且代码较为冗杂,也不利于维护

        

       解决方法:

          只需要借用CSS3新增长度单位ch + steps属性即可

          注:建议先看上面css需知中2篇张大神的博文,能帮助你更好的理解

       Demo

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="utf-8" />
            <title></title>
            <style>
                @keyframes typing {
                    0% {
                        width: 0;
                    }
                }
                
                @keyframes caret {
                    50% {
                        border-right-color: transparent;
                    }
                }
                
                h1 {
                    width: 11ch;
                    white-space: nowrap;
                    overflow: hidden;
                    font-weight: bold;
                    font-size: 36px;
                    font-family: Monaco,monospace,Consolas,"微软雅黑";
                    border-right: 10px solid #ccc;
                    animation: typing 8s steps(11), caret 1s steps(1) infinite;
                }
            </style>
        </head>
    
        <body>
            <h1>hello world</h1>
            <h1>0000000000000000000</h1>
        </body>
    
    </html>

      书中在线实例:http://dabblet.com/gist/b04ab9f41084b0a66960

      补:ch兼容性(PC端支持不错,IE9及以上和其它主流浏览器都支持,移动端安卓暂不支持,所以更多可能考虑在PC端使用)

     

  • 相关阅读:
    复合文字(C99)
    复浮点数(C99)
    字符串的数组形式与指针形式
    《设计模式之禅》学习笔记(十)
    旧关键字的新位置(C99)
    C的存储类、链接和内存管理
    scanf( )函数的格式化输入
    《设计模式之禅》学习笔记(十三)
    yum软件包管理器
    《设计模式之禅》学习笔记(十五)
  • 原文地址:https://www.cnblogs.com/tu-0718/p/10912113.html
Copyright © 2020-2023  润新知