哔哩哔哩客服中心头部banner设置代码

最新推荐文章于 2024-09-14 15:26:51 发布
最新推荐文章于 2024-09-14 15:26:51 发布
阅读量185 收藏 1
点赞数 4
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37265714/article/details/139188166
版权

可以放底部或消息通知页面顶部，还是挺好看的
演示：客服中心 (bilibili.com)

20240413014646902-image-26

放后台自定义CSS（哔哩哔哩有防盗链，自行本地化图片修改css内链接）

.<a target="_blank" href="https://www.lhndy.cn/tag/banner" title="View all posts in banner">banner</a> {
    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
}

嵌入代码

<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="/" class="logo" style="top: 48px;"></a></div></div>

阅读原文：https://www.lhndy.cn/84.html

道言吖
关注
哔哩网站登录界面html代码,仿哔哩哔哩网页模板设计
weixin_33575588的博客
06-09 3442
【实例简介】【实例截图】【核心代码】bilibili├── Home.html├── Login.html├── Register.html├── css│ ├── bootstrap.min.css│ └── css.css├── forget the password.html├── img│ ├── 001.png│ ├── 002.png│ ├── 003.png│ ...
bilibili哔哩哔哩banner资源
07-29
用于实现bilibili哔哩哔哩banner多图片基于鼠标移动（vue）
仿写哔哩哔哩的头部导航部分（HTML+CSS静态）
qq_44723773的博客
10-21 7733
介绍 先来看看哔哩哔哩的头部导航部分效果，B站的头部导航背景图片使用的是动态叠加（变形和动画的效果），我们可以采用静态的图片的方式来实现背景图的部分 效果 来看看我的实现效果，是不是可以非常棒？ 代码 关于代码部分不解释，在此处我会将该代码上传，链接并附在此处，有需要的小伙伴可以下载下来自行学习和体验！ <!-- * @Author: OriginalCoder * @Date: 2020-10-21 17:46:04 * @version: * @LastEditTime: 2020-
哔哩哔哩面试经验分享
qq_38639426的博客
06-24 1977
一场突如其来的疫情席卷了上海，招聘季的金三银四也不复往年荣光。疫情，战争，坠机……2022年越来越魔幻了。今年的职场，旁人我不知道，身边的朋友都是求稳，同事也鲜有跳槽的。作为一名面试官，今年收到的简历总体质量也不如去年那么好。说了很多年的凛冬将至，现在是真的感受到了一丝寒冷。不过虽是寒冬，另一方面看其实竞争压力也相对小了些。风险之中也有机会，分享一次去年年底在B站面试的经验吧，准备跳槽的朋友或许用的上。那是一个没有疫情的上海，那天我闲来无事，刷刷Boss直聘，偶然弹出一条Bilibili的招聘信息，说道：不
简单设置一个哔哩哔哩的导航栏
qq_51309939的博客
04-09 2024
新手上门
哔哩哔哩 B站 bilibili 视频倍速设置 视频倍速可自定义
c_lanxiaofang的博客
08-27 4318
该代码用于设置倍速为3，最后的数值是多少就是多少倍速，可以带小数点，注意小数点符号正确即可（小贴士：如果是第一次操作的朋友浏览器处于安全考虑会有提示输入 allow pas...再允许粘贴代码是正常的 ）2、进入控制台方式二：还可以 在视频播放页的空白处 鼠标右键点击。1、进入控制台方式一：可以 按键盘。再在出现的调试中选择控制台。
jQuery-仿哔哩哔哩视频弹幕代码.zip
07-11
代码片段：    <div id="player1"></div>        这个数据是假的">24  人正在观看,<span class="danmuku_num">100条弹幕      时间  发送内容  用户类型         ...
jQuery仿哔哩哔哩视频弹幕代码
06-24
jQuery仿哔哩哔哩视频弹幕代码是一款基于Dplayer.js制作视频文字弹幕。
仿哔哩哔哩代码
04-22
【标题】"仿哔哩哔哩代码"是一个项目，旨在模仿知名的视频分享平台——哔哩哔哩（B站）的部分功能或架构。这个项目可能是为了学习、实践或者研究B站的后端服务、前端界面或者特定功能的实现。通过分析和实现这样的...
微信小程序 影音娱乐 仿哔哩哔哩 （源代码+截图）
06-21
微信小程序 影音娱乐 仿哔哩哔哩 （源代码+截图）微信小程序 影音娱乐 仿哔哩哔哩 （源代码+截图）微信小程序 影音娱乐 仿哔哩哔哩 （源代码+截图）微信小程序 影音娱乐 仿哔哩哔哩 （源代码+截图）微信小程序 影音...
前端用html写excel文件直接打开
全易
09-10 583
html文件直接用excel打开
富文本中去掉 HTML 和 CSS 样式，只保留纯文本
S筱潇S四维Smile
09-11 342
要从富文本中去掉 HTML 和 CSS 样式，只保留纯文本，可以使用以下几种方法：1. 纯 JavaScript 方法你可以使用 JavaScript 的innerText或来提取文本，而忽略 HTML 标签和样式。
《HTML 与 CSS—— 响应式设计》
asd4353012的博客
09-11 1502
HTML 和 CSS 在响应式设计中起着至关重要的作用。通过使用语义化标签、响应式图像、媒体查询、弹性布局和响应式网格系统等技术，可以实现网页在不同设备上的自适应显示，提供最佳的用户体验。在进行响应式设计时，要遵循移动优先设计、内容优先和测试优化等最佳实践，不断提高网页的质量和性能。随着移动设备的普及和技术的不断发展，响应式设计将变得越来越重要，开发者需要不断学习和掌握新的技术和方法，以满足用户的需求。
打造民国风格炫酷个人网页：用HTML和CSS3传递民国风韵
最新发布
m0_61118741的博客
09-14 1035
这个示例展示了如何结合民国风格和现代网页设计元素，创造一个既古典又炫酷的网页。通过细致的CSS样式和动画效果，我们实现了古典美学与现代技术的完美融合。这种设计不仅在视觉上吸引人，也在功能上提供了良好的用户体验。希望这个示例对你在网页设计方面有所启发！
水平居中的几种方法（总结）
致未来的你。的博客
09-11 722
水平居中的几种方法（总结）
前端：HTML、CSS、JS、Vue
云扬的博客
09-04 4747
本文主要介绍了HTML、CSS、JavaScript、Vue的基本语法和使用。供个人学习使用
Requests-HTML模块怎样安装和使用？
2301_79698214的博客
09-11 532
上述代码中，首先创建了一个HTMLSession对象，然后使用get()方法发送GET请求，获取网页的HTML内容。最后，使用response.html.text属性获取HTML文本，并将其打印输出。以上就是使用Requests-HTML模块的基本步骤。在Python脚本中导入Requests-HTML模块。使用Requests-HTML模块发送HTTP请求和解析HTML内容。使用pip命令安装Requests-HTML模块。系统会自动下载并安装Requests-HTML模块及其依赖项。
requests-html的具体使用方法有哪些？
2301_79698214的博客
09-12 477
requests-html库还支持使用XPath表达式来查找元素，提供了丰富的功能来满足各种网页数据抓取和分析的需求‌。‌：通过pip安装requests-html库，命令为。‌：通过继续跟踪网页中的链接，可以获取到更多相关内容。
哔哩哔哩手机app切换账号的代码
04-30
由于我不是哔哩哔哩手机app的开发者，无法提供确切的代码。不过一般来说，切换账号的实现需要考虑以下几个方面： 1. 用户信息的存储和管理：需要将用户的账号信息存储在本地，并且能够进行增删改查等操作。 2. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值