7B2美化(任何主题都可以用)请自行做适配
首页大屏视频展示
代码
html
<div class="video-home">
<div class="video-page " id="video--header">
<div class="video-container">
<!-- 视频链接 -->
<video class="video-home2"
src="你的视频.mp4"
loop="" muted="" playsinline="" webkit-playsinline="" style="">
</video>
</div>
</div>
</div>
css
.video-container {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
will-change: transform;
animation: blur-to-clear 2s cubic-bezier(.62, .21, .25, 1) 0s 1 normal backwards running, scale 1.5s cubic-bezier(.62, .21, .25, 1) 0s 1 both;
}
.video-home {
position: relative;
min-height: 100%;
font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei";
line-height: 2;
-webkit-tap-highlight-color: transparent;
margin: 0px;
}
#page-header.video-page {
height: 100vh;
background-attachment: fixed;
border-radius: 0;
}
#video--header {
background-image: none !important;
display: flex;
justify-content: center;
}
#page-header {
position: relative;
width: 100%;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
transition: all 0.5s ease 0s;
}
.video-home2 {
display: block;
object-fit: cover;
width: 100%;
height: 100%;
pointer-events: none;
}
安装过于简单 就不演示了)))
极(鸡)子主题
另外有购买极(鸡)子主题 可以在 极子主题-首页设置-搜索模块 打开视频区块 但大屏只有四分之一的效果
需要实现这种效果 需要在子主题的
/b2Jitheme/Render/Css/jitheme.css 搜索 .home-banner .section改成
.home-banner .section {
position:relative;
width:100%;
overflow:hidden;
max-height: 100vh;
height: 100vh;
}
/b2Jitheme/style.css 随便找一个地方加上
/*这个可要可不要*/
.big_title {
font-size: 60px!important;
}
/*这个必须要*/
.section{
margin-top: -16px;
}
/*不懂全部加上就完事了*/
ojbk
有问题评论区dd 之后更新一个dlc😅😅