【CSS】视频文字特效

效果展示

index.html

html 复制代码
<!DOCTYPE html>
<html>
  <head>
    <title> Document </title>
    <link type="text/css" rel="styleSheet" href="index.css" />
  </head>
  <body>
    <div class="container">
      <video src="fire.mp4" autoplay muted loop></video>
      <div class="txt">少莫千华</div>
    </div>
  </body>
</html>

index.css

css 复制代码
.container{
  color: #000;
  font-size: 10em;
  font-weight: bold;
  font-family: '李旭科书法';
}
video{
  width: 100%;
}

.txt{
  visibility: visible;
  position: absolute;
  inset: 0;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  mix-blend-mode: screen;
}
  • inset: 0;等同于 `top: 0; right: 0; bottom: 0; left: 0;
  • display: flex;弹性盒
  • position:absolute;绝对定位
  • justify-content:center;水平居中
  • align-items: center;垂直居中
  • mix-blend-mode: screen;混合模式-与上一层(视频层进行混合)

fire.mp4

下载

李旭科书法

下载

相关推荐
careybobo1 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
杉之2 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端3 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡3 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木4 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
请来次降维打击!!!4 小时前
优选算法系列(5.位运算)
java·前端·c++·算法
難釋懷5 小时前
JavaScript基础-移动端常见特效
开发语言·前端·javascript
自动花钱机5 小时前
WebUI问题总结
前端·javascript·bootstrap·css3·html5
拉不动的猪6 小时前
简单回顾下pc端与mobile端的适配问题
前端·javascript·面试
拉不动的猪6 小时前
刷刷题49(react中几个常见的性能优化问题)
前端·react.js·面试