WordPress 主题 B2 幻灯片美化滑动视差模块

构成主要由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样式代码)

 

下载权限

查看
  • 免费下载
    评论后下载
    登录后下载

  • {{attr.name}}:
您当前的等级为
您有每天免费下载所有资源次的特权,今日剩余 已取得下载权限

人已赞赏
网站建设

仿致美化长图+宽图排版 – B2美化

2020-11-26 21:54:03

网站建设

仿优设 WordPress 主题 B2 美化添加引导卡片

2020-11-26 22:10:15

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索