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系列教程:背景图片(背景大小和多背景图) 应用说明
Dec 19 HTML / CSS
CSS3中31种选择器使用方法教程
Dec 05 HTML / CSS
一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整
Sep 02 HTML / CSS
IE浏览器单独写CSS样式的几种方法
Oct 14 HTML / CSS
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
Jun 28 HTML / CSS
CSS3的 fit-content实现水平居中
Sep 07 HTML / CSS
HTML5 canvas基本绘图之绘制阴影效果
Jun 27 HTML / CSS
HTML5语义化元素你真的用对了吗
Aug 22 HTML / CSS
HTML5播放实现rtmp流直播
Jun 16 HTML / CSS
浅谈移动端中的视口(viewport)的具体使用
Apr 13 HTML / CSS
css样式important规则的正确使用方式
Jun 10 HTML / CSS
CSS控制继承中的height能变为可继承吗
Jun 10 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 select,radio和checkbox默认选择的实现方法
2010/05/15 PHP
php常用Stream函数集介绍
2013/06/24 PHP
简单谈谈favicon
2015/06/10 PHP
分享微信扫码支付开发遇到问题及解决方案-附Ecshop微信支付插件
2015/08/23 PHP
php+lottery.js实现九宫格抽奖功能
2019/07/21 PHP
经典的带阴影的可拖动的浮动层
2006/06/26 Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
2011/05/28 Javascript
合并table相同单元格的jquery插件分享(很精简)
2011/06/20 Javascript
ie8本地图片上传预览示例代码
2014/01/12 Javascript
JQuery之proxy实现绑定代理方法
2016/08/01 Javascript
详解Js模板引擎(TrimPath)
2016/11/22 Javascript
实例解析angularjs的filter过滤器
2016/12/14 Javascript
Node.js调试技术总结分享
2017/03/12 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
2017/03/21 jQuery
在vue-cli脚手架中配置一个vue-router前端路由
2017/07/03 Javascript
Node.js 进程平滑离场剖析小结
2019/01/24 Javascript
vue组件 keep-alive 和 transition 使用详解
2019/10/11 Javascript
vue实现简易的双向数据绑定
2020/12/29 Vue.js
python print 按逗号或空格分隔的方法
2018/05/02 Python
如何用python整理附件
2018/05/13 Python
Django实现表单验证
2018/09/08 Python
Python一句代码实现找出所有水仙花数的方法
2018/11/13 Python
解决vscode python print 输出窗口中文乱码的问题
2018/12/03 Python
Django 请求Request的具体使用方法
2019/11/11 Python
Python Scrapy框架第一个入门程序示例
2020/02/05 Python
英国花园药房: The Garden Pharmacy
2017/12/28 全球购物
英国一家集合了众多有才华设计师品牌的奢侈店:Wolf & Badger
2018/04/18 全球购物
Ajax请求总共有多少种Callback
2016/07/17 面试题
应届行政管理专业个人自我评价
2013/12/28 职场文书
食品安全工作方案
2014/05/07 职场文书
消防标语大全
2014/06/07 职场文书
乡镇党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
学习保证书怎么写
2015/02/26 职场文书
小学生教师节广播稿
2015/08/19 职场文书
CSS 实现多彩、智能的阴影效果
2021/05/12 HTML / CSS
nginx中proxy_pass各种用法详解
2021/11/07 Servers