CSS3动画文字打印效果

样式

    <style type="text/css">
        @-webkit-keyframes typing {
            from { width: 100% }
            to { width:0 }
        }

        @-webkit-keyframes blink-caret {
            from, to { border-color: transparent }
            50% { border-color: black }
        }

        @-moz-keyframes typing {
            from { width: 100% }
            to { width:0 }
        }

        @-moz-keyframes blink-caret {
            from, to { border-color: transparent }
            50% { border-color: black }
        }

        body { font-family: Consolas, monospace; }

        h1 {
            position: relative;
            float: left;
            font-size:150%;
        }

        h1 span {
            position:absolute;
            top:0;
            right:0;
            width:0;
            background: white; /* same as background */
            border-left: .1em solid black;

            -moz-box-sizing: border-box;
            box-sizing: border-box;

            -webkit-animation: typing 4s steps(8, end), /* # of steps = # of characters */
            blink-caret 1s step-end infinite;
            -moz-animation: typing 4s steps(8, end), /* # of steps = # of characters */
            blink-caret 1s step-end infinite;
        }
    </style>

HTML

<h1>小学生的小工程。<span>&nbsp;</span></h1>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值