一个网站上的字体动画

活到老学到老，真的是每天都发现自己基础有点问题，实践是检验真理的唯一标准

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                width: 1000px;
                height: 100px;
                margin: 50px auto;
                text-align: center;
            }
            .font-exp{
                display: block;
                letter-spacing: 2px;
                transition: all 1s ease-in-out;
                font-size: 40px;
                font-family: "微软雅黑";
            }
            .font-exp:hover{
                letter-spacing: 5px;
                font-size: 45px;
            }
        </style>
    </head>
    <body>
        <div>
            <span class="font-exp">share your code,share your wrold</span>
        </div>
    </body>
</html>

设置transition的时候，要在状态切换前后，都设置对用属性的值

fontchange.gif
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容