小白学编程(CSS)：跳动的文字

最新推荐文章于 2024-04-16 11:04:45 发布

X-SL

最新推荐文章于 2024-04-16 11:04:45 发布

阅读量2.3k

点赞数

分类专栏：炫酷特效文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_40924992/article/details/128140312

版权

先上效果：

CSS:文字跳动特效

思路：
这次我们的目标是实现文字的跳动。第一步：在页面中显示文字。HTML代码如下：

<body>
    <h1>
        <span>嗨</span>
        <span>，</span>
        <span>早</span>
        <span>上</span>
        <span>好</span>
    </h1>
</body>

第二步：使用CSS进一步修饰。
1.首先我们将body元素所容纳的空间看成一块画布。然后设置画布的大小。宽度没有明确设置，默认与浏览器显示同宽。高度设置为800px.
2.将这块画布设置为弹性布局(display:flex)。即：能够扩展和收缩flex容器内的元素，以最大限度地填充可用空间。
3.把flex容器内的元素在主轴上居中显示(justify-content:center)。
4.把flex容器内的元素在交叉轴上居中显示(align-items:center)。
5.设置整块画布的背景颜色(background-color:pink)。