前端 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>
相关推荐
lizhongxuan5 小时前
Claude Code 防上下文爆炸:源码级深度解析
前端·后端
柳杉7 小时前
震惊!字符串还能这么玩!
前端·javascript
是上好佳佳佳呀7 小时前
【前端(五)】CSS 知识梳理:浮动与定位
前端·css
wefly20178 小时前
纯前端架构深度解析:jsontop.cn,JSON 格式化与全栈开发效率平台
java·前端·python·架构·正则表达式·json·php
我命由我123459 小时前
React - 类组件 setState 的 2 种写法、LazyLoad、useState
前端·javascript·react.js·html·ecmascript·html5·js
自由生长202410 小时前
IndexedDB的观察
前端
IT_陈寒10 小时前
Vite热更新坑了我三天,原来配置要这么写
前端·人工智能·后端
斯班奇的好朋友阿法法10 小时前
离线ollama导入Qwen3.5-9B.Q8_0.gguf模型
开发语言·前端·javascript
掘金一周10 小时前
每月固定续订,但是token根本不够用,掘友们有无算力焦虑啊 | 沸点周刊 4.2
前端·aigc·openai
小村儿10 小时前
连载加餐01-claude code 源码泄漏 ---一起吃透 Claude Code,告别 AI coding 迷茫
前端·后端·ai编程