7b2美化-首页文章动态边框
效果如本站
代码放入css样式
代码语言:javascript复制/*首页鼠标悬停视频样式*/
.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;
}
本文来自:小狐狸资源网
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。