css字体飞入效果图 |css 唤醒短信

h1 {
font-size: 0;
animation: fly-in 0.6s ease-out forwards;
}
@keyframes fly-in {
0% { 
transform: translateY(-100%);
font-size: 4em;
}
100% { 
transform: translateY(0%);
font-size: 2em;
}
}

上面的代码使用了CSS的关键帧动画和过渡效果。其中h1是大家要使用字体飞入效果的元素，大家先将它的字体大小设置为0，然后定义了一个名为fly-in的关键帧动画。

这个动画从0%到100%先是将h1元素从页面的顶部移动到中央（translateY(-100%)），并且将字体大小从4em变成2em。完成移动后，它会缓慢地从中央回到原来的位置（translateY(0%)），在这个过程中字体大小一直是2em。

最后，为了让这些样式生效，大家需要将动画的名称fly-in添加到h1元素的样式中。大家还指定了一个转换时间为0.6秒，本动画的速度为“ease-out”，这样就能让动画效果更加平滑。

有了这段代码，现在您可以让h1元素在页面加载时以一个引人注目的方式出现了。