b2主题美化仿致美化首页大图

【注意】本站修改大部分是基于子主题,请放心使用,想装就装,想卸就卸。

效果

首页模块自定义代码

<div class="index-header mobile-hidden">
    <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="/xmszzq" 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>

子主题style.css

/*致美化开始*/
 .index-header {
    width: 100%;
    height: 624px;
    margin-top: -75px;
    background-image: url(/pic/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: 500px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    background-image: url(/pic/06.jpg);
    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 {
       border-radius: 25px;
    background: #1e73be!important;
    border: 1px solid #1e73be!important;
    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(/pic/toy5.svg);
    -webkit-animation: toy 3s infinite;
    animation: toy 3s infinite;
}
.ind_quan1 {
    left: -158px;
    top: 415px;
    width: 32px;
    height: 32px;
    background-image: url(/pic/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(/pic/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(/pic/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(/pic/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(/pic/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(/pic/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(/pic/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(/pic/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(/pic/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);
    }
}
/*致美化结束*/

【注意】附件里的文件上传至网站根目录。

下载权限

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

查看演示

  • {{attr.name}}:
您当前的等级为
登录后免费下载登录 小黑屋反思中,不准下载! 评论后刷新页面下载评论 支付以后下载 请先登录 您今天的下载次数(次)用完了,请明天再来 支付积分以后下载立即支付 支付以后下载立即支付 您当前的用户组不允许下载升级会员
您已获得下载权限 您可以每天下载资源次,今日剩余

给TA打赏
共{{data.count}}人
人已打赏
b2美化

文章版权和下载声明

2022-1-9 22:29:12

b2美化

b2美化之首页四格

2021-12-12 1:05:03

重要声明

本站资源大多来自网络,如有侵犯你的权益请联系管理员,QQ1811170520 我们会第一时间进行审核删除。站内资源为网友个人学习或测试研究使用,未经原版权作者许可,禁止用于任何商业途径!请在下载24小时内删除!


如果遇到付费才可观看的文章,建议升级终身VIP。全站所有资源任意下免费看”。本站资源少部分采用7z压缩,为防止有人压缩软件不支持7z格式,7z解压,建议下载7-zip,zip、rar解压,建议下载WinRAR

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧