构成主要由HTML和CSS组成，在桌面端显示友好，但在移动端适配不是很友好。
效果图
注意：B2主题可用，其他主题自行调试适配。
实现代码
<!--复制开始-->
<!--
版本：1.0
-->
<div class="toptu">
<div class="item scroll">
<img class="scroll-image" src="./img/1.jpg">
<img class="scroll-image" src="./img/1.jpg">
<div class="sc-1wssj0-17 hVBrzU">
<img src="./img/2.png">
</div>
</div>
<div class="cl static htkYRs">
<ul class="flex"><li class="st_one">
<a href="https://www.lurending.com/" target="_blank">
<img data-original="./img/1-1.jpg" class="lazy card-main loading" alt="日常干货" src="./img/1-1.jpg" style="display: inline;" data-was-processed="true">
<h5 class="active-card-title">日常干货</h5>
</a>
</li>
<li class="st_one">
<a href="https://www.lurending.com/" target="_blank">
<img data-original="./img/1-2.jpg" class="lazy card-main loading" alt="在线工具" src="./img/1-2.jpg" style="display: inline;" data-was-processed="true">
<h5 class="active-card-title">在线工具</h5>
</a>
</li>
<li class="st_one">
<a href="https://www.lurending.com/" target="_blank">
<img data-original="./img/1-3.jpg" class="lazy card-main loading" alt="源码下载" src="./img/1-3.jpg" style="display: inline;" data-was-processed="true">
<h5 class="active-card-title">源码下载</h5>
</a>
</li>
<li class="st_one">
<a href="https://www.lurending.com/" target="_blank">
<img data-original="./img/1-4.jpg" class="lazy card-main loading" alt="wordpress" src="./img/1-4.jpg" style="display: inline;" data-was-processed="true">
<h5 class="active-card-title">WP相关</h5>
</a>
</li>
</ul>
</div>
</div>
<style type="text/css">
.ads-box img {
/*广告模块优化*/
display: inline;
}
/*首页海报*/
/*TOP*/
.item.scroll {
left: 0px;
width: 100%;
height: 420px;
background-size: auto 100%;
pointer-events: none;
background-position: center center;
background-repeat: no-repeat;
transition: opacity 0.3s ease 0s;
white-space: nowrap;
overflow: hidden;
position: relative;
font-size: 0;
margin-top: -20px;
background: #000;
word-wrap: break-word;
box-sizing: border-box;
outline: none;
}
.item.scroll .scroll-image {
position: relative;
height: 100%;
transform: translateX(0px);
animation: banner 40s linear infinite;
opacity: 0.5;
border: 0;
-ms-interpolation-mode: bicubic;
vertical-align: middle;
}
.hVBrzU {
position: absolute;
top: 70px;
left: 0px;
right: 0px;
text-align: center;
font-size: 16px;
white-space: normal;
width: 100%;
margin: auto;
}
.static {
position: static;
margin-top: -76px;
margin-bottom: 34px;
padding-left: 16px;
padding-right: 16px;
margin-left: auto;
margin-right: auto;
max-width: 1382px;
}
.static .flex {
padding: 0 160px;
display: flex;
}
.static li.st_one {
flex: 1;
margin-right: 10px;
border-radius: 6px;
overflow: hidden;
position: relative;
box-shadow: 0 2px 5px rgba(0,0,0,.2);
list-style: none;
transition: all .3s ease-out;
}
.static li.st_one:hover {
transform: translateY(5px);
}
.static .st_one .card-main {
width: 100%;
}
.static .active-card-title {
position: absolute;
bottom: 0;
color: #fff;
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(0, 0, 0, .7)), to(transparent));
width: 100%;
padding: 12px 20px;
font-size: 16px;
}
@media screen and (max-width: 900px) {
.item.scroll {
height: 200px;
margin-top: -54px;
}
}
@-webkit-keyframes banner {
from {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
to {
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
}
@keyframes banner {
from {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
to {
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
}
/*网页背景*/
.site {
background-image: url(./img/back-img.svg);
}
</style>
图片自行更换，文末打包下载包（文件自行去掉头尾，自行提取CSS样式代码）