本文主要是介绍前端 CSS 经典：mix-blend-mode 属性，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
前言：这是一个混合属性，作用是将两个颜色混合生成一个新颜色。可以将视频和文字相融合，产生动态文字效果。
效果
实现代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><metaname="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>这篇关于前端 CSS 经典：mix-blend-mode 属性的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
