#热门
B2主题美化网站底部动态字母美化代码教程

静鱼客栈其他教程

2023-11-06 0 453

请勿商业运营，违法使用和传播！资源仅供研究学习使用！解压密码为：www.52jyu.cn

前言

给你的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" rel="external nofollow"  />

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

                     <div class="sbkk-yj">
<p> <span>AAYM.met</span> 每天学习五分钟 一年萌新变大神
<br>
<br>
</p>
</div>
<div class="ffooter-menus">
<div class="container12">
<div class="ewms fr">
<div class="items">
<ul class="clearfix">
<li>
<div class="ico"> <svg class="icon" aria-hidden="true"><use xlink:href="#bd-remen" rel="external nofollow" ></use></svg>
<h4>热门推荐</h4>
</div>
<div class="ewm-content ewn-hide ewm-weibo">
<div class="ewm-main clearfix">
<div class="items">
<div class="item"> <a href="https://www.52jyu.cn" target="_blank"><span class="item-ico">@</span><h2>热门下载</h2><h4>优质素材新鲜呈上</h4></a>
</div>
<div class="item"> <a href="https://www.52jyu.cn" target="_blank"><span class="item-ico">@</span><h2>技术教程</h2><h4>技术大咖在线解答</h4></a>
</div>
<div class="item"> <a href="https://www.52jyu.cn" target="_blank"><span class="item-ico">@</span><h2>案例</h2><h4>系统强大自然用的人多</h4></a>
</div>
<div class="item"> <a href="https://www.52jyu.cn" target="_blank"><span class="item-ico">@</span><h2>升级VIP</h2><h4>全站资源任意看随便下</h4></a>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="ico"> <svg class="icon" aria-hidden="true"><use xlink:href="#bd-weixin" rel="external nofollow" ></use></svg>
<h4>联系站长</h4>
</div>
<div class="ewm-content ewn-hide ewm-douyin">
<div class="ewm-main clearfix">
<div class="ewm-douyin-1 fl">
<div class="thumb-div"> <i class="thumbs" style="background-image:url(二维码链接);"></i>
</div>
<h4>微信公众号</h4>
<h5>名称：某某号</h5>
</div>
<div class="ewm-douyin-2 fr">
<div class="thumb-div"> <i class="thumbs" style="background-image:url(二维码链接);"></i>
</div>
<h4>站长微信</h4>
<h5>昵称：某某微信</h5>
</div>
</div>
</div>
</li>
<li>
<div class="ico"> <svg class="icon" aria-hidden="true"><use xlink:href="#bd-qq" rel="external nofollow" ></use></svg>
<h4>站长QQ</h4>
</div>
<div class="ewm-content ewn-hide ewm-wechat">
<div class="ewm-main clearfix">
<div class="thumb-div fl"> <i class="thumbs" style="background-image:url(二维码链接);"></i>
</div>
<h4>QQ:1234567</h4>
<h4>联系【静鱼客栈】</h4>
<h4> <span> <i class="icon-wechat-1"></i> 扫码加好友 </span></h4>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>

子主题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";
}
/*底部字母闪动结束*/

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

收藏 (0) 打赏

感谢您的支持，我会继续努力的!

打开微信/支付宝/QQ扫一扫，即可进行扫码打赏哦，分享从这里开始，精彩与您同在

1. 本站所有资源来源于用户上传和网络，因此不包含技术服务请大家谅解！如有侵权请邮件联系客服！305582964@qq.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性，资源仅供下载学习之用！如有链接无法下载、失效或广告，请联系客服处理，有奖励！
3. 您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容资源！如用于商业或者非法用途，与本站无关，一切后果请用户自负！
4. 如果您也有好的资源或教程，您可以投稿发布，成功分享后有U点奖励和额外收入！

静鱼客栈其他教程 B2主题美化网站底部动态字母美化代码教程 https://www.52jyu.cn/25323.html