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

效果如本站

代码放入css样式

/*首页鼠标悬停视频样式*/
 .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;
  }

本文来自：小狐狸资源网