一个丝滑的视频背景网页样式

最新推荐文章于 2023-09-03 13:29:59 发布
最新推荐文章于 2023-09-03 13:29:59 发布
阅读量1.3k 收藏 2
点赞数 1
分类专栏： web前端 文章标签： 音视频 css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45797026/article/details/122331167
版权

参考地址：科学上网后点击
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website with Video Background</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <header>
        <a href="#" class="logo">Logo</a>
        <div class="rightSide">
            <div class="btns dayNight">
                <ion-icon name="moon-outline"></ion-icon>
                <ion-icon name="sunny-outline"></ion-icon>
            </div>
            <div class="btns menuToggle">
                <ion-icon name="menu-outline"></ion-icon>
                <ion-icon name="close-outline"></ion-icon>
            </div>


        </div>
    </header>
    <section class='main'>
        <video src="./asset/video.mp4" autoplay loop muted type='mp4'></video>
        <img src='./asset/mask.jpg' class='mask'>
        <h2>Ocean</h2>
    </section>

    <!-- Sidebar Navigation -->
    <ul class="navigation">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Package</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
    <script type="text/javascript" src="./index.js"></script>
</body>
</html>

css：

@import url("https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap");
* {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
}

:root {
  --black: #333;
  --white: #fff;
  height: 100vh;
}
.dark {
  --black: #fff;
  --white: #333;
}
.dark .mask {
  filter: invert(1);
  mix-blend-mode: multiply;
}
header {
  position: absolute;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90vw;
  padding: 5vh 5vw;
  z-index: 10000;
}
header .logo {
  position: relative;
  display: inline-block;
  color: var(--black);
  text-decoration: none;
  font-size: 2em;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

header .rightSide {
  display: flex;
}
.btns {
  position: relative;
  width: 40px;
  height: 40px;
  /* background: #ccc; */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin-left: 10px;
}
.btns ion-icon {
  font-size: 1.5em;
  color: var(--black);
}
.btns.menuToggle ion-icon {
  font-size: 3em;
}
.btns ion-icon:nth-child(2) {
  display: none;
}

.btns.active ion-icon:nth-child(2) {
  display: block;
}

.btns.active ion-icon:nth-child(1) {
  display: none;
}

.main {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  user-select: none;
  mix-blend-mode: screen;
}
.main h2 {
  position: relative;
  z-index: 3;
  font-size: 14vw;
  color: #fff;
  text-shadow: 0 20px 30px rgba(0, 0, 0, 0.2);
}
.navigation {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: var(--white);
  z-index: 4;
  transition: 0.5s;
}
.navigation.active {
  left: 0;
}
.navigation li {
  list-style: none;
}
.navigation li a {
  display: inline-flex;
  margin: 5px 0;
  font-size: 1.35em;
  text-decoration: none;
  color: var(--black);
  padding: 5px 20px;
  border-radius: 40px;
}
.navigation li a:hover {
  background-color: var(--black);
  color: var(--white);
}

js

let dayNight = document.querySelector('.dayNight')
let menuToggle = document.querySelector('.menuToggle')
let body = document.querySelector('body');
let navigation = document.querySelector(".navigation")
console.log('===========')
dayNight.onclick = function () {
    body.classList.toggle('dark')
    dayNight.classList.toggle('active')
    console.log(body.classList)
    console.log(dayNight.classList)

}

menuToggle.onclick = function () {
    menuToggle.classList.toggle('active');
    navigation.classList.toggle('active');
}

一点收获

1、css定义变量
首先：CSS 变量可以有全局或局部作用域。

全局变量可以在整个文档中进行访问/使用，而局部变量只能在声明它的选择器内部使用。

如需创建具有全局作用域的变量，请在 :root 选择器中声明它。 :root 选择器匹配文档的根元素。

如需创建具有局部作用域的变量，请在将要使用它的选择器中声明它。

下面的例子与上面的例子相同，但是在这里我们使用 var() 函数。

首先，我们声明两个全局变量（–blue 和 --white）。然后，我们使用 var() 函数稍后在样式表中插入变量的值：

:root {
  --black: #333;
  --white: #fff;
  height: 100vh;
}
header .logo {
  color: var(--black);
}

2、在css中引入谷歌在线字体库
参考官方文档（http://www.googlefonts.net/english），国内的话记得用国内站。

3、图片样式的filter属性
参考菜鸟教程
这个小案例，用这一属性反转图片,

在这里插入图片描述

.dark .mask {
  filter: invert(1);//1是100%的意思
}

反转后的效果如下：
在这里插入图片描述
4.图片的mix-blend-mode属性
详细介绍参考这篇文章（https://www.zhangxinxu.com/wordpress/2015/05/css3-mix-blend-mode-background-blend-mode/）。

这个案例中用了这两个值：

  • multiply混合后通常颜色会加深，多用在白色背景图片和其他元素的混合，以及彩色纹理的合并上。
  • screen混合后颜色会减淡，非常适合实现霓虹灯光效果，适合黑色背景素材和其他元素混合，非常实用。

1、

.mask {
  mix-blend-mode: screen;
}

在这里插入图片描述
在这里插入图片描述

效果如下：

在这里插入图片描述

2、

.dark .mask {
  mix-blend-mode: multiply;
}

在这里插入图片描述
在这里插入图片描述
效果如下：
在这里插入图片描述

blackcatkiller
关注
专栏目录
11.简单的CSS按钮悬停特效
粉丝们务必加入微信粉丝群
12-30 567
【代码】11.简单的CSS按钮悬停特效。
实现全屏的WebHTML5视频背景
08-10
全屏的Web HTML5视频背景，HTML5 Background Video
给视频添加背景图片，让它们更具魅力！
hlyling的博客
09-03 345
第六步，全部都确认无误之后我们就可以点击“开始合成”，下方会出现一个进度条正在滚动，滚动好了，说明视频剪辑好了。第三步，设置好底画之后，我们就可以开始设置中画了，点击“添加视频或图片”在弹出来的文件框里，将视频都一一导入。第二步，进入板块之后，我们要在添加底画中，点击“添加视频或图片”在弹出来的文件框里，将背景图片都一一导入。第五步，然后，我们就可以开始设置新视频的保存位置，点击“浏览”，在文件框里选择好保存位置。第四步，我们都设置好了之后，就要在设置画中画选项中，设置好中画在底画的位置和尺寸。
web前端入门到实战：HTML5实现首页动态视频背景
软件开发-前端开发-IT
10-08 1891
你想实现动态视频作为背景的首页吗？来，一起来学习，本文将带你一起实现H5动态视频背景； 首先网上找一段清晰的视频下载下来，最好是MP4格式的；下载好了之后我们新建一个html文件来写代码： html代码： <video id="v1" autoplay loop muted> <source src="./video2.mp4" type="video/mp4" /&g...
web页面实现全背景视频功能方案：使用bideo.js来处理object-fit在ie浏览器下不兼容问题
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
02-07 2334
在 ie 模式下不兼容的问题，这里我们使用。原因是我们在 css 代码里面使用了。，它能实现全屏HTML5网页背景视频。在 ie 模式下是不兼容的。
动感丝滑ppt背景图片
10-19
总的来说，"动感丝滑ppt背景图片"是一个关于提升PPT设计质量的话题，涉及到了如何通过选择恰当的背景模板来增强演示文稿的视觉效果和专业性。在实际应用中，我们需要结合内容、风格以及技术手段来实现最佳的展示效果...
Android实现一个丝滑的自动轮播控件实例代码
08-27
在本篇文章中，我们将探讨如何实现一个丝滑流畅且具备自动轮播功能的控件。我们将基于Android官方提供的ViewPager控件进行改造，因为它已经包含了大部分我们需要的功能。 首先，ViewPager是一个适合用来展示多个...
行业分类-设备装置-一种金蚕丝滑洗发露及其制备工艺.zip
09-04
这个标题暗示了我们正在讨论的是一种特殊洗发露的配方和生产过程，而这些信息可能被数字化并存储在一个压缩文件中。以下是围绕这个主题展开的相关知识点： 1. **数字化技术**：在现代工业中，产品的配方和制造工艺...
Win实现Mac一样的流畅丝滑
最新发布
09-27
ψx60wyycaqwin25rψ Win实现Mac一样的流畅丝滑
将视频作为网站背景html,将视频作为网页背景
weixin_32562455的博客
06-25 3814
一些门户网站采用视频作为网页背景，具有很好的展示效果，而随着HTML5技术的发展和浏览器支持程序的提升，采用视频作为网页背景也变得越来越容易。技术分析CSS里的background-image属性只能使用图片、SVG、颜色或渐变色。但从技术讲，我们是可以伪造出一种效果，让视频以背景的角色出现在其它HTML元素后面。这其中的难点是视频要填充整个浏览器页面，而且要响应浏览器窗口大小的变化。视频作为网页...
让你的网页更丝滑（全）
weixin_34290631的博客
06-01 305
这篇文章是2019年5月11号，我在上海FDConf2019上的分享整理。 演讲主题：【让你的网页更丝滑】 时间：2019年5月11日（下午） 地点：上海 - FDCon2019 - B会场（全栈&全端专场） 演讲嘉宾：刘博文 PPT地址：ppt.baomitu.com/d/b267a4a3 原文地址：github.com/berwin/Blog… 简介 大家好，我叫刘博文，今天...
让你的网页更丝滑（一）
程序员成长指北
10-14 248
编者按：本文作者Berwin，W3C性能工作组成员，360导航资深前端工程师。《深入浅出Vue.js》（正在出版）作者。前段时间，我将精力专注在Web性能领域；在这个领域...
大学生通过学习HTML+CSS设置一个比较丝滑的网页
m0_49845326的博客
11-07 227
login.html源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &lt
用视频做网页背景
jason-star博客
11-30 7214
1.首先你需要准备一个视频吧，然后下载Vidage的相关插件，下载地址，这里是此demo用到的，可以自行去官网下载，并引入 &amp;lt;script src=&quot;assets/Vidage.min.js&quot;&amp;gt;&amp;lt;/script&amp;gt; &amp;lt;script&amp;gt; new Vidage('#VidageVideo'); &amp;lt;/script&
h5视频做背景的样式
weixin_30819163的博客
07-30 1080
video{ position: fixed; display: block; width: 100%; object-fit:fill; height:100%; right: 0px; bottom: 0px; top: 0px; left: 0px; z-index: -11; ...
Web前端前沿技术 1 ____视频背景
daozhongyang的专栏
04-23 1600
先看效果图主要代码如下:&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; *{ padding: 0; margin: 0; } .bann
css使用视频作为背景（可更改视频颜色）
weixin_44318855的博客
11-07 9771
下面是css代码 <style> *{margin:0 auto;padding:0 auto;} .f{ position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; ...
vscode 前端开发launch.json常用配置
qq_45797026的博客
05-07 3833
"version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Chrome against localhost", "url": "${file}", "sourceMaps": true, "webR...
使用JavaScript写一个可以左右丝滑拖动的表格带上样式
05-24
以下是一个使用JavaScript和CSS实现左右滑动的表格示例： ```html <!DOCTYPE html> <html> <head> <title>可左右拖动的表格</title> <style> .table-wrapper { overflow-x: auto; white-space: nowrap; } table { border-collapse: collapse; width: 100%; } th, td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; } th { background-color: #f2f2f2; } </style> </head> <body> <div class="table-wrapper"> <table> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>城市</th> <th>学历</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>25</td> <td>男</td> <td>北京</td> <td>本科</td> </tr> <tr> <td>李四</td> <td>30</td> <td>女</td> <td>上海</td> <td>硕士</td> </tr> <tr> <td>王五</td> <td>28</td> <td>男</td> <td>广州</td> <td>本科</td> </tr> <tr> <td>赵六</td> <td>35</td> <td>女</td> <td>深圳</td> <td>博士</td> </tr> </tbody> </table> </div> <script> // 获取表格包裹器和表格 var tableWrapper = document.querySelector('.table-wrapper'); var table = document.querySelector('table'); // 当鼠标在表格上按下时记录位置 var isDown = false; var startX; var scrollLeft; tableWrapper.addEventListener('mousedown', function(e) { isDown = true; startX = e.pageX - tableWrapper.offsetLeft; scrollLeft = tableWrapper.scrollLeft; }); // 当鼠标移动时拖动表格 tableWrapper.addEventListener('mousemove', function(e) { if (!isDown) return; e.preventDefault(); var x = e.pageX - tableWrapper.offsetLeft; var walk = (x - startX) * 3; tableWrapper.scrollLeft = scrollLeft - walk; }); // 当鼠标松开时停止拖动 tableWrapper.addEventListener('mouseup', function() { isDown = false; }); // 当鼠标离开表格时停止拖动 tableWrapper.addEventListener('mouseleave', function() { isDown = false; }); </script> </body> </html> ``` 在这个示例中，我们首先创建了一个table-wrapper类的div元素，用于包裹表格。然后在CSS中设置了表格和单元格的样式，并将table-wrapper元素的overflow-x属性设置为auto，以便在表格宽度超出容器宽度时显示水平滚动条。 接下来，我们使用JavaScript监听table-wrapper元素上的mousedown、mousemove和mouseup事件。当按下鼠标时，我们记录当前鼠标位置和表格包裹器的scrollLeft值。然后在鼠标移动时，我们计算出鼠标相对于起始位置的偏移量，将其乘以一个常数（3）并将结果减去初始的scrollLeft值，以获得新的scrollLeft值。最后，在鼠标松开或离开表格时，我们停止拖动。 这样就可以实现一个可以左右丝滑拖动的表格。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值