前言：这是一个混合属性，作用是将两个颜色混合生成一个新颜色。可以将视频和文字相融合，产生动态文字效果。
效果
实现代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" /> <title>document</title> <style> body { background: #000; } video { width: 100%; } .txt { font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif; color: #000; font-size: 10em; font-weight: bold; position: absolute; inset: 0; background: #fff; display: flex; justify-content: center; align-items: center; mix-blend-mode: screen; } </style> </head> <body> <div class="box"> <video src="./demo.mp4" autoplay muted></video> <div class="txt">黑神话：悟空</div> </div> <script></script> </body> </html>
