正在努力加载中~请稍等~

当前位置:首页>源码分享>WordPress源码> WordPress博客b2主题美化首页区块

WordPress博客b2主题美化首页区块

修改文件:找到你的主题文件根目录的index.php

查找:do_action(‘b2_index_before’); ?>在下面添加下列代码

<!--美化模块开始-->
<div class="index-header">
<div class="ind_content-wrapper">
<div class="ind_content">
<h1 class="ind_title siuniu">精彩的人生就是不断的折腾</h1>
<div class="ind_subtitle jxda">#好在精选,乐于分享#</div><a class="common-button button" href="/" target="_blank">设计趁年华</a>
</div>
<div class="ind_quan0 ind_quan"></div>
<div class="ind_quan1 ind_quan"></div>
<div class="ind_quan2 ind_quan"></div>
<div class="ind_quan3 ind_quan"></div>
<div class="ind_quan4 ind_quan"></div>
<div class="ind_quan5 ind_quan"></div>
<div class="ind_quan6 ind_quan"></div>
<div class="ind_quan7 ind_quan"></div>
<div class="ind_quan8 ind_quan"></div>
<div class="ind_quan9 ind_quan"></div>
</div>
</div> 

然后添加样式代码

/*首页模块美化*/.index-header {
width: 100%;
height: 624px;
margin-top: -75px;
background-image: url(/vip/svg/header-bg.svg);
background-size: auto 622px;
background-position: 50% 0;
position: relative;
background-repeat: no-repeat;
overflow: hidden;
}
.ind_content-wrapper {
position: relative;
width: 1200px;
margin: auto;
}
.ind_content {
display: -ms-flexbox;
display: flex;
padding-top: 200px;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: center;
align-items: center;
width: 1200px;
height: 409px;
margin: 0 auto;
position: relative;
z-index: 1;
background-image: url(/vip/svg/06.png);
background-size: cover;
}
.ind_title {
font-size: 40px;
color: #404040;
}
.ind_subtitle {
width: 727px;
text-align: center;
margin: 43px;
font-size: 22px;
color: #111f33;
}
.common-button {
box-shadow: 0 4px 8px 0 rgba(110, 192, 245, .5);
border-radius: 25px;
background: #6ec0f5;
border: 1px solid #67baf0;
font-size: 16px;
padding: 8px 22px;
transition: all .2s;
color: #fff;
}
.ind_quan {
position: absolute;
background-size: cover;
z-index: 0;
}
.ind_quan0 {
left: 113px;
top: 125px;
width: 60px;
height: 60px;
background-image: url(/vip/svg/toy5.svg);
-webkit-animation: toy 3s infinite;
animation: toy 3s infinite;
}
.ind_quan1 {
left: -158px;
top: 415px;
width: 32px;
height: 32px;
background-image: url(/vip/svg/toy1.svg);
-webkit-animation: toy 3s infinite;
animation: toy 3s infinite;
}
.ind_quan2 {
left: -55px;
top: 296px;
width: 29px;
height: 29px;
-webkit-animation: upAnimation 3s infinite;
animation: upAnimation 3s infinite;
background-image: url(/vip/svg/toy2.svg);
}
.ind_quan3 {
left: 465px;
top: 129px;
width: 49px;
width: 49px;
height: 49px;
-webkit-animation: zhuan 3s .2s infinite;
animation: zhuan 3s .2s infinite;
background-image: url(/vip/svg/toy3.svg);
}
.ind_quan4 {
right: 400px;
top: 330px;
width: 24px;
height: 24px;
-webkit-animation: toy 3s 1s infinite;
animation: toy 3s 1s infinite;
background-image: url(/vip/svg/toy4.svg);
}
.ind_quan5 {
left: 830px;
top: 74px;
width: 54px;
height: 54px;
-webkit-animation: toy 3s .8s infinite;
animation: toy 3s .8s infinite;
background-image: url(/vip/svg/xin.svg);
}
.ind_quan6 {
left: 961px;
top: 261px;
width: 27px;
-webkit-animation: zhuan .5s .2s infinite;
animation: zhuan .5s .2s infinite;
height: 23px;
background-image: url(/vip/svg/toy6.svg);
}
.ind_quan7 {
left: 1271px;
top: 373px;
width: 40px;
height: 40px;
-webkit-animation: zhuan 2s 1.5s infinite;
animation: zhuan 2s 1.5s infinite;
background-image: url(/vip/svg/toy7.svg);
}
.ind_quan8 {
width: 83px;
height: 84px;
left: 228px;
top: 623px;
-webkit-animation: toy2 3s .1s infinite;
animation: toy2 3s .1s infinite;
background-image: url(/vip/svg/toy2.svg);
}
.ind_quan9 {
width: 30px;
height: 30px;
right: -30px;
top: 122px;
-webkit-animation: aroundAnimation 3s .1s infinite;
animation: aroundAnimation 3s .1s infinite;
background-image: url(/vip/svg/toy2.svg);
}
/*美化选择器*/@-webkit-keyframes toy {
0% {
-webkit-transform: scale(1);
transform: scale(1)
}
50% {
-webkit-transform: scale(.7);
transform: scale(.7)
}
to {
-webkit-transform: scale(1);
transform: scale(1)
}
}
@keyframes toy {
0% {
-webkit-transform: scale(1);
transform: scale(1)
}
50% {
-webkit-transform: scale(.7);
transform: scale(.7)
}
to {
-webkit-transform: scale(1);
transform: scale(1)
}
}
@-webkit-keyframes toy2 {
0% {
-webkit-transform: scale(.7);
transform: scale(.7)
}
50% {
-webkit-transform: scale(1);
transform: scale(1)
}
to {
-webkit-transform: scale(.7);
transform: scale(.7)
}
}
@keyframes toy2 {
0% {
-webkit-transform: scale(.7);
transform: scale(.7)
}
50% {
-webkit-transform: scale(1);
transform: scale(1)
}
to {
-webkit-transform: scale(.7);
transform: scale(.7)
}
}
@keyframes zhuan {
0% {
-webkit-transform: rotate(0deg);
}
25% {
-webkit-transform: rotate(90deg);
}
50% {
-webkit-transform: rotate(180deg);
}
75% {
-webkit-transform: rotate(270deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes upAnimation {
0%,
100%,
20%,
50%,
80% {
transition-timing-function: cubic-bezier(0.215,.61,.355,1);
transform: translate3d(0,0,0);
}
40%,
43% {
transition-timing-function: cubic-bezier(0.755,0.50,0.855,0.060);
transform: translate3d(0,-30px,0);
}
70% {
transition-timing-function: cubic-bezier(0.755,0.050,0.855,0.060);
transform: translate3d(0,-15px,0);
}
90% {
transform: translate3d(0,-4px,0);
}
}
@keyframes aroundAnimation {
0%,
100%,
20%,
50%,
80% {
transition-timing-function: cubic-bezier(0.215,.61,.355,1);
transform: translate3d(0,0,0);
}
40%,
43% {
transition-timing-function: cubic-bezier(0.755,0.50,0.855,0.060);
transform: translate3d(-20px,0,0);
}
70% {
transition-timing-function: cubic-bezier(0.755,0.050,0.855,0.060);
transform: translate3d(-10px,0px,0);
}
90% {
transform: translate3d(20px,0,0);
}
}
文章链接:https://sjcnh.cn/723.html
文章标题:WordPress博客b2主题美化首页区块
文章版权:@花醉 所发布的内容,部分为原创文章,转载请注明来源,网络转载文章如有侵权请联系我们!我们将在24小时内极速处理!
本文最后更新发布于2023年06月09日 14时04分34秒,某些文章具有时效性,若有错误或已失效,请在下方留言或联系:841134898@qq.com
本文声明 本站上的部份代码,教程,软件,插件来自会员发布以及互联网收集,不代表本站立场,仅供网友个人学习交流或测试研究使用,未经原版权作者许可,禁止用于任何商业途径!请用户仔细辨认内容的真实性,避免上当受骗!本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。请在下载24小时内删除!若您喜欢本文可附上原文链接随意转载。如无意侵害了您的权益,请发送邮件841134898@qq.com 或点击右侧 私信:花醉 反馈,我们将尽快处理。如果遇到付费才可观看的文章,建议升级终身VIP。全站所有资源“任意下免费看”。本站资源少部分采用7z压缩,为防止有人压缩软件不支持7z格式,建议下载7-zip。zip、rar解压,建议下载WinRAR。

给TA赞助
共{{data.count}}人
人已赞助
!
您也想出现在这里吗?点击联系我们吧!
点击投个广告吧
共有 0 条评论
    暂无讨论,说说你的看法吧
个人中心

有新商品 购物车

有可用券 优惠劵
今日签到

有新私信 私信列表

有新消息 消息中心
快速搜索
在线客服
关注我们
  • 手机扫码打开网页

  • 微信公众号

语言切换
返回顶部