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弹性盒模型flex box快速入门心得(必看篇)
May 24 HTML / CSS
CSS3 实现弹幕的示例代码
Aug 07 HTML / CSS
纯CSS3+DIV实现小三角形边框效果的示例代码
Aug 03 HTML / CSS
html5使用html2canvas实现浏览器截图的示例
Aug 31 HTML / CSS
html5中valid、invalid、required的定义
Feb 21 HTML / CSS
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
Apr 14 HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
Jan 30 HTML / CSS
Html5写一个简单的俄罗斯方块小游戏
Dec 03 HTML / CSS
HTML5调用手机发短信和打电话功能
Apr 29 HTML / CSS
不要在HTML中滥用div
May 08 HTML / CSS
HTML5页面音频自动播放的实现方式
Jun 21 HTML / CSS
关于CSS浮动与取消浮动的问题
Jun 28 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
PHP 数据库树的遍历方法
2009/02/06 PHP
php xml文件操作实现代码(二)
2009/03/20 PHP
php 服务器调试 Zend Debugger 的安装教程
2009/09/25 PHP
PDO::prepare讲解
2019/01/29 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
jquery 操作表格实现代码(多种操作打包)
2011/03/20 Javascript
JavaScript(js)设置默认输入焦点(focus)
2012/12/28 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
2013/10/17 Javascript
javascript中interval与setTimeOut的区别示例介绍
2014/03/14 Javascript
js实现九宫格图片半透明渐显特效的方法
2015/02/16 Javascript
Web Uploader文件上传插件使用详解
2016/05/10 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
2016/06/16 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
2016/11/01 Javascript
localStorage的黑科技-js和css缓存机制
2017/02/06 Javascript
vue中实现先请求数据再渲染dom分享
2018/03/17 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
2018/09/20 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
2019/07/19 Javascript
Python专用方法与迭代机制实例分析
2014/09/15 Python
Python使用Srapy框架爬虫模拟登陆并抓取知乎内容
2016/07/02 Python
深入解析Python的Tornado框架中内置的模板引擎
2016/07/11 Python
python OpenCV学习笔记之绘制直方图的方法
2018/02/08 Python
对python 自定义协议的方法详解
2019/02/13 Python
详解numpy.meshgrid()方法使用
2019/08/01 Python
python实现图像拼接功能
2020/03/23 Python
Django web自定义通用权限控制实现方法
2020/11/24 Python
详解HTML5中download属性的应用
2015/08/06 HTML / CSS
英国儿童鞋和靴子:Start-Rite
2019/05/06 全球购物
C#如何判断当前用户是否输入某个域
2015/12/07 面试题
驾驶员岗位职责
2014/01/29 职场文书
学习保证书100字
2015/02/26 职场文书
教师节主持词开场白
2015/05/29 职场文书
2016见义勇为事迹材料汇总
2016/03/01 职场文书
Redis做数据持久化的解决方案及底层原理
2021/07/15 Redis
HTML常用标签超详细整理
2022/03/19 HTML / CSS
在Windows Server 2012上安装 .NET Framework 3.5 所遇到的问题
2022/04/29 Servers
Java 死锁解决方案
2022/05/11 Java/Android