Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >7b2美化-首页文章动态边框

7b2美化-首页文章动态边框

作者头像
小狐狸说事
发布于 2022-11-16 06:53:04
发布于 2022-11-16 06:53:04
54200
代码可运行
举报
文章被收录于专栏:小狐狸说事小狐狸说事
运行总次数:0
代码可运行

7b2美化-首页文章动态边框


效果如本站

代码放入css样式

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/*首页鼠标悬停视频样式*/
 .post-item-zuixin_wz ul.b2_gap > li .post-module-thumb {
    border-radius:10px;
}
.post-3-li .item-in:hover .post-module-thumb {
    box-shadow: 0px 2px 5px #56b839!important;
}
/*分区---接*/
 .b2-lv0>em {
    display: none;
}
.comment-floor {
    /*width: 150px;*/
    /*text-align: center;*/
}
.night .user-s-data p {
    color: #ccc;
}
@media only screen and (max-width:768px) {
    span.user-page-lv .lv-icon>em {
        margin-top:2px;
    }
    .footer {
        margin-top: -40px;
    }
}
span.gold-title {
    color: #2b82e4;
    font-weight: 700;
}
span.gold-title:hover {
    color: #f96b6b;
}
@media screen and (max-width: 768px) {
    .el-notification.right {
        display: none;
    }
}
.news-item-date p span:last-child {
    border-radius: 10px;
}
.night .new-meta-left button {
    background-color: #1b1d1f;
}
.news-item:hover {
    color:#2253e5
}
.post-module-thumb a.thumb-link {
    transition: 0.9s ease-out all;
}
.post-3-li .post-module-thumb a.thumb-link:hover::after {
    opacity:0.8;
    -webkit-transform:scale(1);
    transform:scale(1);
}
.post-module-thumb a.thumb-link:hover {
    /*box-shadow:0 5px 5px rgba(0,0,0,0.1);*/
    /*transition: 0.9s ease-out all;*/
    /*background:rgba(0,0,0,0.5);*/
    /*   transform:scale(1.1);*/
    /*   -webkit-transform:scale(1.1);*/
}
.post-3-li .post-module-thumb a.thumb-link::before {
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0, 0, 0, 0);
    transition:background 0.3s ease-out;
    z-index:1
}
.post-3-li .post-module-thumb a.thumb-link::after {
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    width:50px;
    height:50px;
    margin:-25px 0 0 -25px;
    background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSIgdmlld0JveD0iMCAwIDQ1IDQ1IiBzdHJva2U9IiNmZmYiPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMSAxKSIgc3Ryb2tlLXdpZHRoPSIyIj48Y2lyY2xlIGN4PSIyMiIgY3k9IjIyIiByPSI2IiBzdHJva2Utb3BhY2l0eT0iMCI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49IjEuNXMiIGR1cj0iM3MiIHZhbHVlcz0iNjsyMiIgY2FsY01vZGU9ImxpbmVhciIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdHJva2Utb3BhY2l0eSIgYmVnaW49IjEuNXMiIGR1cj0iM3MiIHZhbHVlcz0iMTswIiBjYWxjTW9kZT0ibGluZWFyIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InN0cm9rZS13aWR0aCIgYmVnaW49IjEuNXMiIGR1cj0iM3MiIHZhbHVlcz0iMjswIiBjYWxjTW9kZT0ibGluZWFyIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjIyIiBjeT0iMjIiIHI9IjYiIHN0cm9rZS1vcGFjaXR5PSIwIj48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiBiZWdpbj0iM3MiIGR1cj0iM3MiIHZhbHVlcz0iNjsyMiIgY2FsY01vZGU9ImxpbmVhciIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdHJva2Utb3BhY2l0eSIgYmVnaW49IjNzIiBkdXI9IjNzIiB2YWx1ZXM9IjE7MCIgY2FsY01vZGU9ImxpbmVhciIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdHJva2Utd2lkdGgiIGJlZ2luPSIzcyIgZHVyPSIzcyIgdmFsdWVzPSIyOzAiIGNhbGNNb2RlPSJsaW5lYXIiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMjIiIGN5PSIyMiIgcj0iOCI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49IjBzIiBkdXI9IjEuNXMiIHZhbHVlcz0iNjsxOzI7Mzs0OzU7NiIgY2FsY01vZGU9ImxpbmVhciIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48L2NpcmNsZT48L2c+PC9zdmc+);
    background-repeat:no-repeat;
    background-size:100% 100%;
    z-index:1;
    -webkit-transform:scale(2);
    transform:scale(2);
    transition:opacity 0.35s, -webkit-transform 0.35s;
    transition:transform 0.35s, opacity 0.35s;
    transition:transform 0.35s, opacity 0.35s, -webkit-transform 0.35s;
    opacity:0
}
.widget-title {
    position:relative;
    font-size:.875rem;
    letter-spacing:5px;
    padding-bottom:.875rem;
    margin-bottom:1.5rem;
    font-weight:400;
}
.widget-title:after {
    content:"";
    position:absolute;
    background: linear-gradient(125deg,#5c92e5 0%,#5c92e5 100%);
    left:1px;
    width:50px;
    height:3px;
    bottom:-2px;
    -webkit-transition:.5s;
    -moz-transition:.5s;
    -ms-transition:.5s;
    -o-transition:.5s;
    transition:.5s;
}
.night .widget-title:after {
     background:linear-gradient(125deg, #e49d46 0%, #e49d46 100%);
}
.widget:hover .widget-title:after {
    width:40%
}
body.night .logo {
    background-size: contain;
    animation: pulse 2s cubic-bezier(0.4, 0, 1, 1) infinite;
}
@keyframes pulse {
    from {
        filter: hue-rotate(0);
        filter: grayscale(10%) brightness(20%);
    }
    to {
        filter: hue-rotate(360deg);
        filter: grayscale(100%) brightness(200%);
    }
}
.shop-single-data-roles .b2-vip0 img {
    /*width: 95px !important;*/
}
.shop-single-data-roles .b2-vip0 em {
    /*margin-left:-58px;*/
}
.shop-single-data-roles .b2-vip1 img {
    /*width: 95px !important;*/
}
.shop-single-data-roles .b2-vip1 em {
    /*margin-left:-58px;*/
}
.shop-single-data-roles .b2-vip2 img {
    /*width: 95px !important;*/
}
.shop-single-data-roles .b2-vip2 em {
    /*margin-left:-58px;*/
}
.night .shop-single-data li.shop-single-data-address-picked {
    background: #1b1d1f;
}
.shop-single-img-box {
    border-radius: 10px;
}
/*动态边框-变色*/
 .enlighter-toolbar {
    z-index: 1 !important;
}
span.lv-icon.user-lv em {
    display: none;
}
.user-w-lv .lv-icon>em {
    display: none;
}
.post-3-li .post-module-thumb a.thumb-link time {
    position: absolute;
    z-index: 4;
    top: 16px;
    right: 9px;
    background:#1b1;
    height: 20px;
    line-height: 20px;
    padding: 0 8px;
    color: #ffffff;
    font-size: 12px;
    border-radius: 10px;
    -webkit-transition: -webkit-transform .35s;
    transition: transform .35s;
    transition: transform .35s, -webkit-transform .35s;
    -webkit-transform: translate3d(120%, 0, 0);
    transform: translate3d(120%, 0, 0);
}
li.post-3-li.post-list-item:hover .post-module-thumb a.thumb-link time {
    -webkit-transform:translate3d(0, 0, 0);
    transform:translate3d(0, 0, 0)
}
.post-3 .post-3-li .item-in:before {
    position:absolute;
    z-index:1;
    top:24px;
    left:3.4px;
    content:"";
    width:4px;
    height:25px;
    border-radius:2px;
    background:#1b1;
    -webkit-transform:scaleY(0);
    transform:scaleY(0);
    -webkit-transition:-webkit-transform .35s;
    transition:transform .35s;
    transition:transform .35s, -webkit-transform .35s
}
.post-3 .post-3-li .item-in:hover:before {
    -webkit-transform:scaleY(1);
    transform:scaleY(1)
}
@media screen and (max-width:768px) {
    .post-module-thumb a.thumb-link time {
        right: 4px;
    }
    .post-3 .post-3-li .item-in:before {
        left: 4.5px;
    }
}
.demo .user-s-info-name .lv-icon img {
    width: 72px !important;
}
.night .ipsds {
    top: 315px !important;
}
.s-a-c-l:hover h2 {
    color: #2196f3;
}
.sah-catlist a {
    background: #de6c1a !important;
    color: #fff;
}
.comment-floors {
    font-size: 12px;
    margin-top: 3px;
    background: #ff9800;
    text-align: center;
    color: #fff;
    border-radius: 10px;
    height: 14px;
    line-height: 14px;
    padding: 0 7px;
    margin-left: 5px;
}
@media screen and (max-width:768px) {
    .comment-floors {
        /*width:22%*/
    }
    .entry-content video {
        min-height: 100%;
    }
}
.topic-author-info-left .author-lv {
    background-color: #4690e5 !important;
}
b.safgsss {
    font-size: 12px;
    color: #4690e5;
    text-align: center;
    /* top: 8px; */
    margin-top: -2px;
    margin-left: 3px;
    margin-right: 3px;
}
.com-form-textarea textarea {
    background: linear-gradient(rgb(255 255 255 / 5%), rgb(255 255 255 / 15%)), url() right 10px bottom 10px no-repeat;
}
.topic-author-info-left .sdklib-lv0 {
    font-size: 12px;
    margin-top: 3px;
    background: #c27347;
    text-align: center;
    color: #fff;
    border-radius: 10px;
    height: 14px;
    line-height: 14px;
    padding: 0 7px;
    margin-left: 5px;
}
.topic-author-info-left .sdklib-lv1 {
    font-size: 12px;
    margin-top: 3px;
    background: #9390c1;
    text-align: center;
    color: #fff;
    border-radius: 10px;
    height: 14px;
    line-height: 14px;
    padding: 0 7px;
    margin-left: 5px;
}
.topic-author-info-left .sdklib-lv2 {
    font-size: 12px;
    margin-top: 3px;
    background: #f4d581;
    text-align: center;
    color: #fff;
    border-radius: 10px;
    height: 14px;
    line-height: 14px;
    padding: 0 7px;
    margin-left: 5px;
}
.topic-author-info-left .sdklib-lv3 {
    font-size: 12px;
    margin-top: 3px;
    background: #8c7cef;
    text-align: center;
    color: #fff;
    border-radius: 10px;
    height: 14px;
    line-height: 14px;
    padding: 0 7px;
    margin-left: 5px;
}
.topic-author-info-left .sdklib-lv4 {
    font-size: 12px;
    margin-top: 3px;
    background: #7bc8c0;
    text-align: center;
    color: #fff;
    border-radius: 10px;
    height: 14px;
    line-height: 14px;
    padding: 0 7px;
    margin-left: 5px;
}
.topic-author-info-left .sdklib-lv5 {
    font-size: 12px;
    margin-top: 3px;
    background: #FF5722;
    text-align: center;
    color: #fff;
    border-radius: 10px;
    height: 14px;
    line-height: 14px;
    padding: 0 7px;
    margin-left: 5px;
}
.post-list .load-more .post-load-button {
    width: auto;
    border: 0;
    transition: ALL .3s;
    padding: 12px 40px;
    font-size: 15px;
    letter-spacing: .5px;
    color: #fff!important;
  }

本文来自:小狐狸资源网

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
7b2美化-列表文章上浮效果
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
小狐狸说事
2022/11/16
4480
7b2美化-列表文章上浮效果
7b2美化-首页添加导航会员区块
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
小狐狸说事
2022/11/17
8070
WordPress网站B2主题会员展示模块
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
小狐狸说事
2022/11/17
1.1K0
WordPress网站B2主题会员展示模块
7b2美化-添加好看的底部介绍
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
小狐狸说事
2022/11/16
7100
7b2美化-添加好看的底部介绍
WordPress动漫图片主题cxudy模板代码
WordPress多功能CX-UDY图片主题是基于wordpress开源程序开发的简洁时常自适应图片模板,适用于各种图片写真类型、图片壁纸类、博客站、多媒体分享站等类型站点。图片主题效果演示http://m.bokequ.com/dongman/gc
博客趣
2024/02/14
4210
WordPress动漫图片主题cxudy模板代码
关于本博客皮肤样式配置
先向博客园申请开通博客 向博客园申请博客js权限 这两步谷歌吧, 我已经申请好了,没法截图 设置博客皮肤模板 否则下面css,js会跟其他模板不兼容 修改页面定制css代码 *,.Cal{paddin
iginkgo18
2020/09/27
5090
关于本博客皮肤样式配置
高质量编码-轨迹管理平台(CSS样式)
样式仿照百度地图鹰眼轨迹服务早期版本的web端轨迹管理台,地图和UI都使用了夜色风格。
MiaoGIS
2020/12/17
5250
高质量编码-轨迹管理平台(CSS样式)
7b2美化-首页添加动态北极熊搜索样式
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
小狐狸说事
2022/11/16
7470
7b2美化-首页添加动态北极熊搜索样式
菜鸡博客开……开……开源了!
因为很多人找我要过博皮源码,所以本宝宝经过深思熟虑,最终决定把自己的源码分享给大家!
attack
2018/09/21
2.9K0
HTML5环形音乐播放器
通过 HTML5,音乐在网络上东山再起。添加音频文件就像插入图像那样简单,并且用户能在浏览器外播放音乐,从而实现惊人的音乐体验。<audio> 标签的推出使您不再需要外部音乐播放器,在网站上实现真正的声音融合。 随着 HTML5 的出现,发生了一些重大变化,特别是在音乐和音频方面。开发人员不再要求 web 冲浪者使用 Adobe Flash、Apple QuickTime 或 Microsoft Windows 媒体播放器等特殊的播放器。这意味着用户不必担心是否有最新的兼容插件(或任何播放器插件)。他们只需打开自己喜欢的浏览器并聆听能发出声音的任何内容,如音乐、有声读物、FX 声音效果或朋友和家人录制的消息。
业余草
2019/01/21
5.2K0
HTML5环形音乐播放器
一套简约漂亮的响应式博客园主题皮肤分享给你们
  最近在自己博客园逛的时候,总会有一个感觉,真是太丑了,然而又觉得自己暂时抽不出太多的时间来搭建自己的博客系统,上网一搜才发现,原来我们可以自定义博客的布局以及样式的,那我就在网上找到了一个哥们的自定义Hexo经典主题Ligt的CSS文件,然后根据自己的审美及需要来做改动后上传以此来使自己的博客看起来像是自己搭建的个人博客。因为我总觉得一个良好的界面才会给博友读下去的欲望,否则很恶心,连自己都这么觉得。下面我们就来分享这个替换步骤教程。
阿豪聊干货
2018/08/09
2.1K0
一套简约漂亮的响应式博客园主题皮肤分享给你们
Joe主题加大图
1.复制代码 2.修改index.php 3.修改post.php 4.增加css文件 5.引入css文件 6.站长总结
堡主
2023/03/04
6320
Joe主题加大图
7b2美化-首页添加导航区块
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
小狐狸说事
2022/11/16
8490
主题hondsome折腾,css修改
主题hondsome折腾,css修改 ps:我现在已经没有使用hondsome主题了,不过依旧保留在后台。感情颇深。 代码如下: 加入到自定义css 或者创建css文件,在footer引入即可 //首页头像自动旋转// .thumb-lg{ width:130px; } .avatar{ -webkit-transition: 0.4s; -webkit-transition: -webkit-transform 0.4s ease-out; transition: tra
乐心湖
2020/07/31
1.1K0
底部关于我们美化代码
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
小狐狸说事
2022/11/17
2.8K0
底部关于我们美化代码
分享一个自用emlog手机底部导航加样式代码
看到很多朋友都要这个手机端底部导航索性就分享了,这玩意其实我也不是不舍得发,是懒得而已 这玩意我都是扣别人的所以这个东西自己扣就行了,如果你不会扣那我赶紧我分享出来你也不会用。
用户8099761
2023/05/11
7580
7b2主题评论气泡
这个功能来自于https://github.com/515184405/barrage,版权归他所有。
小狐狸说事
2022/11/17
4140
7b2主题评论气泡
纯CSS3绘制的逼真,呆萌,超酷的CSS3动画纯CSS3人物行走动画 逼真炫酷CSS3动画纯CSS3绘制的小猫笑脸动画 超呆萌纯CSS3绘制可爱小男孩动画 超酷面部表情
纯CSS3人物行走动画 逼真炫酷CSS3动画 CSS3实在是太强大了,今天分享的CSS3动画非常神奇,它可以模拟人物行走,而且人物行走动画非常逼真。人物行走时的跨步动画时多张图片重叠实现的。有了这个
wblearn
2018/08/27
1.7K0
纯CSS3绘制的逼真,呆萌,超酷的CSS3动画纯CSS3人物行走动画 逼真炫酷CSS3动画纯CSS3绘制的小猫笑脸动画 超呆萌纯CSS3绘制可爱小男孩动画 超酷面部表情
Butterfly主题美化
在butterfly/source/css/创建一个universe.css文件。
ymktchic
2022/01/18
1.6K0
Butterfly主题美化
Typecho美化主题教程
但是现在我们会发现,整个网站的标签都变成了这样,那我们如何只让他在文章中出现呢? 在第一个代码块ol前面加上#post即可使用了。
回忆大大
2021/08/09
1.5K0
推荐阅读
相关推荐
7b2美化-列表文章上浮效果
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验