前言

给你的B2主题网站底部，增加一个动态字母的美化效果。

预览图

教程

• 后台底部模块设置

底部第一层背景颜色1a1a1a

底部第二层背景颜色232323

底部背景图片上传到你的服务器备用：

头部HTML标签（新建了个icon库存储新图标）

<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="//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="//at.alicdn.com/t/font_3133075_wsm2usco9v.js"></script>
<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_3133075_wsm2usco9v.css" />

外观小工具底部加上自定义html代码

子主题style.css

/*底部字母闪动开始*/
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
.sbkk-yj {
    text-align:center
}
.sbkk-yj p {
    text-transform:uppercase;
    letter-spacing: .45em;
    display:inline-block;
    margin-left: 2px;
}
.sbkk-yj p span {
    font:700 4em/1"Oswald", sans-serif;
    letter-spacing:0;
    padding:.25em 0 .325em;
    display:block;
    margin:0 auto;
    text-shadow:0 0 80px rgba(255, 255, 255, .5);
    background:url(https://lmtd.cn/pic/sbkk.png) repeat-y;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    -webkit-animation:aitf 80s linear infinite;
    -webkit-transform:translate3d(0, 0, 0);
    -webkit-backface-visibility:hidden
}
@-webkit-keyframes aitf {
    0% {
        background-position:0 50%
    }
    100% {
        background-position:100% 50%
    }
}
.ffooter-menus {
    display:none
}
@media (min-width:1024px) {
    .ffooter-menus {
        display:block
    }
}
.ffooter-menus a {
    color:#676b6f
}
.ffooter-menus a:hover {
    color:#fff
}
.ffooter-menus .menus .menu-div.menu-1, .footer-menus .menus .menu-div.menu-2 {
    display:block
}
@media (min-width:1250px) {
    .ffooter-menus .menus .menu-div {
        width:33.3333%
    }
    .ffooter-menus .menus .menu-div.menu-3 {
        display:block
    }
}
@media (min-width:1330px) {
    .ffooter-menus .menus .menu-div {
        width:25%;
        display:block
    }
}
.ffooter-menus .menus .menu-div h2 {
    font-size:18px;
    color:#c6c7c9;
    margin-bottom:20px;
    font-weight:400
}
.ffooter-menus .menus .menu-div li {
    line-height:1.5;
    margin-bottom:10px
}
.ffooter-menus .ewms {
    width:278px;
    position:relative;
    color:#949498;
   margin:0 auto;
}
.ffooter-menus .ewms .like {
    text-align:center
}
.ffooter-menus .ewms .like strong {
    color:#ff7300;
    font-size:54px;
    line-height:1.24;
    font-family:Impact;
    font-weight:400
}
.ffooter-menus .ewms .like h3 {
    font-size:14px;
    font-weight:400;
    line-height:1.1
}
.ffooter-menus .ewms li {
    float:left;
    width:33.3333%;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    display:inline;
    position:relative;
    line-height:1.3;
    margin-top:-8px
}
.ffooter-menus .ewms li:hover .ewm-content {
    visibility:visible;
    bottom:100%;
    opacity:1;
    border-radius: 8px;
}
.ffooter-menus .ewms .ico {
    font-size:46px;
    cursor:pointer;
    -webkit-transition:all .2s;
    -o-transition:all .2s;
    transition:all .2s
}
.ffooter-menus .ewms .ico:hover {
    color:#fff
}
.ffooter-menus .ewms .ico i {
    display:block
}
.ffooter-menus .ewms h4 {
    font-size:12px;
    font-weight:400;
    margin:0
}
.ffooter-menus .ewms .ewm-content {
    position:absolute;
    left:50%;
    bottom:200%;
    background:#1d1f20;
    -webkit-border-radius:3px;
    border-radius:3px;
    -webkit-box-shadow:0 16px 32px 0 rgba(0, 0, 0, .1);
    box-shadow:0 16px 32px 0 rgba(0, 0, 0, .1);
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    width:330px;
    -webkit-transform:translate(-50%);
    -ms-transform:translate(-50%);
    transform:translate(-50%)
}
.ffooter-menus .ewms .ewm-content:before {
    content:"";
    display:block;
    position:absolute;
    margin-left:-6px;
    left:50%;
    top:100%;
    width:0;
    height:0;
    border-left:6px solid rgba(0, 0, 0, 0);
    border-right:6px solid rgba(0, 0, 0, 0);
    border-top:6px solid #fff
}
@media (min-width:1024px) {
    .ffooter-menus .ewms .ewm-content.ewm-douyin, .ffooter-menus .ewms .ewm-content.ewm-wechat {
        left:auto;
        right:0;
        -webkit-transform:translate(0);
        -ms-transform:translate(0);
        transform:translate(0)
    }
    .ffooter-menus .ewms .ewm-content.ewm-douyin:before, .ffooter-menus .ewms .ewm-content.ewm-wechat:before {
        left:auto;
        right:30px
    }
    .ffooter-menus .ewms .ewm-content.ewm-douyin {
        -webkit-transform:translate(70px);
        -ms-transform:translate(70px);
        transform:translate(70px)
    }
    .ffooter-menus .ewms .ewm-content.ewm-douyin:before {
        right:100px
    }
}
.ffooter-menus .ewms .ewm-content.ewm-douyin {
    width:400px
}
.ffooter-menus .ewms .ewm-content.ewm-douyin .ewm-main .thumb-div {
    width:160px
}
.ffooter-menus .ewms .ewm-main {
    padding:40px 25px 40px 30px;
    text-align:left
}
.ffooter-menus .ewms .ewm-main .fl {
    float:left
}
.ffooter-menus .ewms .ewm-main .fr {
    float:right
}
.ffooter-menus .ewms .ewm-main .thumb-div {
    width:120px;
    margin-right:30px;
    background:#fff
}
.ffooter-menus .ewms .ewm-main .thumbs {
    padding-top:100%
}
.ffooter-menus .ewms .ewm-main h4 {
    font-size:14px;
    font-weight:400;
    color:#f5f5f5;
    line-height:1.714;
    margin-top:4px
}
.ffooter-menus .ewms .ewm-main h4 span {
    color:#3860f4
}
.ffooter-menus .ewms .ewm-main a {
    color:#ff3401
}
.ffooter-menus .ewms .ewm-main a:hover {
    color:#ff7300
}
.ffooter-menus .ewms .ewm-main h5 {
    font-weight:400;
    font-size:12px;
    color:#888
}
.ffooter-menus .ewms .ewm-douyin .ewm-main {
    padding-left:0;
    padding-right:0;
    text-align:center
}
.ffooter-menus .ewms .ewm-douyin .ewm-main .thumb-div {
    margin:0 auto
}
.ffooter-menus .ewms .ewm-douyin .ewm-douyin-1, .ffooter-menus .ewms .ewm-douyin .ewm-douyin-2 {
    width:50%
}
.ffooter-menus .ewms .ewm-douyin .ewm-douyin-1 {
    position:relative
}
.ffooter-menus .ewms .ewm-douyin .ewm-douyin-1:after {
    content:"";
    display:block;
    position:absolute;
    right:0;
    top:10%;
    width:1px;
    height:80%;
    background:#1d1f20
}
.ffooter-menus .ewms .ewm-weibo {
    width:520px;
    -webkit-transform:translate(-340px);
    -ms-transform:translate(-340px);
    transform:translate(-340px)
}
.ffooter-menus .ewms .ewm-weibo:before {
    left:340px
}
.ffooter-menus .ewms .ewm-weibo .ewm-main {
    padding:20px 20px 0
}
.ffooter-menus .ewms .ewm-weibo .ewm-main .items {
    overflow:hidden;
    margin:0 -10px;
    margin-left: 31px;
}
.ffooter-menus .ewms .ewm-weibo .ewm-main .items .item {
    float:left;
    width:45%;
    padding:0 10px 20px
}
.ffooter-menus .ewms .ewm-weibo .ewm-main .items .item a {
    display:block;
    background:#333638;
    -webkit-border-radius:4px;
    border-radius:4px;
    position:relative;
    padding:18px 16px 18px 44px;
    letter-spacing:0;
    color:#f5f5f5
}
.ffooter-menus .ewms .ewm-weibo .ewm-main .items .item a .item-ico {
    display:block;
    position:absolute;
    left:20px;
    top:18px;
    background:#9199a1;
    color:#fff;
    font-size:12px;
    font-family:ArialMT, Arial;
    width:18px;
    height:18px;
    text-align:center;
    line-height:18px;
    -webkit-border-radius:100%;
    border-radius:100%
}
.ffooter-menus .ewms .ewm-weibo .ewm-main .items .item a h2 {
    font-size:14px;
    font-weight:400;
    margin-bottom:6px;
    height:1.5em;
    overflow:hidden
}
.ffooter-menus .ewms .ewm-weibo .ewm-main .items .item a h4 {
    font-size:12px;
    font-weight:400;
    color:#b2b2b2;
    height:1.5em;
    overflow:hidden
}
.ffooter-menus .ewms .ewm-weibo .ewm-main .items .item a:hover {
    background:#3860f4;
    color:#fff
}
.ffooter-menus .ewms .ewm-weibo .ewm-main .items .item a:hover h4 {
    color:#fff
}
.ffooter-menus .ewms .ewm-weibo .ewm-main .items .item a:hover .item-ico {
    background:#fff;
    color:#3860f4
}
.ffooter-menus .status {
    text-align:center;
    color:#949498
}
.ffooter-menus .status h2 {
    font-family:Impact;
    font-weight:400;
    font-size:54px;
    color:#ff7300;
    letter-spacing:0
}
.ffooter-menus .status h3 {
    font-weight:400;
    font-size:14px
}
.ffooter-menus .ewms ul {
    text-align:center
}
@media (min-width:768px) {
    .container12 {
        overflow:visible;
        max-width:1330px
    }
}
.container12:after, .container12:before {
    content:"";
    height:0;
    line-height:0;
    display:block;
    visibility:none;
    clear:both
}
 
.clearfix:after, .clearfix:before {
    content:"";
    height:0;
    line-height:0;
    display:block;
    visibility:none;
    clear:both
}
.thumbs {
    display:block;
    width:100%;
    height:0;
    padding-top:66.7%;
    background-position:50%;
    background-repeat:no-repeat;
    -webkit-background-size:cover;
    background-size:cover;
    background-color:rgba(0, 0, 0, 0);
    position:relative;
    overflow:hidden
}
.thumbs, a, a:active, a:visited {
    -webkit-transition:all .2s;
    -o-transition:all .2s;
    transition:all .2s
}
.ewn-hide, .show {
    -webkit-transition:all .2s;
    -o-transition:all .2s;
    transition:all .2s
}
.ewn-hide {
    visibility:hidden;
    opacity:0
}
 
 
[class^=sdk-]:before, [class*=" sdk-"]:before {
    font-family:"lib";
    font-style:normal;
    font-weight:400;
    speak:none;
    display:inline-block;
    text-decoration:inherit;
    width:1em;
    margin-right:.2em;
    text-align:center;
    font-variant:normal;
    text-transform:none;
    line-height:1em;
    margin-left:.2em;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
 
.sdk-remen:before {
  content: "\e6be";
}
 
.sdk-lianxi:before {
  content: "\e66f";
}
 
.sdk-Qqun:before {
  content: "\e6ac";
}
/*底部字母闪动结束*/
/*底部字母闪动开始*/
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
.sbkk-yj {
    text-align:center
}
.sbkk-yj p {
    text-transform:uppercase;
    letter-spacing: .45em;
    display:inline-block;
    margin-left: 2px;
}
.sbkk-yj p span {
    font:700 4em/1"Oswald", sans-serif;
    letter-spacing:0;
    padding:.25em 0 .325em;
    display:block;
    margin:0 auto;
    text-shadow:0 0 80px rgba(255, 255, 255, .5);
    background:url(https://lmtd.cn/pic/sbkk.png) repeat-y;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    -webkit-animation:aitf 80s linear infinite;
    -webkit-transform:translate3d(0, 0, 0);
    -webkit-backface-visibility:hidden
}
@-webkit-keyframes aitf {
    0% {
        background-position:0 50%
    }
    100% {
        background-position:100% 50%
    }
}
.ffooter-menus {
    display:none
}
@media (min-width:1024px) {
    .ffooter-menus {
        display:block
    }
}
.ffooter-menus a {
    color:#676b6f
}
.ffooter-menus a:hover {
    color:#fff
}
.ffooter-menus .menus .menu-div.menu-1, .footer-menus .menus .menu-div.menu-2 {
    display:block
}
@media (min-width:1250px) {
    .ffooter-menus .menus .menu-div {
        width:33.3333%
    }
    .ffooter-menus .menus .menu-div.menu-3 {
        display:block
    }
}
@media (min-width:1330px) {
    .ffooter-menus .menus .menu-div {
        width:25%;
        display:block
    }
}
.ffooter-menus .menus .menu-div h2 {
    font-size:18px;
    color:#c6c7c9;
    margin-bottom:20px;
    font-weight:400
}
.ffooter-menus .menus .menu-div li {
    line-height:1.5;
    margin-bottom:10px
}
.ffooter-menus .ewms {
    width:278px;
    position:relative;
    color:#949498;
   margin:0 auto;
}
.ffooter-menus .ewms .like {
    text-align:center
}
.ffooter-menus .ewms .like strong {
    color:#ff7300;
    font-size:54px;
    line-height:1.24;
    font-family:Impact;
    font-weight:400
}
.ffooter-menus .ewms .like h3 {
    font-size:14px;
    font-weight:400;
    line-height:1.1
}
.ffooter-menus .ewms li {
    float:left;
    width:33.3333%;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    display:inline;
    position:relative;
    line-height:1.3;
    margin-top:-8px
}
.ffooter-menus .ewms li:hover .ewm-content {
    visibility:visible;
    bottom:100%;
    opacity:1;
    border-radius: 8px;
}
.ffooter-menus .ewms .ico {
    font-size:46px;
    cursor:pointer;
    -webkit-transition:all .2s;
    -o-transition:all .2s;
    transition:all .2s
}
.ffooter-menus .ewms .ico:hover {
    color:#fff
}
.ffooter-menus .ewms .ico i {
    display:block
}
.ffooter-menus .ewms h4 {
    font-size:12px;
    font-weight:400;
    margin:0
}
.ffooter-menus .ewms .ewm-content {
    position:absolute;
    left:50%;
    bottom:200%;
    background:#1d1f20;
    -webkit-border-radius:3px;
    border-radius:3px;
    -webkit-box-shadow:0 16px 32px 0 rgba(0, 0, 0, .1);
    box-shadow:0 16px 32px 0 rgba(0, 0, 0, .1);
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    width:330px;
    -webkit-transform:translate(-50%);
    -ms-transform:translate(-50%);
    transform:translate(-50%)
}
.ffooter-menus .ewms .ewm-content:before {
    content:"";
    display:block;
    position:absolute;
    margin-left:-6px;
    left:50%;
    top:100%;
    width:0;
    height:0;
    border-left:6px solid rgba(0, 0, 0, 0);
    border-right:6px solid rgba(0, 0, 0, 0);
    border-top:6px solid #fff
}
@media (min-width:1024px) {
    .ffooter-menus .ewms .ewm-content.ewm-douyin, .ffooter-menus .ewms .ewm-content.ewm-wechat {
        left:auto;
        right:0;
        -webkit-transform:translate(0);
        -ms-transform:translate(0);
        transform:translate(0)
    }
    .ffooter-menus .ewms .ewm-content.ewm-douyin:before, .ffooter-menus .ewms .ewm-content.ewm-wechat:before {
        left:auto;
        right:30px
    }
    .ffooter-menus .ewms .ewm-content.ewm-douyin {
        -webkit-transform:translate(70px);
        -ms-transform:translate(70px);
        transform:translate(70px)
    }
    .ffooter-menus .ewms .ewm-content.ewm-douyin:before {
        right:100px
    }
}
.ffooter-menus .ewms .ewm-content.ewm-douyin {
    width:400px
}
.ffooter-menus .ewms .ewm-content.ewm-douyin .ewm-main .thumb-div {
    width:160px
}
.ffooter-menus .ewms .ewm-main {
    padding:40px 25px 40px 30px;
    text-align:left
}
.ffooter-menus .ewms .ewm-main .fl {
    float:left
}
.ffooter-menus .ewms .ewm-main .fr {
    float:right
}
.ffooter-menus .ewms .ewm-main .thumb-div {
    width:120px;
    margin-right:30px;
    background:#fff
}
.ffooter-menus .ewms .ewm-main .thumbs {
    padding-top:100%
}
.ffooter-menus .ewms .ewm-main h4 {
    font-size:14px;
    font-weight:400;
    color:#f5f5f5;
    line-height:1.714;
    margin-top:4px
}
.ffooter-menus .ewms .ewm-main h4 span {
    color:#3860f4
}
.ffooter-menus .ewms .ewm-main a {
    color:#ff3401
}
.ffooter-menus .ewms .ewm-main a:hover {
    color:#ff7300
}
.ffooter-menus .ewms .ewm-main h5 {
    font-weight:400;
    font-size:12px;
    color:#888
}
.ffooter-menus .ewms .ewm-douyin .ewm-main {
    padding-left:0;
    padding-right:0;
    text-align:center
}
.ffooter-menus .ewms .ewm-douyin .ewm-main .thumb-div {
    margin:0 auto
}
.ffooter-menus .ewms .ewm-douyin .ewm-douyin-1, .ffooter-menus .ewms .ewm-douyin .ewm-douyin-2 {
    width:50%
}
.ffooter-menus .ewms .ewm-douyin .ewm-douyin-1 {
    position:relative
}
.ffooter-menus .ewms .ewm-douyin .ewm-douyin-1:after {
    content:"";
    display:block;
    position:absolute;
    right:0;
    top:10%;
    width:1px;
    height:80%;
    background:#1d1f20
}
.ffooter-menus .ewms .ewm-weibo {
    width:520px;
    -webkit-transform:translate(-340px);
    -ms-transform:translate(-340px);
    transform:translate(-340px)
}
.ffooter-menus .ewms .ewm-weibo:before {
    left:340px
}
.ffooter-menus .ewms .ewm-weibo .ewm-main {
    padding:20px 20px 0
}
.ffooter-menus .ewms .ewm-weibo .ewm-main .items {
    overflow:hidden;
    margin:0 -10px;
    margin-left: 31px;
}
.ffooter-menus .ewms .ewm-weibo .ewm-main .items .item {
    float:left;
    width:45%;
    padding:0 10px 20px
}
.ffooter-menus .ewms .ewm-weibo .ewm-main .items .item a {
    display:block;
    background:#333638;
    -webkit-border-radius:4px;
    border-radius:4px;
    position:relative;
    padding:18px 16px 18px 44px;
    letter-spacing:0;
    color:#f5f5f5
}
.ffooter-menus .ewms .ewm-weibo .ewm-main .items .item a .item-ico {
    display:block;
    position:absolute;
    left:20px;
    top:18px;
    background:#9199a1;
    color:#fff;
    font-size:12px;
    font-family:ArialMT, Arial;
    width:18px;
    height:18px;
    text-align:center;
    line-height:18px;
    -webkit-border-radius:100%;
    border-radius:100%
}
.ffooter-menus .ewms .ewm-weibo .ewm-main .items .item a h2 {
    font-size:14px;
    font-weight:400;
    margin-bottom:6px;
    height:1.5em;
    overflow:hidden
}
.ffooter-menus .ewms .ewm-weibo .ewm-main .items .item a h4 {
    font-size:12px;
    font-weight:400;
    color:#b2b2b2;
    height:1.5em;
    overflow:hidden
}
.ffooter-menus .ewms .ewm-weibo .ewm-main .items .item a:hover {
    background:#3860f4;
    color:#fff
}
.ffooter-menus .ewms .ewm-weibo .ewm-main .items .item a:hover h4 {
    color:#fff
}
.ffooter-menus .ewms .ewm-weibo .ewm-main .items .item a:hover .item-ico {
    background:#fff;
    color:#3860f4
}
.ffooter-menus .status {
    text-align:center;
    color:#949498
}
.ffooter-menus .status h2 {
    font-family:Impact;
    font-weight:400;
    font-size:54px;
    color:#ff7300;
    letter-spacing:0
}
.ffooter-menus .status h3 {
    font-weight:400;
    font-size:14px
}
.ffooter-menus .ewms ul {
    text-align:center
}
@media (min-width:768px) {
    .container12 {
        overflow:visible;
        max-width:1330px
    }
}
.container12:after, .container12:before {
    content:"";
    height:0;
    line-height:0;
    display:block;
    visibility:none;
    clear:both
}
 
.clearfix:after, .clearfix:before {
    content:"";
    height:0;
    line-height:0;
    display:block;
    visibility:none;
    clear:both
}
.thumbs {
    display:block;
    width:100%;
    height:0;
    padding-top:66.7%;
    background-position:50%;
    background-repeat:no-repeat;
    -webkit-background-size:cover;
    background-size:cover;
    background-color:rgba(0, 0, 0, 0);
    position:relative;
    overflow:hidden
}
.thumbs, a, a:active, a:visited {
    -webkit-transition:all .2s;
    -o-transition:all .2s;
    transition:all .2s
}
.ewn-hide, .show {
    -webkit-transition:all .2s;
    -o-transition:all .2s;
    transition:all .2s
}
.ewn-hide {
    visibility:hidden;
    opacity:0
}
 
 
[class^=sdk-]:before, [class*=" sdk-"]:before {
    font-family:"lib";
    font-style:normal;
    font-weight:400;
    speak:none;
    display:inline-block;
    text-decoration:inherit;
    width:1em;
    margin-right:.2em;
    text-align:center;
    font-variant:normal;
    text-transform:none;
    line-height:1em;
    margin-left:.2em;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
 
.sdk-remen:before {
  content: "\e6be";
}
 
.sdk-lianxi:before {
  content: "\e66f";
}
 
.sdk-Qqun:before {
  content: "\e6ac";
}
/*底部字母闪动结束*/
/*底部字母闪动开始*/
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
.sbkk-yj {
    text-align:center
}
.sbkk-yj p {
    text-transform:uppercase;
    letter-spacing: .45em;
    display:inline-block;
    margin-left: 2px;
}
.sbkk-yj p span {
    font:700 4em/1"Oswald", sans-serif;
    letter-spacing:0;
    padding:.25em 0 .325em;
    display:block;
    margin:0 auto;
    text-shadow:0 0 80px rgba(255, 255, 255, .5);
    background:url(https://lmtd.cn/pic/sbkk.png) repeat-y;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    -webkit-animation:aitf 80s linear infinite;
    -webkit-transform:translate3d(0, 0, 0);
    -webkit-backface-visibility:hidden
}
@-webkit-keyframes aitf {
    0% {
        background-position:0 50%
    }
    100% {
        background-position:100% 50%
    }
}
.ffooter-menus {
    display:none
}
@media (min-width:1024px) {
    .ffooter-menus {
        display:block
    }
}
.ffooter-menus a {
    color:#676b6f
}
.ffooter-menus a:hover {
    color:#fff
}
.ffooter-menus .menus .menu-div.menu-1, .footer-menus .menus .menu-div.menu-2 {
    display:block
}
@media (min-width:1250px) {
    .ffooter-menus .menus .menu-div {
        width:33.3333%
    }
    .ffooter-menus .menus .menu-div.menu-3 {
        display:block
    }
}
@media (min-width:1330px) {
    .ffooter-menus .menus .menu-div {
        width:25%;
        display:block
    }
}
.ffooter-menus .menus .menu-div h2 {
    font-size:18px;
    color:#c6c7c9;
    margin-bottom:20px;
    font-weight:400
}
.ffooter-menus .menus .menu-div li {
    line-height:1.5;
    margin-bottom:10px
}
.ffooter-menus .ewms {
    width:278px;
    position:relative;
    color:#949498;
   margin:0 auto;
}
.ffooter-menus .ewms .like {
    text-align:center
}
.ffooter-menus .ewms .like strong {
    color:#ff7300;
    font-size:54px;
    line-height:1.24;
    font-family:Impact;
    font-weight:400
}
.ffooter-menus .ewms .like h3 {
    font-size:14px;
    font-weight:400;
    line-height:1.1
}
.ffooter-menus .ewms li {
    float:left;
    width:33.3333%;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    display:inline;
    position:relative;
    line-height:1.3;
    margin-top:-8px
}
.ffooter-menus .ewms li:hover .ewm-content {
    visibility:visible;
    bottom:100%;
    opacity:1;
    border-radius: 8px;
}
.ffooter-menus .ewms .ico {
    font-size:46px;
    cursor:pointer;
    -webkit-transition:all .2s;
    -o-transition:all .2s;
    transition:all .2s
}
.ffooter-menus .ewms .ico:hover {
    color:#fff
}
.ffooter-menus .ewms .ico i {
    display:block
}
.ffooter-menus .ewms h4 {
    font-size:12px;
    font-weight:400;
    margin:0
}
.ffooter-menus .ewms .ewm-content {
    position:absolute;
    left:50%;
    bottom:200%;
    background:#1d1f20;
    -webkit-border-radius:3px;
    border-radius:3px;
    -webkit-box-shadow:0 16px 32px 0 rgba(0, 0, 0, .1);
    box-shadow:0 16px 32px 0 rgba(0, 0, 0, .1);
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    width:330px;
    -webkit-transform:translate(-50%);
    -ms-transform:translate(-50%);
    transform:translate(-50%)
}
.ffooter-menus .ewms .ewm-content:before {
    content:"";
    display:block;
    position:absolute;
    margin-left:-6px;
    left:50%;
    top:100%;
    width:0;
    height:0;
    border-left:6px solid rgba(0, 0, 0, 0);
    border-right:6px solid rgba(0, 0, 0, 0);
    border-top:6px solid #fff
}
@media (min-width:1024px) {
    .ffooter-menus .ewms .ewm-content.ewm-douyin, .ffooter-menus .ewms .ewm-content.ewm-wechat {
        left:auto;
        right:0;
        -webkit-transform:translate(0);
        -ms-transform:translate(0);
        transform:translate(0)
    }
    .ffooter-menus .ewms .ewm-content.ewm-douyin:before, .ffooter-menus .ewms .ewm-content.ewm-wechat:before {
        left:auto;
        right:30px
    }
    .ffooter-menus .ewms .ewm-content.ewm-douyin {
        -webkit-transform:translate(70px);
        -ms-transform:translate(70px);
        transform:translate(70px)
    }
    .ffooter-menus .ewms .ewm-content.ewm-douyin:before {
        right:100px
    }
}
.ffooter-menus .ewms .ewm-content.ewm-douyin {
    width:400px
}
.ffooter-menus .ewms .ewm-content.ewm-douyin .ewm-main .thumb-div {
    width:160px
}
.ffooter-menus .ewms .ewm-main {
    padding:40px 25px 40px 30px;
    text-align:left
}
.ffooter-menus .ewms .ewm-main .fl {
    float:left
}
.ffooter-menus .ewms .ewm-main .fr {
    float:right
}
.ffooter-menus .ewms .ewm-main .thumb-div {
    width:120px;
    margin-right:30px;
    background:#fff
}
.ffooter-menus .ewms .ewm-main .thumbs {
    padding-top:100%
}
.ffooter-menus .ewms .ewm-main h4 {
    font-size:14px;
    font-weight:400;
    color:#f5f5f5;
    line-height:1.714;
    margin-top:4px
}
.ffooter-menus .ewms .ewm-main h4 span {
    color:#3860f4
}
.ffooter-menus .ewms .ewm-main a {
    color:#ff3401
}
.ffooter-menus .ewms .ewm-main a:hover {
    color:#ff7300
}
.ffooter-menus .ewms .ewm-main h5 {
    font-weight:400;
    font-size:12px;
    color:#888
}
.ffooter-menus .ewms .ewm-douyin .ewm-main {
    padding-left:0;
    padding-right:0;
    text-align:center
}
.ffooter-menus .ewms .ewm-douyin .ewm-main .thumb-div {
    margin:0 auto
}
.ffooter-menus .ewms .ewm-douyin .ewm-douyin-1, .ffooter-menus .ewms .ewm-douyin .ewm-douyin-2 {
    width:50%
}
.ffooter-menus .ewms .ewm-douyin .ewm-douyin-1 {
    position:relative
}
.ffooter-menus .ewms .ewm-douyin .ewm-douyin-1:after {
    content:"";
    display:block;
    position:absolute;
    right:0;
    top:10%;
    width:1px;
    height:80%;
    background:#1d1f20
}
.ffooter-menus .ewms .ewm-weibo {
    width:520px;
    -webkit-transform:translate(-340px);
    -ms-transform:translate(-340px);
    transform:translate(-340px)
}
.ffooter-menus .ewms .ewm-weibo:before {
    left:340px
}
.ffooter-menus .ewms .ewm-weibo .ewm-main {
    padding:20px 20px 0
}
.ffooter-menus .ewms .ewm-weibo .ewm-main .items {
    overflow:hidden;
    margin:0 -10px;
    margin-left: 31px;
}
.ffooter-menus .ewms .ewm-weibo .ewm-main .items .item {
    float:left;
    width:45%;
    padding:0 10px 20px
}
.ffooter-menus .ewms .ewm-weibo .ewm-main .items .item a {
    display:block;
    background:#333638;
    -webkit-border-radius:4px;
    border-radius:4px;
    position:relative;
    padding:18px 16px 18px 44px;
    letter-spacing:0;
    color:#f5f5f5
}
.ffooter-menus .ewms .ewm-weibo .ewm-main .items .item a .item-ico {
    display:block;
    position:absolute;
    left:20px;
    top:18px;
    background:#9199a1;
    color:#fff;
    font-size:12px;
    font-family:ArialMT, Arial;
    width:18px;
    height:18px;
    text-align:center;
    line-height:18px;
    -webkit-border-radius:100%;
    border-radius:100%
}
.ffooter-menus .ewms .ewm-weibo .ewm-main .items .item a h2 {
    font-size:14px;
    font-weight:400;
    margin-bottom:6px;
    height:1.5em;
    overflow:hidden
}
.ffooter-menus .ewms .ewm-weibo .ewm-main .items .item a h4 {
    font-size:12px;
    font-weight:400;
    color:#b2b2b2;
    height:1.5em;
    overflow:hidden
}
.ffooter-menus .ewms .ewm-weibo .ewm-main .items .item a:hover {
    background:#3860f4;
    color:#fff
}
.ffooter-menus .ewms .ewm-weibo .ewm-main .items .item a:hover h4 {
    color:#fff
}
.ffooter-menus .ewms .ewm-weibo .ewm-main .items .item a:hover .item-ico {
    background:#fff;
    color:#3860f4
}
.ffooter-menus .status {
    text-align:center;
    color:#949498
}
.ffooter-menus .status h2 {
    font-family:Impact;
    font-weight:400;
    font-size:54px;
    color:#ff7300;
    letter-spacing:0
}
.ffooter-menus .status h3 {
    font-weight:400;
    font-size:14px
}
.ffooter-menus .ewms ul {
    text-align:center
}
@media (min-width:768px) {
    .container12 {
        overflow:visible;
        max-width:1330px
    }
}
.container12:after, .container12:before {
    content:"";
    height:0;
    line-height:0;
    display:block;
    visibility:none;
    clear:both
}
 
.clearfix:after, .clearfix:before {
    content:"";
    height:0;
    line-height:0;
    display:block;
    visibility:none;
    clear:both
}
.thumbs {
    display:block;
    width:100%;
    height:0;
    padding-top:66.7%;
    background-position:50%;
    background-repeat:no-repeat;
    -webkit-background-size:cover;
    background-size:cover;
    background-color:rgba(0, 0, 0, 0);
    position:relative;
    overflow:hidden
}
.thumbs, a, a:active, a:visited {
    -webkit-transition:all .2s;
    -o-transition:all .2s;
    transition:all .2s
}
.ewn-hide, .show {
    -webkit-transition:all .2s;
    -o-transition:all .2s;
    transition:all .2s
}
.ewn-hide {
    visibility:hidden;
    opacity:0
}
 
 
[class^=sdk-]:before, [class*=" sdk-"]:before {
    font-family:"lib";
    font-style:normal;
    font-weight:400;
    speak:none;
    display:inline-block;
    text-decoration:inherit;
    width:1em;
    margin-right:.2em;
    text-align:center;
    font-variant:normal;
    text-transform:none;
    line-height:1em;
    margin-left:.2em;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
 
.sdk-remen:before {
  content: "\e6be";
}
 
.sdk-lianxi:before {
  content: "\e66f";
}
 
.sdk-Qqun:before {
  content: "\e6ac";
}
/*底部字母闪动结束*/

教程到这里就结束了，希望对你的建站里程碑有所帮助。

本文结束END

---