先上效果:
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)。
body