CSS 3.0 结合video视频实现的创意开幕效果


Posted in HTML / CSS onJune 01, 2020

 给大家分享一个用CSS 3.0结合video视频实现的创意开幕,效果如下: 

CSS 3.0 结合video视频实现的创意开幕效果

以下是代码实现,欢迎大家复制粘贴和收藏。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS 3.0结合video视频实现的创意开幕</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: 'Poppins', sans-serif;
        }
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            background: #000;
        }
        h2 {
            position: relative;
            font-size: 3.4em;
            font-weight: 900;
            color: #fff;
            z-index: 1;
            overflow: hidden;
            margin: 20px 20px 0 0;
        }
        h2 span {
            color: #ff022c;
        }
        h2::before {
            content: '';
            position: absolute;
            left: -20%;
            width: 120%;
            height: 100%;
            background: linear-gradient(90deg, transparent 0%, #000 5%, #000 100%);
            animation: animate 5.5s linear forwards;
            animation-delay: 2s;
        }
        @keyframes animate {
            0% {
                left: -20%;
            }
            100% {
                left: 110%;
            }
        }
        video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 2;
            pointer-events: none;
            mix-blend-mode: screen;
        }
    </style>
</head>
<body>
    <video src="https://klxxcdn.oss-cn-hangzhou.aliyuncs.com/histudy/hrm/media/08reverse.mp4" autoplay muted></video>
    <h2><span>We</span> must uni<span>te a</span>gainst COVID-19</h2>
</body>
</html>

 总结

到此这篇关于CSS 3.0 结合video视频实现的创意开幕的文章就介绍到这了,更多相关css video视频开幕内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3绘制有活力的链接下划线
Jul 14 HTML / CSS
CSS3制作轮播图的一种方法
Nov 11 HTML / CSS
CSS3动画和HTML5新特性详解
Aug 31 HTML / CSS
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
Apr 10 HTML / CSS
html5中去掉input type date默认样式的方法
Sep 06 HTML / CSS
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
Jan 09 HTML / CSS
HTML5中的Web Notification桌面右下角通知功能的实现
Apr 19 HTML / CSS
利用 Canvas实现绘画一个未闭合的带进度条的圆环
Jul 26 HTML / CSS
解析浏览器的一些“滚动”行为鉴赏
Sep 16 HTML / CSS
解决HTML5中的audio在手机端和微信端的不能自动播放问题
Nov 04 HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
May 19 HTML / CSS
html+css实现文字折叠特效实例
Jun 02 HTML / CSS
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
Jun 01 #HTML / CSS
css3实现背景模糊的三种方式(小结)
May 15 #HTML / CSS
css3遮罩层镂空效果的多种实现方法
May 11 #HTML / CSS
css3的focus-within选择器的使用
May 11 #HTML / CSS
CSS3实现渐变背景兼容问题
May 06 #HTML / CSS
通过css3的filter滤镜改变png图片的颜色的示例代码
May 06 #HTML / CSS
基于ccs3的timeline时间线实现方法
Apr 30 #HTML / CSS
You might like
phpMyAdmin 安装及问题总结
2009/05/28 PHP
php将csv文件导入到mysql数据库的方法
2014/12/24 PHP
经典的解除许多网站无法复制文字的绝招
2006/12/31 Javascript
Prototype使用指南之range.js
2007/01/10 Javascript
javascript 树控件 比较好用
2009/06/11 Javascript
jQuery Ajax文件上传(php)
2009/06/16 Javascript
Windows系统下Node.js的简单入门教程
2015/06/23 Javascript
模仿password输入框的实现代码
2016/06/07 Javascript
解析JavaScript中的字符串类型与字符编码支持
2016/06/24 Javascript
微信小程序中做用户登录与登录态维护的实现详解
2017/05/17 Javascript
详解vue2 $watch要注意的问题
2017/09/08 Javascript
JavaScript 有用的代码片段和 trick
2018/02/22 Javascript
vue 中动态绑定class 和 style的方法代码详解
2018/06/01 Javascript
Vue-Router的使用方法
2018/09/05 Javascript
RxJS的入门指引和初步应用
2019/06/15 Javascript
Vue 实现html中根据类型显示内容
2019/10/28 Javascript
[02:18]DOTA2英雄基础教程 育母蜘蛛
2014/01/20 DOTA
django模型层(model)进行建表、查询与删除的基础教程
2017/11/21 Python
Python3导入自定义模块的三种方法详解
2018/04/13 Python
Python Django框架单元测试之文件上传测试示例
2019/05/17 Python
Python将主机名转换为IP地址的方法
2019/08/14 Python
python爬虫-模拟微博登录功能
2019/09/12 Python
python实现指定ip端口扫描方式
2019/12/17 Python
Python实现鼠标自动在屏幕上随机移动功能
2020/03/14 Python
Python实现UDP程序通信过程图解
2020/05/15 Python
python如何删除列为空的行
2020/07/17 Python
css3实现圆锥渐变conic-gradient效果
2020/02/12 HTML / CSS
Lentiamo丹麦:购买便宜的隐形眼镜
2021/01/13 全球购物
大学军训通讯稿
2014/01/13 职场文书
城建学院毕业生自荐信
2014/01/31 职场文书
邹越感恩父母演讲稿
2014/08/28 职场文书
2014年乡镇党建工作总结
2014/11/11 职场文书
2015年党风廉政承诺书
2015/01/22 职场文书
2015年教师自我评价范文
2015/03/04 职场文书
《思路决定出路》读后感3篇
2019/12/11 职场文书
Nginx location 和 proxy_pass路径配置问题小结
2021/09/04 Servers