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

news2024/11/24 15:34:12

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

效果

实现代码 

<!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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1865453.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

数据资产风险管理与合规性:全面识别、科学评估并有效应对数据风险,确保企业数据资产的安全性与合规性,为企业稳健发展提供坚实保障

一、引言 在数字化时代&#xff0c;数据资产已成为企业运营和决策的核心要素。然而&#xff0c;随着数据量的快速增长和技术的不断演进&#xff0c;数据资产面临的风险也日益增多&#xff0c;如数据泄露、数据篡改、数据滥用等。同时&#xff0c;数据保护法律法规的不断完善&a…

文华财经盘立方均线-支撑压力自动画线多空声音预警指标公式源码

文华财经盘立方多空均线-支撑压力自动画线指标公式源码&#xff1a; //MA5:MA(C,5); //MA10:MA(C,10); MA20:MA(C,20),COLORRED; MA60:MA(C,60),COLORGREEN; TY:CLOSE; HD:FILTER(BACKSET(FILTER(REF(TY,10)HHV(TY,2*101),10),101),10); LD:FILTER(BACKSET(FILTER(REF(T…

PatchMixer:一种用于长时间序列预测的Patch混合架构

前言 《PatchMixer: A Patch-Mixing Architecture for Long-Term Time Series Forecasting》原文地址&#xff0c;Github开源代码地址GitHub项目地址Some-Paper-CN。本项目是译者在学习长时间序列预测、CV、NLP和机器学习过程中精读的一些论文&#xff0c;并对其进行了中文翻译…

jdk1.8升级到jdk11遇到的各种问题

一、第三方依赖使用了BASE64Decoder 如果项目中使用了这个类 sun.misc.BASE64Decoder&#xff0c;就会导致错误&#xff0c;因为再jdk11中&#xff0c;该类已经被删除。 Caused by: java.lang.NoClassDefFoundError: sun/misc/BASE64Encoder 当然这个类也有替换方式&#xf…

一本好的电子画册应这样做,你做对了吗?

​一本好的电子画册&#xff0c;不仅要有吸引人的图文&#xff0c;还可能包括视频、音频等多媒体元素&#xff0c;为读者提供全方位的阅读体验。连贯性是指画册的整体设计风格、内容布局要协调一致&#xff0c;让读者在阅读过程中感受到流畅和自然。创新性则要求创作者在内容呈…

【别再用Excel了!】这款免费可视化工具能帮你轻松提升效率

现代数据分析和展示的需求已经远远超出了传统工具的能力&#xff0c;尤其是在需要快速、直观和高效地处理复杂数据的情况下。山海鲸可视化通过其强大的功能和易用性&#xff0c;成为了设计师以及各类新手用户的理想选择。下面我就以一个可视化设计师的角度&#xff0c;和大家简…

月入稳定还是创业冒险:你的选择决定未来

大家好&#xff0c;我是汇舟问卷。在现在这个环境下&#xff0c;无论是就业还是创业都不好做。在传统就业与创业之间的选择时&#xff0c;我们应避免一概而论或过度推崇某一方向。 事实上&#xff0c;并非所有人都适合创业&#xff0c;对于那些满足于稳定工作&#xff0c;每月…

深入理解计算机系统 CSAPP 家庭作业7.13

用一下496页提到的工具咯 A: whereis libm.a file lidm.a gedit libm.a libm.a是个ASCII text文件打开一看原来 libm-2.27.a 和libmvec.a才是我们要看的 所以我们cd到目标地址后 ar -t libm-2.27.a ar -t libmvec.a B: gcc -Og bar5.c foo5.c 用之前的两个文件链接后生成…

电脑复制按哪个键?还不会操作的赶紧来看!

当我们提到“电脑复制按哪个键”时&#xff0c;实际上是在讨论电脑键盘上用于执行复制操作的快捷键。复制功能在日常的电脑操作中极为常用&#xff0c;无论是文本编辑、文件处理还是图片操作&#xff0c;都离不开复制这一基本功能。以下&#xff0c;我们将深入探讨电脑复制操作…

不花一分钱也能制作出高质量的宣传册

在当今竞争激烈的市场环境中&#xff0c;拥有一份高质量的宣传册对于企业或个人来说至关重要。它能帮助您在客户心中留下深刻印象&#xff0c;有效推广您的品牌或服务。但聘请专业设计师和印刷商制作宣传册往往需要不小的开支。那么&#xff0c;有没有既省钱又能做出高质量宣传…

web图片怎么导入ps?这个方法给你轻松解决!

随着WebP格式图片因其体积小、加载快的优势在网站中日益普及&#xff0c;对于图片编辑者来说&#xff0c;能够直接在Photoshop中打开和编辑WebP文件变得尤为重要。 WebPShop插件应运而生&#xff0c;它是一个专为Photoshop设计的模块&#xff0c;支持打开和保存WebP图像&#…

如何借助物联网实现土壤监测与保护

如何借助物联网实现土壤监测与保护 高标准农田信息化是指利用现代信息技术&#xff0c;如物联网、大数据、云计算等&#xff0c;对农田进行数字化、智能化的管理&#xff0c;以提高农田的生产效率和可持续发展能力。其中&#xff0c;土壤监测与保护是农田信息化的重要内容之一…

面向对象修炼手册(四)(多态与空间分配)(Java宝典)

&#x1f308; 个人主页&#xff1a;十二月的猫-CSDN博客 &#x1f525; 系列专栏&#xff1a; &#x1f3c0;面向对象修炼手册 &#x1f4aa;&#x1f3fb; 十二月的寒冬阻挡不了春天的脚步&#xff0c;十二点的黑夜遮蔽不住黎明的曙光 目录 前言 1 多态 1.1 多态的形式&…

鉴权开发框架Django REST framework的应用场景

目录 一、鉴权开发框架介绍二、Django REST framework是什么三、如何实现认证、权限与限流功能四、Django REST framework的应用场景 一、鉴权开发框架介绍 鉴权开发框架是一种用于实现身份验证和授权的软件开发工具。它可以帮助开发者快速构建安全、可靠的身份验证和授权系统…

喜报!莱佛士学生斩获2024年AIFW新兴设计师奖

近日&#xff0c;2024年东盟国际时装周&#xff08;AIFW&#xff09;在新加坡滨海湾金沙艺术科学博物馆隆重举行。 在这场时尚盛宴中&#xff0c;莱佛士服装设计专业的学生Sonpavarapong SASIPIM&#xff08;Hunny&#xff09;以其出色的设计才华和独特的设计风格脱颖而出&…

二维到三维的华丽转身:3D培训大师点亮汽车维修课件制作的立体新篇章

随着汽车技术的迅猛发展与新能源汽车的快速普及&#xff0c;汽车维修领域亦呈现出日新月异的革新态势。传统的汽车维修培训通常是通过以下两种方式开展&#xff1a;在专业的汽车维修学校进行系统培训和在汽车维修企业或修理站进行实地培训。一般来说&#xff0c;后者往往以前者…

C语言 指针——从函数返回字符串

目录 从函数返回字符指针 编程实现strcat()的功能 小结 从函数返回字符指针 编程实现strcat()的功能 小结 明确字符串被保存到了哪里&#xff0c;明确字符指针指向了哪里  指向字符串常量的字符指针  指向字符数组的字符指针 向函数传递字符串的方法  向函数传…

解决java中时间参数的问题

在java的日常开发中&#xff0c;我们经常需要去接收前端传递过来的时间字符串&#xff0c;同时给前端返回数据时&#xff0c;也会涉及到时间字段的数据传递&#xff0c;那么我们要如何处理这些字段呢&#xff1f; 知识铺垫&#xff1a;java最后返回的时间是时间世界&#xff0…

春秋云境:CVE-2022-25411[漏洞复现]

根据题目提示和CNNVD优先寻找后台管理地址 靶机启动后&#xff0c;使用AWVS进行扫描查看网站结构 在这里可以看到后台管理的登录地址&#xff1a;/admin/&#xff0c;根据题目提示可知是弱口令 尝试admin、123456、admin666、admin123、admin888...等等常见弱口令 正确的账户…

Yolo v5实现细节

Yolo v5实现细节 SiLU激活函数 swish和SiLU激活函数:其中β是常量或者是可学习的参数 首先引入swish函数的表达形式&#xff1a; f ( x ) x ⋅ sigmoid ⁡ ( β x ) f(x)x \cdot \operatorname{sigmoid}(\beta x) f(x)x⋅sigmoid(βx) 如果β 1即SiLU激活函数: f ( x ) x …