一天一代码之CSS3动画(你没有女朋友)

Now_Sprouting

于 2020-03-27 18:22:14 发布

阅读量234

点赞数

文章标签： css3

本文链接：https://blog.youkuaiyun.com/Now_Sprouting/article/details/105147375

版权

CSS3的动画效果可以制作出许多有趣的动画效果,下面那展示一下:
在这里插入图片描述
CSS代码如下:

 div {
            overflow: hidden;
            width: 0px;
            height: 30px;
            margin: 200px auto;
            /* background-color: pink; */
            font-size: 20px;
            white-space: nowrap;
            animation: move 5s steps(10) forwards;
        }
        
        @keyframes move {
            0% {}
            100% {
                width: 200px;
            }
        }

HTML代码如下:

  <div>你没有女朋友哈哈哈哈</div>