首页 学习中心 其他教程 正文
我要投稿

#热门
子比主题美化 仿哔哩哔哩客服中心头部banner

其他教程
2023-11-07 0 229
也想出现在这里？点击联系我~
请勿商业运营，违法使用和传播！资源仅供研究学习使用！解压密码为：www.52jyu.cn

子比主题美化 仿哔哩哔哩客服中心头部banner

教程：
复制下方代码放后台自定义CSS（哔哩哔哩有防盗链，自行本地化图片修改css内链接）

.banner {
    position: relative;
    overflow: hidden;
    height: 183px;
    background: url(//i0.hdslb.com/bfs/activity-plat/cover/20170614/59nm7456wp.jpg@70p) repeat;
    background-size: 1200px 700px
}

.banner .banner-content {
    position: relative;
    margin: 0 auto;
    width: 970px
}

.banner .banner-content .logo {
    position: absolute;
    top: 35px;
    left: 0;
    width: 190px;
    height: 100px;
    background: url(//i0.hdslb.com/bfs/activity-plat/cover/20170614/x65z8xpm2z.png) no-repeat;
    background-size: 100% auto
}

.anim-item-fade-in-floating {
    -webkit-animation-name: itemFadeInSp,floating;
    animation-name: itemFadeInSp,floating;
    -webkit-animation-duration: 2s,8s;
    animation-duration: 2s,8s;
    -webkit-animation-timing-function: ease,ease;
    animation-timing-function: ease,ease;
    -webkit-animation-delay: .1s,2s;
    animation-delay: .1s,2s;
    -webkit-animation-iteration-count: 1,infinite;
    animation-iteration-count: 1,infinite;
    transform-style: "preserve-3d"
}

.anim-item-fade-in {
    transform: translateZ(0);
    -webkit-animation-name: itemFadeIn;
    animation-name: itemFadeIn;
    -webkit-animation-duration: .25s;
    animation-duration: .25s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    transform-style: preserve-3d;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.anim-role-fade-in-c {
    -webkit-animation-name: roleFadeIn-c;
    animation-name: roleFadeIn-c;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-delay: 1.1s;
    animation-delay: 1.1s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.anim-role-fade-in-c,.anim-role-fade-in-r {
    transform: translateZ(0);
    -webkit-animation-duration: .7s;
    animation-duration: .7s;
    transform-style: preserve-3d;
    -webkit-backface-visibility: visible;
    backface-visibility: visible
}

.anim-role-fade-in-r {
    -webkit-animation-name: roleFadeIn-r;
    animation-name: roleFadeIn-r;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-delay: 1.1s;
    animation-delay: 1.1s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.anim-role-fade-in-l {
    transform: translateZ(0);
    -webkit-animation-name: roleFadeIn-l;
    animation-name: roleFadeIn-l;
    -webkit-animation-duration: .7s;
    animation-duration: .7s;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-delay: 1.1s;
    animation-delay: 1.1s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    transform-style: preserve-3d;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

@keyframes floating {
    0% {
        transform: translate(0) scale(1)
    }

    25% {
        transform: translateY(20px) scale(1)
    }

    50% {
        transform: translate(0) scale(1)
    }

    75% {
        transform: translateY(20px) scale(1)
    }

    to {
        transform: translate(0) scale(1)
    }
}

@keyframes itemFadeInSp {
    0% {
        opacity: 0;
        transform: translate(0) scale(.1)
    }

    70% {
        opacity: 0;
        transform: translate(0) scale(.1)
    }

    to {
        opacity: 1;
        transform: translate(0) scale(1)
    }
}

@keyframes itemFadeIn {
    0% {
        opacity: 0;
        transform: scale(.5)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes roleFadeIn-c {
    0% {
        opacity: 0;
        transform: translate3d(0,120px,0)
    }

    75% {
        opacity: 1;
        transform: translateZ(0)
    }

    to {
        transform: translate3d(0,2px,0)
    }
}

@keyframes roleFadeIn-l {
    0% {
        opacity: 0;
        transform: translate3d(-20px,120px,0)
    }

    75% {
        opacity: 1;
        transform: translateZ(0)
    }

    to {
        transform: translate3d(-2px,3px,0)
    }
}

@keyframes roleFadeIn-r {
    0% {
        opacity: 0;
        transform: translate3d(20px,120px,0)
    }

    75% {
        opacity: 1;
        transform: translateZ(0)
    }

    to {
        transform: translate3d(2px,3px,0)
    }
}

@-webkit-keyframes floating {
    0% {
        transform: translate(0) scale(1)
    }

    25% {
        transform: translateY(20px) scale(1)
    }

    50% {
        transform: translate(0) scale(1)
    }

    75% {
        transform: translateY(20px) scale(1)
    }

    to {
        transform: translate(0) scale(1)
    }
}

@-webkit-keyframes itemFadeInSp {
    0% {
        opacity: 0;
        transform: translate(0) scale(.1)
    }

    70% {
        opacity: 0;
        transform: translate(0) scale(.1)
    }

    to {
        opacity: 1;
        transform: translate(0) scale(1)
    }
}

@-webkit-keyframes itemFadeIn {
    0% {
        opacity: 0;
        transform: scale(.5)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@-webkit-keyframes roleFadeIn-c {
    0% {
        opacity: 0;
        transform: translate3d(0,120px,0)
    }

    75% {
        opacity: 1;
        transform: translateZ(0)
    }

    to {
        transform: translate3d(0,2px,0)
    }
}

@-webkit-keyframes roleFadeIn-l {
    0% {
        opacity: 0;
        transform: translate3d(-20px,120px,0)
    }

    75% {
        opacity: 1;
        transform: translateZ(0)
    }

    to {
        transform: translate3d(-2px,3px,0)
    }
}

@-webkit-keyframes roleFadeIn-r {
    0% {
        opacity: 0;
        transform: translate3d(20px,120px,0)
    }

    75% {
        opacity: 1;
        transform: translateZ(0)
    }

    to {
        transform: translate3d(2px,3px,0)
    }
}

.banner .banner-content .banner-item1 {
    position: absolute;
    top: -13px;
    right: 0;
    left: 488px;
    z-index: 2;
    margin: auto;
    width: 210px;
    height: 220px;
    background: url(//i0.hdslb.com/bfs/activity-plat/cover/20170614/39lk7z5rj5.png@70p) no-repeat;
    background-size: 100% auto
}

.banner .banner-content .banner-item2 {
    position: absolute;
    top: 5px;
    right: 0;
    left: 130px;
    z-index: 1;
    margin: auto;
    width: 185px;
    height: 216px;
    background: url(//i0.hdslb.com/bfs/activity-plat/cover/20170614/59nm7o2v4n.png@70p) no-repeat;
    background-size: 100% auto
}

.banner .banner-content .banner-item3 {
    position: absolute;
    top: 58px;
    right: 0;
    left: 269px;
    z-index: 0;
    margin: auto;
    width: 112px;
    height: 170px;
    background: url(//i0.hdslb.com/bfs/activity-plat/cover/20170614/w45zmx1x8w.png@70p) no-repeat;
    background-size: 100% auto
}

.banner .banner-content .banner-item4 {
    position: absolute;
    top: -11px;
    right: 0;
    left: 250px;
    margin: auto;
    width: 800px;
    height: 270px;
    background: url(//i0.hdslb.com/bfs/activity-plat/cover/20170614/y467ozjz0z.png@70p) no-repeat;
    background-size: 100% auto
}

.banner .banner-content .banner-item5 {
    position: absolute;
    top: 16px;
    left: 144px;
    margin: auto;
    width: 800px;
    height: 270px;
    background: url(//i0.hdslb.com/bfs/activity-plat/cover/20170614/q0r41o3106.png@70p) no-repeat;
    background-size: 100% auto
}

.banner .banner-content .banner-item6 {
    position: absolute;
    top: -34px;
    left: 195px;
    margin: auto;
    width: 800px;
    height: 300px;
    background: url(//i0.hdslb.com/bfs/activity-plat/cover/20170614/q0r41o7ylj.png@70p) no-repeat;
    background-size: 100% auto
}

.banner .banner-content .banner-item7 {
    position: absolute;
    top: 24px;
    right: 0;
    left: 342px;
    z-index: 4;
    margin: auto;
    width: 54px;
    height: 100px;
    background: url(//i0.hdslb.com/bfs/activity-plat/cover/20170614/39lk7m9on5.png@70p) no-repeat;
    background-size: 100% auto
}

.banner .banner-content .banner-item8 {
    position: absolute;
    top: 27px;
    right: 0;
    left: 246px;
    z-index: 4;
    margin: auto;
    width: 32px;
    height: 100px;
    background: url(//i0.hdslb.com/bfs/activity-plat/cover/20170614/r9v12pklr4.png@70p) no-repeat;
    background-size: 100% auto
}

小工具选择自定义html或者子比超级嵌入

<div id="banner" class="banner"><div class="banner-content"><div class="banner-item1 anim-role-fade-in-r"></div> <div class="banner-item2 anim-role-fade-in-l"></div> <div class="banner-item3 anim-role-fade-in-c"></div> <div class="banner-item4 anim-item-fade-in-floating"></div> <div class="banner-item5 anim-item-fade-in-floating"></div> <div class="banner-item6 anim-item-fade-in-floating"></div> <div class="banner-item7 anim-item-fade-in quick"></div> <div class="banner-item8 anim-item-fade-in quick"></div> <a href="/" rel="external nofollow"  class="logo" style="top: 48px;"></a></div></div>

 

收藏 (0) 打赏

感谢您的支持，我会继续努力的!

打开微信/支付宝/QQ扫一扫，即可进行扫码打赏哦，分享从这里开始，精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络，因此不包含技术服务请大家谅解！如有侵权请邮件联系客服！305582964@qq.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性，资源仅供下载学习之用！如有链接无法下载、失效或广告，请联系客服处理，有奖励！
3. 您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容资源！如用于商业或者非法用途，与本站无关，一切后果请用户自负！
4. 如果您也有好的资源或教程，您可以投稿发布，成功分享后有U点奖励和额外收入！

静鱼客栈 其他教程 子比主题美化 仿哔哩哔哩客服中心头部banner https://www.52jyu.cn/25329.html

静鱼客栈的帅逼站长~

子比主题美化 仿哔哩哔哩客服中心头部banner
上一篇： WordPress B2 PRO主题美化 VIP会员介绍页面美化教程
子比主题美化 给子比文章缩略图添加优雅的动态圆圈缩略图
下一篇： 子比主题美化 给子比文章缩略图添加优雅的动态圆圈
也想出现在这里？点击联系我~
常见问题

免费下载或者贵宾专享资源能否直接商用？

  • 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP贵宾介绍。
查看详情

提示下载完成但无法解压？

  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器没有下载完整造成的，可以重新进行下载即可~
查看详情

相关文章

Linux宝塔面板9.2.0 《企业版》一键安装脚本
Linux宝塔面板9.2.0 《企业版》一键安装脚本
其他教程
这9个WordPress AI插件，可能比ChatGPT更适合你
这9个WordPress AI插件，可能比ChatGPT更适合你
其他教程
子比主题后台添加自定义代码目录并设置开启/关闭按钮
子比主题后台添加自定义代码目录并设置开启/关闭按钮
其他教程
对接第三方IP查询API- RCOV API – 子比主题功能增强
对接第三方IP查询API- RCOV API – 子比主题功能增强
其他教程
猜你喜欢
发表评论
暂无评论
静鱼客栈-站长

为您解决烦忧 - 专业服务 看到消息会进行回复

联系站长 在线提交工单
TA的动态
    静鱼客栈

    为你提供网站源码、模板插件、游戏源码、图片素材、精品绿色软件、编程开发及各类源码下载，还有更多WordPress安装、SEO优化及站长建站技术教程经验分享，致力为网络爱好者提供优质内容!

    立即加入
    静鱼客栈

    QQ交流群

    群号 ：672767082
    本站贵宾招募入住~ 到期时间：
    热门文章
    热门标签
    开通VIP可提前联系站长有优惠噢~