前端 CSS 经典:mix-blend-mode 属性

前言:这是一个混合属性,作用是将两个颜色混合生成一个新颜色。可以将视频和文字相融合,产生动态文字效果

效果

实现代码

html 复制代码
<!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>
相关推荐
云飞云共享云桌面3 小时前
高性能图形工作站的资源如何共享给10个SolidWorks研发设计用
linux·运维·服务器·前端·网络·数据库·人工智能
Deng9452013143 小时前
Vue + Flask 前后端分离项目实战:从零搭建一个完整博客系统
前端·vue.js·flask
威迪斯特3 小时前
Flask:轻量级Web框架的技术本质与工程实践
前端·数据库·后端·python·flask·开发框架·核心架构
wuhen_n4 小时前
JavaScript内置数据结构
开发语言·前端·javascript·数据结构
大鱼前端4 小时前
为什么我说CSS-in-JS是前端“最佳”的糟粕设计?
前端
不爱吃糖的程序媛4 小时前
Capacitor:跨平台Web原生应用开发利器,现已全面适配鸿蒙
前端·华为·harmonyos
AC赳赳老秦4 小时前
2026国产算力新周期:DeepSeek实战适配英伟达H200,引领大模型训练效率跃升
大数据·前端·人工智能·算法·tidb·memcache·deepseek
CHU7290354 小时前
淘宝扭蛋机抽盒小程序前端功能解析:解锁趣味抽盒新体验
前端·小程序
-凌凌漆-4 小时前
【npm】npm的-D选项介绍
前端·npm·node.js
鹿心肺语4 小时前
前端HTML转PDF的两种主流方案深度解析
前端·javascript