【CSS】视频文字特效

最新推荐文章于 2023-10-05 14:32:02 发布
最新推荐文章于 2023-10-05 14:32:02 发布
阅读量823 收藏
点赞数
分类专栏： 语言-HTML 文章标签： css 前端 视频文字特效 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenlu5201314/article/details/132045153
版权

效果展示

在这里插入图片描述

index.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

.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

下载

李旭科书法

下载

少莫千华
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
文字弹出窗口CSS特效
01-06
文字弹出窗口CSS特效
HTML5自定义背景图片的文字特效
08-23
在HTML5和CSS3标准出来之前，文字的背景只能是纯色，更不用说是自定义背景图片了。然而，强大的HTML5不仅让文字背景支持渐变颜色，而且支持自定义的背景图片，这些图片就像遮罩层，让文字的背景变得丰富多彩。
8种炫酷网页介绍标题文字动画特效
12-13
这是一组效果非常炫酷的网页介绍标题文字动画特效。这组文字动画效果共有8种效果，分别为弹性效果，文字剪裁效果，文字遮罩效果，视觉差效果，反转效果，文字缩放效果和全屏视频背景效果。
CSS3动画悬停显示文字特效.zip
07-04
CSS3动画悬停显示文字特效，鼠标移动到图片上面的时候滑动显示出标题文字信息。
CSS3实现苹果Apple设备模型特效代码
03-20
CSS3实现苹果Apple设备模型代码是一款可以自由嵌入图片，文字，视频等HTML元素，支持图片轮播切换特效。
css实现视频文字特效
Bannerparter的博客
11-06 382
【代码】css实现视频文字特效。
css特效文字
qq_21383977的博客
06-03 755
文字背后播放视频 mix-blend-mode。
CSS 文字特效运用目录
最新发布
qq_33003143的博客
10-05 158
CSS文字特效运用目录
CSS常用特效
Lee的博客
07-17 1万+
本文是笔者写CSS时常用的套路。不论效果再怎么华丽，万变不离其宗。 1、交错动画 有时候，我们需要给多个元素添加同一个动画，播放后，不难发现它们会一起运动，一起结束，这样就会显得很平淡无奇。那么如何将动画变得稍微有趣一点呢？很简单，既然它们都是同一时刻开始运动的，那么让它们不在同一时刻运动不就可以了吗。如何让它们不在同一时刻运动呢？注意到CSS动画有延迟（delay）这一属性。举个栗子，比如有十个元素播放十个动画，将第二个元素的动画播放时间设定为比第一个元素晚0.5秒（也就是将延迟设为0.5秒），其
纯CSS实现滚动字幕
WaterArticle
05-30 644
纯CSS实现滚动字幕 代码：
精通css和css权威指南_CSS中的字幕–入门指南
cune1359的博客
07-04 187
Marquee最初是在Internet Explorer中引入的 ，并在90年代非常流行，后来W3C由于可用性问题最终决定将其从HTML标准元素中排除。 鼓励Web设计人员不要使用该标记。 但是，令人惊讶的是，该字幕现在正在卷土重来，而不是像以前那样以<marquee>标记格式，而是在CSS模块中。 该模块是Webkit CSS规范的一部分，并且W3C当前也正在使用类似的模块 ...
css3动画字幕_使用CSS3动画创建高级“字幕”
cune1359的博客
07-04 488
本文是我们的“ HTML5 / CSS3教程系列”的一部分 -致力于帮助您成为更好的设计师和/或开发人员。 单击此处查看同一系列的更多文章。 今天，我们将再次看一看“字幕” 。 实际上，我们在以前的文章中已经讨论了有关-webkit-marquee属性的内容，但是这次我们将进一步探讨该主题。 在本文中，我们将使用CSS3动画创建类似字幕的效果。 这样，我们将能够添加仅使用-webkit...
CSS特效--视频字幕浮现
weixin_52283867的博客
05-26 324
基本原理 这里首先我们要学会怎么使用transition+transform-origin+transform 举个例子： <div class="b"> <div class="box"></div> </div> .b{ width: 300px; height: 300px; background-color: springgreen;
【字符集】emoji字符集 - 旗帜、国旗、区旗等
热门推荐
少莫千华
07-20 1万+
emoji 字符集- 旗帜
【HTML】HTML浏览器打印自定义页眉页脚
少莫千华
07-08 1万+
1、IE(Internet Explorer)浏览（V） 注册表位置 计算机\HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\PageSetup 代码 说明 示例 &w 标题 ...
【HTML】鼠标移动 - 絮状特效（蒲公英特效）；鼠标点击文字特效
少莫千华
10-23 9369
源码 <!DOCTYPE html> <html lang="zh-cn"> <head> <title>鼠标特效</title> </head> <body> <script src="js/jquery-2.2.0.min.js"></script> ...
【HTML】css3实现旋转的立方体相册
少莫千华
10-13 8843
立体相册源码 使用时请保存为*.html格式 <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <title>少莫千华立体相册</title> <style> *{ margin: 0; padding: 0;...
【HTML】浪漫程序员 HTML5爱心表白动画
少莫千华
10-22 7417
我们程序员在追求爱情方面也是非常浪漫的，下面是一位同学利用自己所学的HTML5知识自制的HTML5爱心表白动画，画面非常温馨甜蜜，这样的创意很容易打动女孩，如果你是单身的程序员，也赶紧来制作自己的爱心表白动画吧。 结果 源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3....
html+css+javascri实现网站：页面分为头部、导航、内容、页脚四大部分。 必须有丰富的文字内容和清晰的图片资源， 所有页面相互超链接，可到三级页面，5个子页面组成。首页和子页风格类似，首页内容版块、布局要和子页有所区别 页面样式风格统一布局显示正常，能应用好DIV标签、CSS样式等元素，具有一定的审美情调，界面美观、布局设计独到、富有新意。 页面中有多媒体元素，如声音、视频、动画等； 页面中的图和文字要有JS特效，如定时切换和手动切换图片轮播等；
05-30
你可以使用 CSS 框架如 Bootstrap 或 Foundation 来快速搭建页面，也可以手动编写 CSS 样式来实现更加个性化的设计。 4. 接下来，你可以使用 JavaScript 来实现网站的交互和动态效果。你可以使用库如 jQuery 或 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值