最近在油管上subscribe了一个专门做css特效的频道
跟着做了一下Pure CSS Text Reveal From Smoke Animation Effect
这个特效,来分享一下里面涉及的css tips。
话不多说,先上效果:
烟雾的素材就是一个灰色的烟雾视频mp4,如下图所示:
代码如下,注释了相关的tips:
// index.html
<!DOCTYPE html>
<html>
<head>
<title>Text Reveal Animation Effect</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section>
<!-- muted 属性属于逻辑属性。
当设置该属性后,它规定视频的音频输出应该被静音。 -->
<video src="smoke.mp4" autoplay muted></video>