博客

【7B2主题美化】暗黑模式带开关适应B2Pro_4.1.2

效果图

教程

头部位置增加按钮方法

<strong>b2/Modules/Templates/Header.php 884行左右插入代码</strong>

<div data-title="切换昼夜" class="user-tips"><button onclick="switchNightMode()"><i id="lmtdcn" class="lmtd bd-yewanshuimian"></i></button></div>

后台b2主题-常规设置-头部HTML标签

<script type="text/javascript" src="//at.alicdn.com/t/font_3133075_wsm2usco9v.js"></script> <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_3133075_wsm2usco9v.css" /> <script type="text/javascript" src="/pic/jquery.min.js"></script>

自己的子主题style.css

/*黑夜模式开始*/body.night .info-box,body.night .i-price{
  
    background: #3d3d3d;
}
body.night .infomation-list-top,body.night .info-list {
    border-bottom: 1px solid #535353;
}
.social-top .header-user {
    width: auto;
}
body.night .user-credit,body.night .user-money{
    color: #adb5bd!important;
}
body.night .topic-name-data b {
    color: #adb5bd;
}
body.night .po-topic-textarea .topic-content {
    color: #adb5bd;
}
body.night .message-content p {
    color: #adb5bd;
}
/*标题栏目*/body.night .comment-info span {
color:#adb5bd
}
body.night .base-header h3 {
  color: #f0f0f0;
}
body.night .base-header h3::after {
  background: #ffc107;
}
body.night .base-header h3:before {
  background: #ffc107;
}
/*标题栏目结束*//*夜间登录背景*/body.night .login-box-img {
    background: linear-gradient(314deg,#946801 0%,#ffc107 100%);
}
/*夜间登录背景*/body.night .header-login-button button {
    border: 1px solid #333 !important;
    background: #333 !important;
}
body.night .login-bottom button {
    background: #ffc107 !important;
    border: 1px solid #ffc107 !important;
}
/*style*/@media screen and (max-width: 768px){
body.night .menu-icon {
    background: #333;
    }
    
body.night .login-button .b2-account-circle-line {
    color: #aaaeb3;
}    
body.night .top-menu-ul > li.depth-0:first-child > a {
    color: #adb5bd!important;
}    
body.night .social-top .header-banner-content .header-banner-left {
    width: 100%;
    height: 48px;
    border-top: 0px solid #eaeaea;
}
body.night .social-top .show-menu-box .header-logo {
    width: 100%;
    background: #292a2d;
    padding: 12px;
    top: 0;
    left: 0;
}
body.night .menu-icon .line-1,body.night .menu-icon .line-2,body.night .menu-icon .line-3 {
    background-color: #aaaeb3;
    }  
body.night .login-button .b2-user {
    color: #aaaeb3;
    }    
body.night .mobile-show {
    border: 1px solid rgba(255,255,255,0) !important;
    }
body.night .mobile-footer-menu {
    background: #252829;
    }
body.night .mobile-footer-center button {
    background: 0;
    border: 0;
    }
body.night .show-menu-box .top-menu .top-menu-ul {
border-left: 0px solid #272a2b;
    }
body.night .top-menu ul li.depth-0 > a:after {
background: #272a2b;
    }
body.night .show-menu-box .top-menu .sub-menu {
background: #272a2b;
    }
body.night .show-menu-box .top-menu .sub-menu a {
color: #909399;
    }
body.night .logo-left .mobile-box,body.night .top-menu-ul>li.depth-0>a i.b2-arrow-down-s-line {
    background: #292a2d;
    }
body.night .top-menu ul li.depth-0>a {
    background: #292a2d;
    }
body.night .header-tools {
    background-image: url(https://www.xtuku.com/pic/night1.png);
    }
body.night .close-button {
    color: #ddd!important;
}
body.night .ubanner-ctn h2 {
  font-size: 22px !important;
}
}
body.night .ye {
  color: #ffc107;
}
body.night .poster {
  filter: sepia(0) grayscale(1) brightness(38%);
}
body.night .post-style-5 header h1 {
    background-repeat: repeat-x;
    background-position: 100% 100%;
    color: transparent;
    -webkit-font-smoothing: antialiased;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 400;
}
body.night .ubanner-ctn h2 {
  text-align: center;
  color: #fff;
  font-size: 46px;
  font-weight: 600;
  margin-bottom: 65px;
  letter-spacing: 1px;
  text-shadow: 0 3px 6px rgba(0,0,0,0.2);
    background-position: 100% 100%;
    color: transparent;
    -webkit-font-smoothing: antialiased;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* 侧栏文章列表样式 */body.night .b2-widget-hot ul .widget-post:hover {
    cursor: pointer;
    background: linear-gradient(225.08deg,#2d3031 0%,#161819 96.09%);
    box-shadow: 1px 1px 2px #323638, -1px -1px 0px #292a2d;
}
body.night .widget-area .box h2 {
    color: #ffffff8f;
}
body.night .link-overlay:hover {
    color: #ffc107;
    text-decoration-line: none;
}
/* 侧栏文章列表样式 */body.night .post-next .post-pre-next-info:hover {
    cursor: pointer;
    background: linear-gradient(225.08deg,#161819 0%,#2d3031 96.09%);
    box-shadow: 1px 1px 2px #292a2d, -1px -1px 0px #292a2d;
}
body.night .post-pre .post-pre-next-info:hover {
    cursor: pointer;
    background: linear-gradient(225.08deg,#2d3031 0%,#161819 96.09%);
    box-shadow: 1px 1px 2px #292a2d, -1px -1px 0px #292a2d;
}
body.night .b2-menu-3 .sub-menu-0>li:hover>a, .b2-menu-3 .sub-menu-0 a:hover {
    background: linear-gradient(225.08deg,#262829 0%,#292a2d 96.09%);
}
body.night .widget ul li,body.night .aside-bar div>div+div{
    border-top:1px solid rgba(255,255,255,0)!important;
}
body.night .top-user-box-drop .avatar {
    border: #292a2d;
}
body.night .home-section-division,body.night .user-money,body.night .user-credit,body.night .site-terms,body.night .post-user-info,body.night .b2-audio-start-bar-box,body.night .post-tags-meat a .tag-img, body.night .content-hidden-info,body.night .widget-circle-info-desc,body.night .widget .recommended-widget li.picked a,body.night .comment-footer-tools .comment-vote-hidden button,body.night .comment-list button.text,body.night .user-sidebar-count li,body.night .following-info-desc,body.night .home-collection-image .collection-number.ar,body.night .insert-post,body.night .gold-page-list li:nth-child(odd),body.night .dmsg-content p,body.night .widget-new-header .ps1,body.night .widget-news-user,body.night .widget-new-header .ps a,body.night .pager-center,body.night .entry-content blockquote,body.night .post-content-footer .content-footer-poster button,body.night .collection-button,body.night .top-search .header-search-select,body.night .ds-textarea textarea,body.night input:focus,body.night .ds-item input,body.night .dmsg-textarea,body.night .desc textarea:focus,body.night .user-credit{
  background: #212425!important;
color:#adb5bd
}
body.night .user-sidebar-count li,body.night .ds-textarea textarea {
    border: 5px solid #323335;
}
body.night .user-money,body.night .user-credit {
    text-shadow: 0px 0px 0px rgba(0,0,0,0);
    color: #fff;
}
body.night, body.night #body, body.night .page_navi a.current {
    background-color: #292a2d!important;
    color: #adb5bd!important;
}
body.night #sidebar, body.night .next-page a,body.night .com-form>.b2-radius {
    background-color: #292a2d;
    color: #888282;
}
body.night .home-section-division .home-division li h3 .go,body.night .bar-top,body.night .yarpp-related ol li:before {
    background: #ffc107;
}
body.night .home-section-division .home-division a:hover .item-thumb,body.night .home-section-division .home-division a:hover h3,body.night .tax-info-item .fliter-button:hover,body.night .pay-type li>button {
  color: #ffc107
}
body.night .home-section-division .home-division a {
    color: #525252;
}
@media (min-width:1024px) {
  body.night .home-section-division .home-division li.li_4 .item {
    background: #131313;
    color: #ffc107
  }
  body.night .home-section-division .home-division li.li_4 .item:hover {
    background: #ffc107;
    color: #fff
  }
}
body.night .lv-icon.user-lv i,body.night .custom-page-row.gold-row,body.night .modal.address-box .pay-box-content li.picked,body.night .pay-box-content li:hover,body.night .sah-catlist a,body.night .gujia .s-a-c-l h2,body.night .gujia .sah-name,body.night .gujia .sah-date,body.night .gujia .sah-r>div,body.night .gujia .sah-avatar,body.night .gujia .saf-z button,body.night .gujia .item-content::before,body.night .gujia .item-content::after {
    background-color: #292c2d;
}
body.night .bar-middle,body.night .bar-footer,body.night .aside-container .bar-user-info,body.night .bar-normal {
    box-shadow: -8px 0px 35px 0px rgba(0,0,0,0);
}
body.night .bar-user-info-row-title>a,body.night .related-posts .related-posts-title,body.night .post-3 .post-modules-top, .post-5 .post-modules-top,body.night .topic-vote-desc,body.night .home-collection-row-1,body.night .news-item ul,body.night .dmsg-list li {
    border-bottom: 1px solid rgba(255,255,255,0);
}
body.night .bar-mission .mission-today-list li,body.night .topic-type-menu,body.night .post-5 .load-more,body.night .post-5 .b2-pagenav,body.night .news-item+.news-item,body.night .news-item li+li,body.night .task-day-list li {
    border-top: 1px solid rgba(255,255,255,0);
}
body.night .related-posts .related-posts-item,body.night .top-search-select {
    border-right: 1px solid rgba(255,255,255,0);
}
body.night .next-jt i {
    background-color: rgba(255,255,255,0);
}
body.night .login-social-button-bottom,body.night .post-content-footer .content-footer-poster button {
    border: 1px solid rgba(0,0,0,0);
}
body.night .login-form-item input:focus {
    border-color: #ffc107;
}
body.night .login-eye .b2-eye-open,body.night .login-form-item input:focus + span,body.night .entry-content a:hover,body.night .tax-search button i,body.night .b2-audio-button {
    color: #ffc107;
}
body.night .user-w-logon:after {
    background-image: linear-gradient(0deg,#292a2d 0,rgb(29, 31, 32) 100%);
}
body.night .oauth-login-button {
    border-top: 1px dashed #444;
    border-bottom: 1px dashed #444;
    background: #292a2d;
}
body.night .comment-overlay {
    background-color: rgba(29, 31, 32, 0.91);
}
body.night .open-message{
    background: #292a2d!important;
    color: #adb5bd!important;
}
body.night .content-hidden-info {
    background-image: none;
}
body.night .post-5 .post-info h2::before,body.night .user-w-announcement li a::before,body.night .tax-fliter-hot .order-items a:hover {
    background-color: #ffc107;
}
/*
 * 无图文章列表浮动
 */body.night .post-5 .b2_gap {
    margin-top: 10px;
    margin-right: 0;
    background: #313131;
}
body.night .post-5 .b2_gap > li {
    background: #292a2d;
    margin: 0;
    transition: all .3s;
    border-right: 0;
    border-bottom: 1px solid #272a2b;
    border-left: 1px solid #272a2b;
    box-shadow: none;
}
body.night .post-5 .b2_gap > li:hover {
    -webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 10px 20px #121415
    -webkit-transform: translateY(-3px);
    -ms-transform: translateY(-3px);
    transform: translateY(-3px);
    position: relative;
    z-index: 5;
}
body.night .b2_gap > li .item-in {
    transition: all .3s;
}
/** 文章卡片 */body.night .soft-area {
    border: 1px solid #292a2d;
    background: #292a2d;
}
body.night .post-style-6-meta {
    background-color: #212425;
    box-shadow: 0px 0px 2px #323638, inset 0px 2px 3px #151617;
}
body.night .post-style-6-meta .meta_left span {
    color: #fff;
}
body.night .post-style-6-top .info6fwq li {
    border-bottom: 1px solid #666;
    color: #aaaeb3;
}
body.night .site-content .soft-area .area-c .soft-detail h1 {
    color: #fff;
}
body.night .post-style-6-top .dz6fwq a {
    background: linear-gradient(90deg,#ffc107,#c58f11);
}
body.night .post-style-6-top .dz6fwq a:hover {
    background: linear-gradient(90deg,#e8a711,#ffc107);
}
body.night .post-style-6-top .dz6fwq a:hover {
    box-shadow: 0px 5px 10px #ffd77945;
}
body.night .post-style-6-top .info6fwq li:before {
    background: #ffc107;
}
/* h3搜索标题 */body.night .insearch {
    line-height: 1.5;
    background-image: linear-gradient(135deg,#232425,#292a2d),linear-gradient(-90deg,#1e1f20 0%,#696969 100%);
    /* border-bottom: .1rem solid; */    border-image: linear-gradient(-90deg, #1e2021, #ffc107);
  font-size: 22px !important;
  padding: 6px;
  filter: drop-shadow(-4px 0 0 #ffc107);
}
body.night .insearch:before {
    margin-right: 6pt !important;
    color: #ffc107 !important;
    content: "\e622" !important;
    right: 0;
}
body.night .entry-content>h3 {
    margin: 30px 0 30px 0 !important;
}
/** 下载卡片 */body.night .download-item {
    padding: 40px;
    margin-top: 60px;
    background: #2E3138;
    border: 1px solid #333740;
    box-sizing: border-box;
    box-shadow: inset -1px -1px 0px #292a2d, inset 1px 1px 4px #292a2d;
}
body.night .download-rights {
    background: linear-gradient(225.08deg, #535966 0%, #2E3138 96.09%);
    box-shadow: 0px 2px 8px rgba(26, 28, 31, 0.79652);
}
body.night .download-info {
    background: linear-gradient(225.08deg, #3d414a 0%, #2E3138 96.09%);
    box-shadow: 0px 2px 8px rgba(26, 28, 31, 0.79652);
}
body.night .download-info ul {
    display: flex;
    flex-flow: wrap;
    padding: 10px;
    margin: 0;
    list-style: none;
    background: #2e3138;
    box-shadow: 0px 0px 2px #535966, inset 0px 2px 3px #1A1C1F;
}
body.night .post-style-6 .download-current {
    background: #2e3138;
    box-shadow: 0px 0px 2px #535966, inset 0px 2px 3px #1A1C1F;
}
body.night .entry-content .button {
    border: 1px solid #313540;
    background: linear-gradient(225.87deg,#393d46 2.76%,#26282d 94.28%);
    font-weight: 600;
}
body.night .download-rights ul li {
    border-top: 1px dashed #2a2c31;
}
body.night .entry-content .button:hover {
    background: linear-gradient(225.87deg,#2a2d33 2.76%,#2a2c32 94.28%);
    color: #fff;
    box-shadow: 1px 1px 0px #141618, -1px -1px 1px #535966;
}
body.night .download-button-box a{
    color: #fff;
}
body.night .download-list.gujia .gujia-bg {
    background-color: #252627;
}
body.night .download-list.gujia .download-button-box div {
    background-color: #252627;
}
/*style end*//*夜间样式开始*/body.night #content .post p a, body.night .floor {
    color: #af8f77;
}
body.night a, body.night a:link, body.night a:visited,body.night .topic-comment-left textarea,body.night .name,body.night .item-title,body.night .nav-name,body.night .top-user-box-drop .top-user-info-box-count p,body.night .top-user-info-box-name h2,body.night .home-section-division .home-division li h3,body.night .bar-mission .user-w-qd-list-title p,body.night .login-title span,body.night .item-content .b2-out{
    color: #adb5bd;
}
body.night #comments form textarea, body.night #comments form input {
    background-color: #292a2d;
    color: #888282;
}
body.night #content .menufeng {
    border-bottom: 1px solid #989292;
}
body.night .author-edit-page .author-edit-list>li,body.night .vip-top,body.night .collection-info,body.night .stream-article,body.night .stream-area .b2-pd {
    border-bottom: 1px solid #232627;
}
body.night .vip-allow.allow {
    color: #676c6f;
}
body.night #comments form textarea, body.night #comments form input, body.night #shangerweima {
    border: 1px solid #989292;
}
body.night .topic-comment-list,body.night .topic-comment-list-header,body.night .topic-lv1+.topic-lv1,body.night .topic-comment-list-footer,body.night .user-panel .avatar,body.night .com-form-textarea,body.night .ds-item,body.night .pay-type li>button {
    border: 1px solid #242627;
color:#adb5bd
}
body.night #nav .menu ul{
    background: #292a2d;
}
body.night .site,body.night .widget-comment-contnet,body.night .circle-desc,body.night .po-topic-textarea textarea:first-child,body.night .post-list-cats a span,body.night .top-style-blur,body.night .shop_bg,body.night .news-header,body.night .news-item-header span.new-tag,body.night .news-item-header span,body.night .news-header .banner .banner-text .btn,body.night .com-form-textarea textarea,body.night .content-excerpt,body.night .shop-single-data-count button,body.night .shop-single-data li.shop-single-data-price,body.night .shop-single-data-count input,body.night .single-document-footer,body.night .document-cat-item:hover,body.night .content-ds,body.night .message-content p.comment span,body.night .topic-comment-form,body.night .topic-child-list ul,body.night .topic-footer-left button,body.night .topic-meta-more-box ul,body.night .topic-loading-more-button,body.night .entry-content p > code,body.night .post-tags-meat a,body.night .b2-light-dark-outside,body.night .filter-items a,body.night .topic-image-light,body.night .user-w-rw,body.night .user-credit,body.night .vip-count ul li .vip-in,body.night .mission-tk,body.night .top-user-box-drop.show,body.night .top-user-info-box .user-w-gold a i,body.night .tax-fliter-hot,body.night .bar-user-info-row .user-w-gold div,body.night .mission-page-list li:nth-child(even),body.night .modal-content{
    background:#292a2d;
color:#adb5bd
}
body.night .bar-normal,body.night .box,body.night .span4,body.night .footer-fav,body.night .post-5 .b2_gap,body.night .news-item-header span::after,body.night .tbox,body.night .buy-resout-box,body.night .news-item-header b,body.night .sub-menu,body.night .topic-comment-form.show textarea,body.night .content-hidden-before i,body.night .content-hidden-end span,body.night .tax-fliter-cat,body.night .tax-search input,body.night .bar-item-desc,body.night .boxt,body.night .nav-detail-portfolio-wrapper,body.night .author-page-right,body.night .po-topic-box-tips{
    background:#323335;
}
body.night .bar-footer,body.night .aside-container .bar-user-info,body.night .bar-user-info-row,body.night .user-w-tj,body.night img.avatar,body.night .topic-card-box li,body.night .topic-video-box li>div video,body.night .topic-guess-box,body.night .widget .recommended-widget li a:hover,body.night .collection-posts li span,body.night .dmsg-list li:hover,body.night .mask-wrapper {
    background-color: #323335;
color:#adb5bd
}
body.night .button,body.night button {
    background: #292a2d;
    /*border: 1px solid #ffc107;*/}
body.night button.empty,body.night .button.empty {
    background: #333;
}
body.night .search-button-action,body.night .login-eye.button,body.night .my-circle-list>div>button,body.night .topic-drop>button,body.night .tax-search button,body.night .change-theme button,body.night .po-post-icons button,body.night .po-close-button button,body.night .gold-list-row-5,body.night .gold-list-row-1,body.night .gold-list-row-2,body.night .gold-list-row-3,body.night .gold-list-row-4,body.night .gold-page-list,body.night .site-footer .widget-title,body.night button,body.night .po-topic-top-right button,body.night .topic-type-menu>ul li button,body.night .po-ask button,body.night .topic-footer-right button,body.night .topic-author-info-right button,body.night .mfp-iframe-holder .mfp-close,body.night .tax-info-item .fliter-button,body.night .login-box-content .login-social-button-bottom a {
    background: 0 0;
    border: 0;
}
body.night button.empty,body.night .button.empty,body.night li.current-menu-item > a,body.night .topic-comment-content:hover button,body.night .top-menu-hide:hover .more,body.night .header .top-menu ul li.depth-0:hover > a .b2-jt-block-down,body.night button.text,body.night .entry-content a.button.empty,body.night .entry-content a.button.text,body.night .user-sidebar-info.active p {
    color: #ffc107;
}
.b2-light, .newsflashes-nav-in ul li.current-menu-item a {
    background-color: #ffc10712;
}
body.night .user-w-rw,body.night .user-credit{
    text-shadow:none;
}
body.night .user-w-qd-list-title{
   background-color:rgb(0, 88, 255,0.66); 
}
body.night .user-w-rw-bg,body.night .po-topic-button,body.night .topic-type-menu button.picked,body.night .btn-orange,boby.night .user-w-announcement li a::before{
    background-color: #ffc107;
    color: #fff;
}
body.night .b2-color,boby.night .po-topic-top-right .picked,body.night .top-user-box-drop li a i{
    color: #ffc107!important
}
body.night #public .topic-type-menu {
    background: rgba(41, 48, 66, 0.4);
}
body.night .wenzi,body.night .news-item-content p,body.night .news-header .banner .banner-text h4,body.night .topic-footer-right button,body.night .user-w-tj span {
    color: #9a9a9a;
}
body.night .gdd-quick-link-buy-vip__hover-block,body.night .gdd-quick-link-buy-vip__popover--btn,body.night .gdd-quick-link-buy-vip,body.night .gdd-quick-link-buy-vip__popover {
    background-color: #ffc107;
    color: #fff;
}
body.night .widget-comment-contnet.jt:before, body.night .widget-comment-contnet.jt:after,body.night #public .my-circle-list button.picked:before,body.night #public .my-circle-list button.picked:after {
    border-bottom-color: #202634;
}
body.night .shop-box-price {
    background: #242a38;
    border-top:none;
    border-bottom: none;
}
body.night .post-pay-type .post-pay-type-icon{
    color: #3e74a3;
}
body.night .comment-list button.text,body.night .top-search .header-search-select {
    border: 1px solid #212425;
}
body.night .b2-widget-title h2, .widget > h2{
    color: inherit;
}
body.night .topic-child-list li + li {
    border-top: 1px dashed #293042;
}
body.night .topic-comments:before{
    border-color: transparent transparent #202634;
}
body.night .widget-uisdc-helper .uisdc-helper-title {
    color: #ffc107;
    background: #222425;
}
body.night .custom-page-row.gold-row+.custom-page-row.gold-row {
    border-left: 10px solid #292a2d;
}
body.night .download-thumb::before {
    background: -webkit-radial-gradient(right top, ellipse cover, rgba(250, 250, 250, 0) 8%,rgb(41, 48, 66) 73%);
    background: radial-gradient(right top, ellipse cover, rgba(250, 250, 250, 0) 8%,rgb(41, 48, 66) 73%);
}
body.night .home_row,body.night .post-modules-top,body.night .post-5{
    background: rgba(0,0,0,0)!important;
}
body.night .b2-widget-comment,body.night .b2-widget-products,body.night .b2-widget-hot,body.night .po-topic-textarea,body.night .com-form-textarea textarea,body.night .topic-comment-list > ul,body.night .topic-comment-avatar,body.night .circle-info-left img,body.night .left-item img,body.night .logo-wrapper,body.night .mission-page-list ul{
    border: 1px solid #202634;
color:#adb5bd
}
body.night .box-header,body.night .site-title,body.night .shop-single-action-right .favorite-button,body.night .tax-info-item .fliter-button {
    color: #fff;
}
body.night .comment .comment-item,body.night .post-5 ul.b2_gap > li,body.night .user-w-tj,body.night .user-w-rw,body.night .document-row + .document-row,body.night .has_children .sub-menu,body.night .post-tags-meat,body.night .none-comment,body.night .topic-comments,body.night #filter-top ul li + li,body.night .b2-b-t,body.night .circle-widget-button,body.night .list-footer,body.night .vip-faq-list + .vip-faq-list,body.night .custom-page-row + .custom-page-row,body.night .no-request,body.night .request-box li{
    border-top: 1px solid #212425!important;
}
body.night .post-user-info,body.night .po-topic-textarea textarea:first-child,body.night .my-circle-list,body.night .user-w-rw,body.night .shop-single-attr-title,body.night .single-bottom h3,body.night .shop-single-data li,body.night .dmsg-header,body.night .message-list li,body.night .box-header,body.night .author-links,body.night .custom-page-title,body.night .entry-header{
    border-bottom: 1px solid rgba(114, 114, 114, 0.1);
}
body.night .my-circle-list > div + div {
    border-left: 1px solid #202634;
}
body.night .post-5 ul.b2_gap > li {
    border-right: 1px solid #202634;
}
body.night .shop-single-img-box,body.night .shop-single-data-count button,body.night .shop-single-data-count input,body.night .content-ds,body.night .post-tags-meat a,body.night .po-topic-tools-right button,body.night .widget-mission-footer a {
    border: none;
}
body.night .post-3 .post-3-li .item-in:hover {
    background-color: #212425;
    color: #ff6800;
}
body.night .entry-content,body.night .comment-content-text p,body.night .shop-single-data-count input,body.night .news-header .banner .banner-text h2,body.night .message-content p.comment span{
    color: #adb5bd;
}
body.night .comment-list .children article .comment-item {
    border: none;
}
body.night .block-logo,body.night .banner-img {
    display: none;
}
body.night .news-header .banner{
    display: block;
    margin: 50px 0;
}
body.night .news-header .banner .banner-text{
    width: auto;
}
.logo .light-logo{
    display: none;
}
body.night .light-logo {
    display: block;
}
body.night .entry-content > hr {
    background-image: -webkit-linear-gradient(left, #202634, #8c8b8b, #202634);
    background-image: -moz-linear-gradient(left, #202634, #8c8b8b, #202634);
    background-image: -ms-linear-gradient(left, #202634, #8c8b8b, #202634);
    background-image: -o-linear-gradient(left, #202634, #8c8b8b, #202634);
}
body.night .shop-single-data li.shop-single-data-price{
    background-image:none;
}
body.night .content-hidden-info {
    border: 1px dashed rgba(178, 186, 194, 0.17);
}
body.night .buy-vip__hover-block,body.night .buy-vip__popover,body.night .buy-vip__popover--btn{
    background-color: #0058ff!important;
}
body.night .buy-vip__popover--btn,body.night .header-user .iconday,body.night .b2-widget-hot-circle .b2-widget-title button{
    color: #fff;
}
body.night .buy-vip__popover--desc{
    color:#0058ff ;
}
body.night .modal-content {
    background-image: url(https://www.xtuku.com/pic/night1.png);
    background-repeat: no-repeat;
    background-size: 100%;
}
body.night .top-user-info-box {
    background-image: url(https://www.xtuku.com/pic/night2.jpg);
}
body.night .header-search-select .select,body.night .header-search-select a:hover {
    background: #272a2b;
}
body.night .b2-menu-3 a:after{
background: linear-gradient(225.08deg,#292a2d 20%,#ffc107 90.09%);
}
/*加载中背景*/body.night .gujia .bg,body.night .widget .widget-gujia-hot-circle .widget-circle-info h2,body.night .widget-gujia-hot-circle .widget-circle-icon,body.night .widget-gujia-hot-circle .widget-circle-meta span,body.night .topic-guess-box,body.night .post-thumb,body.night .widget-gujia-user .user-w-announcement>div,body.night .mission-gujia .user-w-qd>div,body.night .mission-gujia .user-mission-info-left,body.night .mission-gujia .avatar-parent,body.night .dmsg-self .my-dmsg-content,body.night .my-dmsg-content,body.night table td {
    background: #272a2b;
}
body.night .preloader {
    background-color: rgb(0 0 0 / 80%);
}
body.night .preloader-loding {
    color: #ffc107;
}
body.night .preloader-lod,body.night .large-square {
    background: #ffc107;
}
body.night .header-banner{
    background-color: #292a2d;
}
body.night .social-top .header{
    border-top: 1px solid #292a2d;
margin-top: -2px;
}
/*灰白色字体*/body.night .change-theme button i,body.night .button.empty,body.night .home-first .hf-widget,body.night .home-first .hf-widget .hf-widget-title a,body.night .ceo-cat-switcher h5,body.night #container-box-1,body.night .searchs input[type="text"],body.night .bar-item i,body.night .site-footer,body.night .item-in.box.b2-radius:hover,body.night .u-backgroundColorWhite,body.night .authorCard--description,body.night .authorCard--meta,body.night .authorCard--title,body.night .button, body.night button,body.night .vip-faq .vip-faq-list h2,body.night .vip-faq .vip-faq-list p,body.night .post-list-item:hover .post-list-meta-box,body.night .insert-post h2,body.night .file-down h2,body.night .content-ds-count{
    color: #adb5bd!important;
}
/*背景色*/body.night .home-first .hf-widget,body.night .home-first .hf-widget-4 .hf-widget-content ul,body.night .site-footer,body.night .item-in.box.b2-radius:hover,body.night li.b2-widget-box.widget-post.widget-post-small:hover,body.night .u-backgroundColorWhite,body.night .w-a-count,body.night .write-select-row-top textarea,body.night .login-form-item input,body.night .forget-pass-info,body.night .vip-faq .vip-faq-list p,body.night .vip-faq .vip-faq-list{
    background-color: #323335!important;
color:#adb5bd
}
/*鼠标移上去字体变白*/body.night .button.empty:hover{
    color: #FFF!important;
    transition: all .3s;
}
/*夜间圆角*/body.night #author .author-page-right{
    border-radius: 20px!important;
}
body.night .home-first .hf-widget{
    border: 1px solid rgba(114, 114, 114, 0.1);
}
body.night .home-first .hf-widget .hf-widget-title,body.night .post-3 .post-3-li .item-in{
    border-bottom: 1px solid rgba(114, 114, 114, 0.1);
}
body.night .index-header,body.night .single-top-html,body.night #html-box-ad{
    opacity: 0.5;
}
body.night img{
    opacity: 0.7;
}
body.night .login-form-item input:focus + span:after,body.night .login-form-item input[class="active"] + span:after,body.night .login-form-item input:valid + span:after,body.night .po-ask button span{
    background: #292a2d!important;
}
body.night .recaptcha-button{
    border-top: 1px solid #292a2d;
}
body.night .recaptcha-button .recaptcha-send{
    border-left: 0;
}
body.night .vip-footer .vip-faq{
    background: none!important;
}
body.night textarea.topic-title{
    border-radius: 20px 20px 0 0;
}
body.night code,body.night .entry-content p > code{
    color: #ff3c98;
    background-color: rgba(253,153,153,.2)!important;
    font-weight: 600;
}
body.night .common-button{
    color: #FFF!important;
}
body.night #banner_wave_1 {
    width: auto;
    height: 65px;
    _filter: alpha(opacity=80);
display: none;
    position: absolute;
    bottom: 0;
    width: 400%;
    left: -236px;
    z-index: 1;
    opacity: 1;
    transiton-property: opacity, bottom;
    transition-duration: .4s, .4s;
    animation-name: move2;
    animation-duration: 240s;
    animation-fill-mode: backwards;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    top: 537px;
}
body.night #banner_wave_2 {
    width: auto;
    height: 65px;
    _filter: alpha(opacity=80);
display: none;
    position: absolute;
    bottom: 0;
    width: 400%;
    left: -236px;
    z-index: 1;
    opacity: 1;
    transiton-property: opacity, bottom;
    transition-duration: .4s, .4s;
    animation-name: move2;
    animation-duration: 240s;
    animation-fill-mode: backwards;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    top: 537px;
}
body.night .parallax{
display:none
}
body.night .user-tools .menu-new{
    font-size: 12px!important;
    background:#FF3355;
    color: #fff!important;
    position: absolute;
    right: 12px;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 2px;
    margin-top: 2px;
    transform-origin:top top;
    transform: perspective(1px) scale(.74);
    font-style:inherit
}
body.night .write-thumb label {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
background:#fff;
    color: rgba(26,26,26,.2);
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    cursor: pointer;
    flex-flow: column;
}
/*黑夜模式结束*/

子主题的child.js加入代码

/*夜间模式开始*/(function(){
    if(document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") === ''){
        if(new Date().getHours() > 22 || new Date().getHours() < 6){
            document.body.classList.add('night');
            document.cookie = "night=1;path=/";
                $(lmtdcn).removeClass("bd-taiyang-");
            $(lmtdcn).addClass("bd-yewanshuimian");
           
        }else{
            document.body.classList.remove('night');
              $(lmtdcn).removeClass("bd-yewanshuimian");
            $(lmtdcn).addClass("bd-taiyang-");
            document.cookie = "night=0;path=/";
          
        }
    }else{
        var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
    if(night == '0'){
        document.body.classList.remove('night');
          $(lmtdcn).removeClass("bd-yewanshuimian");
            $(lmtdcn).addClass("bd-taiyang-");
          
    }else if(night == '1'){
        document.body.classList.add('night');
            $(lmtdcn).removeClass("bd-taiyang-");
            $(lmtdcn).addClass("bd-yewanshuimian");
         
        }
    }
    })();
    function switchNightMode(){
        var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
        if(night == '0'){
            document.body.classList.add('night');
            $(lmtdcn).removeClass("bd-taiyang-");
            $(lmtdcn).addClass("bd-yewanshuimian");
            document.cookie = "night=1;path=/"
          
        }else{
            document.body.classList.remove('night');
            $(lmtdcn).removeClass("bd-yewanshuimian");
            $(lmtdcn).addClass("bd-taiyang-");
            document.cookie = "night=0;path=/"
            
        }
    }
    // 页面宽度按钮
    (function(){
    if(document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") === ''){
        if(new Date().getHours() > 22 || new Date().getHours() < 6){
            document.body.classList.add('night');
                $(lmtdcn).removeClass("bd-taiyang-");
            $(lmtdcn).addClass("bd-yewanshuimian");
            document.cookie = "night=1;path=/";
        }else{
            document.body.classList.remove('night');
              $(lmtdcn).removeClass("bd-yewanshuimian");
            $(lmtdcn).addClass("bd-taiyang-");
            document.cookie = "night=0;path=/";
        }
    }else{
        var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
    if(night == '0'){
        document.body.classList.remove('night');
          $(lmtdcn).removeClass("bd-yewanshuimian");
            $(lmtdcn).addClass("bd-taiyang-");
    }else if(night == '1'){
        document.body.classList.add('night');
            $(lmtdcn).removeClass("bd-taiyang-");
            $(lmtdcn).addClass("bd-yewanshuimian");
        }
    }
    })();
    function switchwidth(){
        var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
        if(night == '0'){
            document.body.classList.add('night');
                $(lmtdcn).removeClass("bd-taiyang-");
            $(lmtdcn).addClass("bd-yewanshuimian");
            document.cookie = "night=1;path=/"
        }else{
            document.body.classList.remove('night');
              $(lmtdcn).removeClass("bd-yewanshuimian");
            $(lmtdcn).addClass("bd-taiyang-");
            document.cookie = "night=0;path=/"
        }
    }
 
/*夜间模式结束*/

有的用户浏览器闪白问题修改B2-header.php第16行

<body <?php body_class(b2_get_option('template_top','top_type')); ?>>

替换为

<?php
if ($_COOKIE['night']==1)
$fssp="night";
else 
$fssp="";
?>
<body <?php body_class($fssp); ?><?php body_class(b2_get_option('template_top','top_type')); ?>>

最后在网站根目录放入pic文件夹

2022年11月14日

钢之崛起|官方简体中文|支持键盘.鼠标.手柄

游戏介绍

1789 年，巴黎。路易十六携令其冷血机械部队，流血镇压法国大革命。在这款极具挑战的动作角色扮演游戏中，神秘的巧工机器人杰作——埃癸斯——必须独自对抗国王的部队，拯救历史。

游戏截图

版本介绍

v20221109|容量67GB|官方简体中文|支持键盘.鼠标.手柄

2022年11月13日
心灵健全神志清醒|官方简体中文

游戏介绍

《心灵健全》是一款富有想象力的第一人称心理恐怖游戏，有狂热的谜题，独特的BOSS战，以及由The Living Tombstone创作的原创音乐。在一个你似乎无法逃脱的地方–你自己的头脑–的内部运作中旅行。

游戏截图

中文设置

SETTINGS-Language-简体中文-E保存

版本介绍

v1.06豪华版|容量17.1GB|官方简体中文|支持键盘.鼠标.手柄

2022年11月13日
超萌的二次元动漫个人主页源码

效果图

超萌的二次元动漫个人主页源码纯html5网页模板+自适应，简约大气非常的萌~右键记事本即可修改里面的内容，上传服务器就能打开

2022年11月13日

【7B2主题美化】弹窗公告美化

效果图

放入主题的style.css文件中，或自行引入。

Css代码：

.gg-box .modal-content {
width: 28rem;
overflow: hidden
margin-top: 0;
}
.gg-box-title .gg-title {
width: 100%;
text-align: center;
padding: 0!important;
}
.modal-content .gg-box-title h2 {
font-size: 22px;
margin-bottom: 0;
text-align: center;
font-weight:bold;
}
.gg-box-title .gg-title span {
font-size: 14px;
color: rgba(255, 255, 255, 0.5);
}
.title-bg {
border: 0;
}
.modal-content .gg-title {
padding: 20px 30px 0px 30px;
}
.modal-content .gg-title a {
font-size: 16px;
border-bottom: 1px solid #eee;
padding-bottom: 20px;
display: block;
font-family: Arial;
text-decoration:none
}
.modal-content .gg-desc {
padding: 20px 30px;
font-size: 14px;
letter-spacing: .5px;
padding-bottom: 0;
}
.modal-content .gg-desc p {
color: #909399;
font-family: Arial;
background: #f8f8f8;
padding: 20px;
line-height: 24px;
}
.gg-button a {
border: 0;
display: inline-block;
padding: 8px 12px;
font-size: 14px;
line-height: 20px;
letter-spacing: .5px;
background-color: #206aff;
background-image: -webkit-gradient(linear, left top, right top, from(#006eff), to(#13adff));
background-image: -webkit-linear-gradient(left, #006eff, #13adff);
background-image: -o-linear-gradient(left, #006eff 0, #13adff 100%);
background-image: linear-gradient(90deg, #006eff, #13adff);
-webkit-box-shadow: 0 5px 10px 0 rgb(16 110 253 / 30%);
box-shadow: 0 5px 10px 0 rgb(16 110 253 / 30%);
}

2022年11月13日

【7B2主题美化】给首页添加个导航会员模块

效果图

右侧vip可以自动识别是否开通会员，附件下载并上传到网站根目录

以下代码放入后台-模块管理-自定义

<!-- 区块代码 开始 -->
<div id="home-row-qukuai" class="  home_row home_row_1  module-qukuai  " style="background-color:;"> 
   <div class="wrapper">
        <div class="home-row-left content-area "> 
            <div class="sort b2-radius" style="margin-top:0px ;">    
                <ul class="sort-config"> 
                    <li>
                                            <div class="sort-config-item">
                                            <img class="sort-config-icon" src="/img/2022040407423076.svg" alt="" />
                                            <a href="https://www.xgbke.com/" target="_blank"><p class="sort-config-title">区块高度
                                            <span class="go" style="background-color: #ff6000;">GO<i class="b2font b2-arrow-right-s-line"></i></span>
                                            </p> </a>
                                            <span class="sort-config-desc">后台可设置定位高度</span>
                                            </div></li> <li>
                                            <div class="sort-config-item">
                                            <img class="sort-config-icon" src="/img/2022040407423033.svg" alt="" />
                                            <a href="https://www.xgbke.com/" target="_blank"><p class="sort-config-title">区块颜色
                                            <span class="go" style="background-color: #5de000;">GO<i class="b2font b2-arrow-right-s-line"></i></span>
                                            </p> </a>
                                            <span class="sort-config-desc">本区块设置负数例如-60px</span>
                                            </div></li> <li>
                                            <div class="sort-config-item">
                                            <img class="sort-config-icon" src="/img/2022040407422988.svg" alt="" />
                                            <a href="https://www.xgbke.com/" target="_blank"><p class="sort-config-title">下方广告
                                            <span class="go" style="background-color: #ff6000;">GO<i class="b2font b2-arrow-right-s-line"></i></span>
                                            </p> </a>
                                            <span class="sort-config-desc">组和VIP组可以单独关闭</span>
                                            </div></li> <li>
                                            <div class="sort-config-item">
                                            <img class="sort-config-icon" src="/img/2022040407422990.svg" alt="" />
                                            <a href="https://www.xgbke.com/" target="_blank"><p class="sort-config-title">角标可设置
                                            <span class="go" style="background-color: #ff6000;">GO<i class="b2font b2-arrow-right-s-line"></i></span>
                                            </p> </a>
                                            <span class="sort-config-desc">角标颜色也可以设置哦</span>
                                            </div></li> <li>
                                            <div class="sort-config-item">
                                            <img class="sort-config-icon" src="/img/2022040407422937.svg" alt="" />
                                            <a href="https://www.xgbke.com/" target="_blank"><p class="sort-config-title">无忧售后
                                            <span class="go" style="background-color: #ff6000;">GO<i class="b2font b2-arrow-right-s-line"></i></span>
                                            </p> </a>
                                            <span class="sort-config-desc">保证放心购、安心用</span>
                                            </div></li>                 </ul> 
                                            <div class="sort-blocks"> 
                    <div class="bt-body"> 
                        <div class="containerrr"> 
                            <div class="onecad-quk-carousel"> 
                                <div class="itemss"> 
                                    <a class="card_ZQsT- b2-radius" href="https://www.xgbke.com/" target="_blank">
                                                                        <img src="/img/1646645863-a756b411d8cfd69.jpg">
                                                                        <div class="title_3qCGt">后台可添加</div> 
                                                                        <div class="tipss jiaobiao_color6">广告</div>
                                                                    </a><a class="card_ZQsT- b2-radius" href="https://www.xgbke.com/" target="_blank">
                                                                        <img src="/img/1628154884-a96bf386ea68fd1.png">
                                                                        <div class="title_3qCGt">角标可选择</div> 
                                                                        <div class="tipss jiaobiao_color6">广告</div>
                                                                    </a><a class="card_ZQsT- b2-radius" href="https://www.xgbke.com/" target="_blank">
                                                                        <img src="/img/1648712370-d59a15461c78f74.jpeg">
                                                                        <div class="title_3qCGt">组定位高度后台可调整</div> 
                                                                        <div class="tipss jiaobiao_color4">推荐</div>
                                                                    </a><a class="card_ZQsT- b2-radius" href="https://www.xgbke.com/" target="_blank">
                                                                        <img src="/img/1647488870-6fa6b58b4b1b751.jpg">
                                                                        <div class="title_3qCGt">本组后台可关闭</div> 
                                                                        <div class="tipss jiaobiao_color3">热门</div>
                                                                    </a><a class="card_ZQsT- b2-radius" href="https://www.xgbke.com/" target="_blank">
                                                                        <img src="/img/1634631547-a03889872f26e97.jpg">
                                                                        <div class="title_3qCGt">可独立显示上栏</div> 
                                                                        <div class="tipss jiaobiao_color3">热门</div>
                                                                    </a>                                </div> 
                            </div> 
                        </div> 
                    </div> 
                    <div class="srot-mine b2-radius"> 
                        <i class="srot-mine-bg"></i> 
                        <div class="sort-mine-wrap">
                            <div class="srot-mine-tit">
                                <img src="https://img.onecad.cn/wp-content/uploads/2022/01/20220114064641724.svg" alt="" class="srot-mine-ava" /> 
                                <span>开通会员全站素材无限制下载</span>
                            </div> 
                             
                    <div id="userDisplayName" class="srot-mine-vips">
                    <!-- 永久会员 --> 
                    <a href="./vips" target="_blank" class="sort-vips-item"> <img class="sort-vips-icon" src="//s.ibaotu.com/next/img/new/person.b254.png" alt=""> <p class="sort-vips-tit">永久会员</p> <p class="sort-vips-tit2"><span class="sort-vips-tit2-kt" v-if="userData && userData.lv.vip.lv == 'vip3'">已开通</span><span class="sort-vips-tit2-wk" v-else>未开通</span></p> </a> 
                    <!-- 一年会员 --> 
                    <a href="./vips" target="_blank" class="sort-vips-item"> <img class="sort-vips-icon" src="//s.ibaotu.com/next/img/new/ep.4814.png" alt=""> <p class="sort-vips-tit">年卡会员</p> <p class="sort-vips-tit2"><span class="sort-vips-tit2-kt"  v-if="userData && userData.lv.vip.lv == 'vip2'">已开通</span><span class="sort-vips-tit2-wk" v-else>未开通</span></p> </a> 
                    <!-- 月费会员 --> 
                    <a href="./vips" target="_blank" class="sort-vips-item"> <img class="sort-vips-icon" src="//s.ibaotu.com/next/img/new/create.503f.png" alt=""> <p class="sort-vips-tit">月卡会员</p> <p class="sort-vips-tit2"><span class="sort-vips-tit2-kt"  v-if="userData && userData.lv.vip.lv == 'vip1'">已开通</span><span class="sort-vips-tit2-wk" v-else>未开通</span></p> </a> 
                    <!-- 体验会员 --> 
                    <a href="./vips" target="_blank" class="sort-vips-item index-bjq-a"><img class="sort-vips-icon" src="//s.ibaotu.com/next/img/new/design.16dc.png" alt=""><p class="sort-vips-tit index-bjq-txt">体验会员</p><p class="sort-vips-tit2"><span class="sort-vips-tit2-kt"  v-if="userData && userData.lv.vip.lv == 'vip0'">已开通</span><span class="sort-vips-tit2-wk" v-else>未开通</span></p></a>
                    </div>                        </div> 
                    </div> 
                </div> 
                            </div>
        </div>
    </div>
</div>
<!-- 区块代码结束 -->

以下代码放入css样式

/*区块*/.sort {
    position: relative;
    z-index: 3;
    padding: 26px;
    background: #fff;
    /* border: 1px solid #797c80; */    /* -webkit-box-shadow: 0 40px 75px 0 rgba(57,60,67,.08); */    /* box-shadow: 0 40px 75px 0 rgba(57,60,67,.08); */    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.sort-config {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.main {
    width: 1410px;
    margin: 0 auto;
    padding-bottom: 40px;
}
.sort-config>li {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow: hidden;
    height: 100%;
}
.ibanner-tips-float {
    position: absolute;
    top: -70px;
    left: 1096px;
    z-index: 24;
}
.sort-config-item {
    display: block;
    height: 100%;
}
.sort-config-item img {
    float: left;
    width: 62px;
    height: 62px;
    margin-right: 12px;
}
.sort-config-title {
    line-height: 34px;
    font-size: 18px;
    font-weight: 600;
    color: #2d2d2d;
    -webkit-transition: .3s;
    transition: .3s;
}
.sort-config-desc {
    float: left;
    line-height: 22px;
    font-size: 14px;
    color: #8e8e8e;
}
.sort-blocks {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    height: 100%;
    margin-top: 35px;
}
.sort-blocks-item {
    position: relative;
    overflow: hidden;
    width: 214px;
    height: 100%;
    background: #f7f9fa;
    border-radius: 14px;
}
.sort-blocks-item .blocks-item-wrap {
    -webkit-transition: .3s;
    transition: .3s;
    -webkit-filter: none;
    filter: none;
}
.sort-blocks-icon {
    display: block;
    width: 60px;
    height: 47px;
    margin: 18px auto 15px;
    background-repeat: no-repeat;
    background-size: cover;
}
.sort-blocks-title {
    line-height: 22px;
    font-size: 22px;
    font-weight: 600;
    color: #2d2d2d;
    letter-spacing: 1px;
    text-align: center;
}
.sort-mine-wrap img {
    display: flex;
    width: auto;
}
.sort-config-title .go {
    border-radius: 4px;
    color: #ffffff;
    font-size: 13px;
    -webkit-transform: scale(.9);
    -ms-transform: scale(.9);
    transform: scale(.9);
    font-weight: normal;
    padding: 2px 5px;
    position: absolute;
    line-height: 15px;
    margin-left: 5px;
    cursor: pointer;
    text-transform: uppercase;
    vertical-align: middle;
    margin-top: 7px;
}
.sort-blocks-item .blocks-hover, .sort-blocks-item .blocks-hover-title {
    position: absolute;
    top: 0;
    width: 100%;
    color: #fff;
    text-align: center;
    line-height: 22px;
}
.sort-blocks-item .blocks-hover {
    left: 0;
    height: 100%;
    padding-top: 22px;
    font-size: 14px;
    background: rgba(0,0,0,.4);
    -webkit-transition: .3s;
    transition: .3s;
    opacity: 0;
}
.sort-blocks-item .blocks-hover-tit {
    line-height: 18px;
    font-size: 18px;
}
.sort-blocks-item .blocks-hover-line {
    width: 158px;
    height: 1px;
    margin: 12px auto 8px;
    background: -webkit-gradient(linear,left top,right top,from(hsla(0,0%,100%,0)),color-stop(30%,hsla(0,0%,100%,.7)),color-stop(70%,hsla(0,0%,100%,.7)),to(hsla(0,0%,100%,.1)));
    background: linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.7) 30%,hsla(0,0%,100%,.7) 70%,hsla(0,0%,100%,.1));
}
.srot-mine {
    position: relative;
    width: 376px;
    background: -webkit-gradient(linear,left top,right top,from(#fdf8eb),to(#feeec3));
    background: linear-gradient(90deg,#fdf8eb,#feeec3);
    height: 180px;
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 4%);
}
.srot-mine-bg {
    position: absolute;
    top: 13px;
    right: -13px;
    width: 118px;
    height: 78px;
    background: url(./img/sort_zuanshi.png) no-repeat;
    background-size: cover;
}
.sort-mine-wrap {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    padding: 12px 16px 15px;
}
.srot-mine-tit {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    line-height: 25px;
}
.srot-mine-ava {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}
.srot-mine-tit>span {
    margin-left: 9px;
    font-size: 15px;
    font-weight: 600;
    color: #613c14;
}
.srot-mine-vips {
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    width: 337px;
    margin: 15px 0px 5px;
}
.sort-vips-item {
    display: block;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: center;
}
.sort-vips-icon {
    display: block;
    width: 32px;
    height: 36px;
    margin: 0 auto;
    -webkit-transition: .3s;
    transition: .3s;
    margin-left: 30px;
}
.sort-vips-tit {
    margin: 15px 0px;
    line-height: 12px;
    font-size: 13px;
    color: #613c14;
    margin-left: 10px;
}
.sort-vips-tit2-kt {
    margin-top: 10px;
    line-height: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 25px;
    color: #ffffff;
    border-radius: 33px;
    margin-right: 10px;
    font-size: 14px;
    background-image: linear-gradient(90deg,#ffc046,#ff7d04);
    margin: 10px 0px 0px 9px;
}
.sort-vips-tit2-wk {
    margin-top: 10px;
    line-height: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 25px;
    color: #ffffff;
    border-radius: 33px;
    margin-right: 10px;
    font-size: 14px;
    opacity: 0.5;
    background: linear-gradient(to bottom, #323232 0%, #3F3F3F 40%, #1C1C1C 150%), linear-gradient(to top, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.25) 200%); background-blend-mode: multiply;
    margin: 10px 0px 0px 9px;
}
.bt-body {
    padding-bottom: 0px;
    background: transparent;
    width: calc(100% - 376px);
}
.b-boxs .video .s-pic{height: 189px;}
.b-boxs .video .video-view {height: 186px;width: 337px; overflow: hidden; cursor: pointer;display: block;}
.b-boxs .video:hover .video-view .img-none{display: none;}
.b-boxs .video .video-view video{width: 337px;}
.b-boxs .video:hover .video-view video{display: block;}
.b-boxs .video .mark{height: 189px; display: none;}
.b-boxs .video:hover .mark{display: none;}
.b-boxs .video .v-down{
    position: absolute;
    top: 12px;
    left: 57%;
    z-index: 2;
    margin-left: 65px;
    padding-left: 21px;
    width: 45px;
    height: 31px;
    border-radius: 2px;
    background: url(./img/video.png) -8px -77px no-repeat #007aff;
    color: #fff;
    font-size: 20px;
    font-size: 14px;
    line-height: 31px;
    opacity: 0;
    cursor: pointer;
    -moz-opacity: 0;
    -khtml-opacity: 0;
}
.b-boxs .video .v-down:hover {
    background: url() -5px -77px no-repeat #6e91e6;
}
.b-boxs .video .v-collect{
    width: 31px;
    height: 31px;
    line-height: 31px;
    position: absolute;
    left: 58%;
    top: 12px;
    margin-left: 23px;
    color: #333;
    font-size: 20px;
    border-radius: 2px;
    z-index: 2;
    background: url(./img/video.png) -11px 5px no-repeat #fff;
    padding-left: 0px;
    cursor: pointer;
    filter: alpha(opacity=0);
    ilter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
    font-size: 17px;
    letter-spacing: 7px;
}
.b-boxs .video:hover .v-collect,.b-boxs .video:hover .v-down{
    filter: alpha(opacity=1);
    ilter: alpha(opacity=1);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
}
.b-boxs .video .chosed{
    background: url(./img/video.png) -11px -36px no-repeat #fff;
}
.b-boxs .video .title {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 316px;
    height: 30px;
    line-height: 30px;
    color: #ffffff;
    text-align: left;
    z-index: 1;
    overflow: hidden;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    font-size: 12px;
    background: #00000075;
    background-color: #1677ff00;
    background-image: linear-gradient(-90deg, #00000000, #000000);
}
.b-box .audio-box {
    width: 340px;
    height: 160px;
    float: left;
    margin-right: 16px;
    margin-bottom: 16px;
    margin-top: 0px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0px 9px rgba(0,0,0,.1);
    background: #ffffff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    border-radius: 10px;
}
.b-boxs .video:hover  .video-bq,.b-boxs .video:hover .title{
    display: none;
}
.b-boxs .video:hover .mc-bottom{
    display:none;
}
.b-boxs .video .mc-bottom{
    display: inline-block;
    position: absolute;
    width: 100%;
    height: 32%;
    left: 0;
    bottom: 0;
    background: #000;
    opacity: .4 \9 \0;
    background: -moz-linear-gradient(bottom, rgba(0, 0, 0, .4) 0, transparent 100%);
    background: -webkit-gradient(linear, bottom, top, color-stop(0, rgba(0, 0, 0, .4)), color-stop(100%, transparent));
    background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .4) 0, transparent 100%);
    background: -o-linear-gradient(bottom, rgba(0, 0, 0, .4) 0, transparent 100%);
    background: -ms-linear-gradient(bottom, rgba(0, 0, 0, .4) 0, transparent 100%);
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .4)), to(transparent));
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(0, 0, 0, .4)), to(transparent));
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(0, 0, 0, .4)), to(transparent));
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(0, 0, 0, .4)), to(transparent));
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(0, 0, 0, .4)), to(transparent));
    background: linear-gradient(to top, rgba(0, 0, 0, .4) 0, transparent 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#000000, endColorstr=#ffffff);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#000000, endColorstr=#ffffff)";
}
.good-ppt {
    width: 100%;
}
.topic-title {
    height: 41px;
    color: #484747;
    text-align: left;
}
.wlimits {
    margin-right: -59px;
}
.topic-title .jptitle {
    display: inline-block;
    width: 280px;
    color: #000;
    letter-spacing: 2px;
    font-size: 24px;
}
.topic-title .jptitle .shiping {
    display: inline-block;
    width: 87px;
    height: 63px;
    background: url(../image/tb.png) 0px -345px no-repeat;
    vertical-align: -23px;
}
.topic-title ul {
    display: inline-block;
    float: right;
}
.topic-title ul li {
    display: inline-block;
}
.topic-title ul li a {
    display: inline-block;
    margin-right: 6px;
    padding: 0 10px;
    height: 35px;
    /* border: 1px solid #e5e5e5; */    /* background: #fff; */    color: #606060;
    font-size: 14px;
    line-height: 35px;
}
.topic-title ul li em {
    display: inline-block;
    height: 14px;
    width: 1px;
    background: #b7b7b7;
    vertical-align: -2px;
}
.b-boxs {
    margin-right: -16px;
    overflow: hidden;
}
.b-boxs .s-box {
    width: 337px;
    height: auto;
    float: left;
    margin-right: 19px;
    margin-bottom: 36px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 3px 9px rgba(0,0,0,.1);
    background: #ffffff;
}
.b-boxs .s-box .s-pic {
    width: 100%;
    height: 407px;
}
.lazy {
    display: block;
    width: 100%;
    height: 100%;
}
@media screen and (max-width: 768px){
.flickity-enabled.is-draggable {
    margin-top: 0px;
}
}
.b2-menu-4 .sub-menu-0 li ul a:hover {
    font-weight: 500; 
    border-radius: 3px;
    color: #ff416c;
}
.b2-menu-4 .sub-menu-0 li ul a {
    font-size: 16px;
    font-weight: 400;
    color: #333333;
    padding: 8px 0;
    display: flex;
    align-items: center;
    margin-top: 0px;
}
.containerrr { margin: 0px auto;width:100%; }
@media screen and (max-width: 1366px) {
.containerrr {
    margin: 0px auto;
    width: 830px;
}
.srot-mine {
    width: 355px;
}
}
.containerrr .itemss a {
    display: inline-block;
    margin-right: 16px;
    width: calc(20% - 16px);
    height: 180px;
    text-align: center;
}
.card_ZQsT- {
    height: 192px;
    width: 128px;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    white-space: normal;
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 4%);
    background: #FFFFFF;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    padding: 0px 0 16px 0;
    margin-right: 16px;
    text-decoration: none;
    transition: all 0.3s;
}
.card_ZQsT-:hover {
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    white-space: normal;
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 4%);
    background: #FFFFFF;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    padding: 0px 0 16px 0;
    margin-right: 16px;
    text-decoration: none;
    transform: translateY(-3px);
}
.card_img{
    display: block;
    height: 180px;
}
.card_ZQsT- .title_3qCGt {
    font-size: 14px;
    color: #222222;
    height: 35px;
    background-color: #fff;
    line-height: 35px;
    width: 100%;
    position: absolute;
    display: block;
    margin-top: -35px;
}
.card_ZQsT- img{
    height: 180px;
    width: 100%;
}
.card_ZQsT- .year-tag_3Iqeg {
    height: 19px;
    min-width: 52px;
    width: fit-content;
    max-width: 100%;
    overflow: hidden;
    position: absolute;
    top: 6px;
    left: 6px;
    text-align: center;
    line-height: 19px;
    font-size: 12px;
    color: #FFFFFF;
    box-sizing: border-box;
    padding: 0 8px;
    border-radius: 10px;
}
.huodong{background:#0693e3}
.remen{background:#fcb900}
.jingping{background:#cf2e2e}
.guanggao{background:#00d084}
.tuijain{background:#ff6900}
.yuliu{background:#0693e3}
.onecad-quk-carousel .itemss {
white-space: nowrap;
width: 100%;
display: flex;
-webkit-overflow-scrolling: touch;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    justify-content: space-between;
}
.onecad-quk-carousel .itemss::-webkit-scrollbar {
display: none;
}

以下代码放入child.js

//首页是否购买VIP判断开始
var qukuai = new Vue({
	el:'.sort-mine-wrap',
	data:{
	},
	computed:{
        userData(){
            return this.$store.state.userData;
        }
    }
})
//首页是否购买VIP判断结束

2022年11月11日

【7B2主题美化】给导航菜单添加彩色渐变的文字

效果图

以下代码放到你的菜单

<span class="meihua">你的菜单名称</span>

以下代码放入css样式

.meihua {
background: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 33.3%, rgba(252, 176, 69, 1) 66.6%, rgba(131, 58, 180, 1) 100%);
-webkit-background-clip: text;
color: transparent !important;
background-size: 300% 100%;
animation: text 4s infinite linear
}
@media (max-width:768px) {
span.ua-info {
display: none
}
.comment-author .user-title {
width: 40% !important
}
}
.comment-author .user-title {
font-size: 13px;
background: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 33.3%, rgba(252, 176, 69, 1) 66.6%, rgba(131, 58, 180, 1) 100%);
-webkit-background-clip: text;
color: transparent !important;
background-size: 300% 100%;
animation: text 4s infinite linear
}
@keyframes text {
0% {
background-position: 0 0
}
100% {
background-position: -150% 0
}
}
.b2-qr-code-fill {
background: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 33.3%, rgba(252, 176, 69, 1) 66.6%, rgba(131, 58, 180, 1) 100%);
-webkit-background-clip: text;
color: transparent !important;
background-size: 300% 100%;
animation: text 4s infinite linear
}

2022年11月11日

超好看的二次元主页[附美化教程]

大家好，我是李初一，本次给大家介绍一款我个人十分喜欢的二次元个人主页包括我个人进行的一些美化思路，推荐大家自己手动加入禁用右键的代码，没有右键功能会比较有高级感一点

这次给大家带来的是这样一款的二次元风格个人主页背景为幻灯片或视频
演示地址：https://dg.zyw.one/
演示地址我做了简单的对接，对接了OneTool多平台助手所以会多三个按钮以及小部分对接后的数据，本篇文章将会绕过OneTool后台对接

[b2_file link=”https://lichuyi.lanzoum.com/ifwcS0g1ew1a” name=”二次元个人主页” pass=”” code=””]
原本是做给扒站大哥的，但是我网站做了部分处理，扒站会缺失部分代码，大家无需在意直接下载即可

正文

下载完源码，将源码解压至桌面，这里建议大家先创建一个文件夹，解压至文件夹内

一共34个文件，900k左右的内存，双击index.html查看一下源码首次加载会比较慢一点

大家先看一下页面样式以及部分细节处

页面左上角logo很丑，引导页三个字很突兀，全局性的异次元logo都很丑，生日倒计时不会动

首先移除logo，不需要移除的小伙伴可以在images文件夹内替换图片为自己的

使用NotePad++或Visual Studio Code打开index.html（两款软件都是编辑器，我个人比较喜欢notepad可能是用习惯了）

这里使用Visual Studio Code给大家教学，打开文件先修改文字信息链接啥的，这一点本文不做教学了，与美化无关

移除页内所有logo（不需要的爷们儿可以跳过这里）

Ctrl+F搜索logo

把你所看到的带logo的代码全部注释掉或者删掉

移除以后站点的细节方面看起来就会比较舒适了

修复生日计时

这里永远是373天从来都不会动，初一的演示页都搭建了一个月了都没变化过

本以为是源码问题，结果换了好几个版本都不会动，也找不到作者GitHub开源的地址

所以这里教大家手动修复/修改一下

首先，倒计时我是不会啦，但是让他计时还是很简单的

我们仅需引入JS

<!--运行时长JS - 初一资源网WWW.ZYW.ONE-->
    <script>
    var now = new Date(); 
    function createtime() { 
                          //月、日、年，小时、分、秒
        var grt= new Date("11/15/2022 00:00:00");//此处修改你的建站时间或者网站上线时间 
        now.setTime(now.getTime()+250); 
        days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); 
        hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours); 
        if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum); 
        mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;} 
        seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum); 
        snum = Math.round(seconds); 
        <!-- 加判断条件避免出现60秒的情况 -->
  if(snum==60){
      snum=0;
    }

  if(String(snum).length ==1 ){snum = "0" + snum;} 
        document.getElementById("timeDate").innerHTML = " "+dnum+"  "; //天数
        document.getElementById("times").innerHTML = hnum + "  "; //小时
        document.getElementById("times2").innerHTML = mnum + "  "; //分
    } 
setInterval("createtime()",250);
</script>

注意哦，这里是在HTML里引入JS而不是创建JS文件，如果要用文件形式大家自己修改调整一下即可

位于</head>之前或者</body>之前都可以，看你个人喜好

然后在插入代码到下面这三个位置替换那几个数字

<span id="times">载入时...</span>
<span id="timeDate">载入天数...</span>
<span id="times2">载入分...</span>

如果没有生效就是代码书写的问题则将这里全代码替换为初一的

<div class="section page-when page page-cent" id="s-when">
                <section class="content">
                    <div class="clock clock-countdown">
            <div class="site-config" data-date="7/18/2021 00:00:00" data-date-timezone="+0"></div>
            <header class="header">
              ? Zy<strong> 初一云已完美运营 </strong> ?
            </header>
                        <div class="elem-left">
                            <div class="digit hours"><span id="times">载入时...</span></div>
                            <div class="text">时</div>
                        </div>            
                        <div class="elem-center">
              <!-- Optional text at top or image logo -->
              <span class="text top">WWW.ZYW.ONE</span>
              <!-- Optional logo at top -->
                            <div class="digit days"><span id="timeDate">载入天数...</span></div>
                            <div class="text">日</div>
                        </div>
                        <div class=" elem-right">
                            <div class="digit minutes"><span id="times2">载入分...</span></div>
                            <div class="text">分</div>
                        </div>

随后便得到了这样的效果

修改英文字体样式

先搜索style-font1

查看其上下有没有类似的代码，如果有则替换成下方的，没有就加上

<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css">

字体为谷歌字体，如不显示多刷新几次即可，国内服务器估计是挺悬的可以下载这个字体进行本地引用

[b2_file link=”https://lichuyi.lanzoum.com/ibHlb0g3ri2h” name=”谷歌字体” pass=”” code=””]

然后打开style-font1.css

将这里替换成Pacifico

保存刷新查看就得到了好看的英文字体啦

首页标语发光

首先在文件夹更目录创建style.css并写入以下代码

    /* 初始化 */    margin: 0;
    padding: 0;
}
body{
    /* 100%窗口高度 */    min-height: 100vh;
    /* 弹性布局 水平+垂直居中 */    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #06252e;
}
.container{
    /* 投影效果 */    -webkit-box-reflect: below 1px linear-gradient(transparent,rgba(0,0,0,0.2));
}
h2{
    color: #fff;
    font-size: 96px;
    /* 字间距 */    letter-spacing: 15px;
    /* 转大写 */    text-transform: uppercase;
    text-align: center;
    line-height: 76px;
    outline: none;
    /* 自定义属性--c，可通过var函数对其调用 */    --c:lightseagreen;
    /* 调用自定义属性--c，设置文字阴影（发光效果） */    text-shadow: 0 0 10px var(--c),
    0 0 20px var(--c),
    0 0 40px var(--c),
    0 0 80px var(--c),
    0 0 160px var(--c);
    /* 执行动画：动画名 时长 线性的 无限次播放 */    animation: animate 5s linear infinite;
}

/* 定义动画 */@keyframes animate {
    to{
        /* 色相旋转滤镜（设置度数可改变颜色） */        filter: hue-rotate(360deg);
    }
}

然后再HTML内加入

<link rel="stylesheet" href="style.css">

保存刷新即可

2022年11月11日

萌翻少女心的发光果冻泡泡

效果图

萌翻少女，，，！初一觉得不大可能，萌翻一片少男倒是挺有可能，可用作与跳转页以及网站预加载动画

HTML

<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>萌翻少女心的发光果冻泡泡</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <div class="bubble"></div>
        <div class="shadow"></div>
    </div>
</body>

</html>

CSS

*{
    margin: 0;
    padding: 0;
}
body{
    /* 100%窗口高度 */    height: 100vh;
    /* 弹性布局 居中显示 */    display: flex;
    justify-content: center;
    align-items: center;
    /* 渐变背景 */    background: linear-gradient(150deg,#d299c2,#fef9d7);
    /* 溢出隐藏 */    overflow: hidden;
}
.container{
    width: 200px;
    height: 200px;
    /* 相对定位 */    position: relative;
}
/* 泡泡 */.bubble{
    width: 100%;
    height: 100%;
    /* 径向渐变 */    background: radial-gradient(circle at 75% 30%,#fff 5px,#ff21c0 8%,#5b5b5b 60%,#ff21c0 100%);
    border-radius: 50%;
    /* 阴影 */    box-shadow: inset 0 0 20px #fff,
        inset 10px 0 46px #eaf5fc,
        inset 80px 0 60px #efcde6,
        inset -20px -60px 100px #f9f6de,
        inset 0 50px 140px #f9f6de,
        0 0 90px #fff;
    /* 执行动画：动画名 时长 加速后减速 无限次播放 */    animation: bubble 4s ease-in-out infinite;
}
.shadow{
    background-color: rgba(0,0,0,0.15);
    width: 150px;
    height: 40px;
    border-radius: 50%;
    /* 绝对定位 */    position: absolute;
    left: 50%;
    margin-left: -75px;
    bottom: -100px;
    /* 一点点模糊效果 */    filter: blur(1px);
    /* 执行动画：动画名 时长 加速后减速 无限次播放 */    animation: shadow 4s ease-in-out infinite;
}

/* 定义动画 *//* 泡泡浮动动画 */@keyframes bubble {
    0%,100%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(-80px);
    }
}
/* 投影动画 */@keyframes shadow {
    0%,100%{
        transform: scale(0.5);
    }
    50%{
        transform: scale(1);
    }
}

2022年11月10日

The7v.11.0.3版本中文汉化 WordPress主题企业外贸商城

密钥：集成密钥，可以自己在线安装更新插件，导入demo，在线更新主题
编码格式：前端Html5+css3响应式，后台PHP，数据库mysql主机要求：支持php+mysql
汉化程度：后台和所有插件95%汉化
模板用途：各类企业、新闻博客、产品展示、电子商务、移动互联网等
包含插件：Visual composer可视化前端编辑器、Ultimate_VC_Addons交互特效插件、Revslider幻灯片、Layerslider层幻灯片、pricing价格表单、woocommerce电子商务、云典编辑器拓展等插件。
功能简介：布局上支持左右和上下布局；颜色上支持无限自定义色彩；风格上支持全宽、常规风格；配色模板有100种；后台管理方面支持修改网站任何区域，无需编程；可视化编辑器可以让您自定义网站的布局，实现各种各样的自定义网站风格；总之，用这款模板设计网站，只要你想得到，就能够做得出。

2022年11月6日

博客

效果图

教程

游戏介绍

游戏截图

版本介绍

游戏介绍

游戏截图

中文设置

版本介绍

效果图

效果图

Css代码：

效果图

以下代码放入后台-模块管理-自定义

以下代码放入css样式

以下代码放入child.js

效果图

以下代码放到你的菜单

以下代码放入css样式

正文

首先移除logo，不需要移除的小伙伴可以在images文件夹内替换图片为自己的

移除页内所有logo（不需要的爷们儿可以跳过这里）

修复生日计时

修改英文字体样式

首页标语发光

效果图

HTML

CSS