AI摘要

本文分享了一款仿Mac样式的子比主题“最新发布与逐字滚动公告”美化模块,该模块已设置手机端隐藏,文中详细提供了自定义HTML与CSS代码的部署流程,方便站长直接套用。

前段时间有人找我要,本站的最新发布与逐字滚动公告的模块,这个是扒的mac的一个样式,不过我感觉挺好看的,这个模块的滚动很简单,只不过最新发布,我整了好久才整出来,可能不是很好看,我已经把手机端设置成不显示手机端,因为手机端不是很好看,话不多说,直接开始上教程

效果图

部署流程

[hidecontent type="reply"]

外观-小工具-自定义HTML

<div class="wapnone">
<div id="zuixinfabu" class="index-new"><img draggable="false" oncontextmenu="return false;" src="https://www.macgf.com/img/index-new.svg" alt="最新发布"><div class="file-format" data-v-2775696c=""><span id="index-xtips" class="txt-file-format" data-v-2775696c="">公告:按照用户要求,本站已取消频繁的通知提示</span><span class="typed-cursor typed-cursor--blink" aria-hidden="true"></span> <span class="file-format-icons" data-v-2775696c=""><i class="icon_ps" data-v-2775696c=""></i> <i class="icon_ai" data-v-2775696c=""></i> <i class="icon_sketch" data-v-2775696c=""></i> <i class="icon_3dMax" data-v-2775696c=""></i> <i class="icon_cdr" data-v-2775696c=""></i> <i class="icon_c4d" data-v-2775696c=""></i> <i class="icon_blender" data-v-2775696c=""></i></span></div></div>
</div>
<style>
  .absolute::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 58%;
    right: 0;
    bottom: 0;
    transform: scale(1.01);
    background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, var(--body-bg-color) 100%);
}


.file-format {
  padding: 0 20px;
  height: 38px;
  background: linear-gradient(224deg, rgba(255, 110, 144, .08), rgba(208, 147, 255, .08) 42%, rgba(105, 105, 255, .08) 100%, rgba(105, 105, 255, .08) 0);
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

span.txt-file-format {
  font-size: 13px;
  font-weight: 700;
  color: var(--main-color);
  line-height: 18px;
  margin-right: 17px;
}

i.icon_ai[data-v-2775696c], i.icon_ps[data-v-2775696c] {
  width: 26px;
  height: 26px;
  display: inline-block;
  vertical-align: middle;
}
i.icon_ps[data-v-2775696c] {
  background: url(https://www.macgf.com/img/icon-ps.svg) no-repeat 50% / 100%;
}

.stay-tuned-box .file-format .file-format-icons i[data-v-2775696c] {
  margin-right: 9px;
}

i.icon_ai[data-v-2775696c] {
  background: url(https://www.macgf.com/img/icon-ai.svg) no-repeat 50% / 100%;
}

i.icon_sketch[data-v-2775696c] {
  width: 26px;
  height: 26px;
  display: inline-block;
  background: url(https://www.macgf.com/img/icon-sketch.svg) no-repeat 50% / 100%;
  vertical-align: middle;
}

.stay-tuned-box .file-format .file-format-icons i[data-v-2775696c] {
  margin-right: 9px;
}

i.icon_3dMax[data-v-2775696c], i.icon_blender[data-v-2775696c] {
  width: 26px;
  height: 26px;
  display: inline-block;
  vertical-align: middle;
}
i.icon_3dMax[data-v-2775696c] {
  background: url(https://www.macgf.com/img/icon-3dMax.svg) no-repeat 50% / 100%;
}

.stay-tuned-box .file-format .file-format-icons i[data-v-2775696c] {
  margin-right: 9px;
}

i.icon_c4d[data-v-2775696c], i.icon_cdr[data-v-2775696c] {
  width: 26px;
  height: 26px;
  display: inline-block;
  vertical-align: middle;
}
i.icon_cdr[data-v-2775696c] {
  background: url(https://www.macgf.com/img/icon-cdr.svg) no-repeat 50% / 100%;
}

.stay-tuned-box .file-format .file-format-icons i[data-v-2775696c] {
  margin-right: 9px;
}

i.icon_c4d[data-v-2775696c] {
  background: url(https://www.macgf.com/img/icon-c4d.svg) no-repeat 50% / 100%;
}

i.icon_blender[data-v-2775696c] {
  background: url(https://www.macgf.com/img/icon-blender.svg) no-repeat 50% / 100%;
}
i.icon_3dMax[data-v-2775696c], i.icon_blender[data-v-2775696c] {
  width: 26px;
  height: 26px;
  display: inline-block;
  vertical-align: middle;
}


div#zuixinfabu {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}.enlighter-default .enlighter{max-height:400px;overflow-y:auto !important;}.posts-item .item-heading>a {font-weight: bold;color: unset;}@media (max-width:640px) {
    .meta-right .meta-view{
      display: unset !important;
    }
  }

/*文字列表标题图片样式*/
.index-new img {
  height: 35px;
  padding-left: 10px
}
.index-new {
  margin-bottom: 5px;
}
/*文字列表标题图片样式结束*/
  /*手机端不显示CSS代码*/
@media screen and (max-width: 1221px) { .wapnone{display:none; }
      }
</style>

子比主题–>>自定义底部HTML代码

<script src="https://www.tfbkw.com/js/typed.min.js"></script>
 <script>
    var typed = new Typed("#index-xtips", {
    strings: ["macGF新推出了macGFTool,可以解决软件提示损坏等问题!","macGF网站服务器已升级!加快了访问速度!","根据用户建议已加入软件历史版本,其他功能在计划中..."],
    startDelay: 100,
    backDelay: 5000,
    typeSpeed: 60,
    loop: true,
    backSpeed: 10
    })
  </script>
[/hidecontent]

最新发布 - 单独款

部署代码

<div class="wapnone">
<div id="zuixinfabu" class="index-new">
<img draggable="false" oncontextmenu="return false;" src="www.foxccs.com/s/pic/index-new.svg" alt="最新发布">
</div>
</div>
<style>
div#zuixinfabu {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}.enlighter-default .enlighter{max-height:400px;overflow-y:auto !important;}.posts-item .item-heading>a {font-weight: bold;color: unset;}@media (max-width:640px) {
    .meta-right .meta-view{
      display: unset !important;
    }
  }

/*文字列表标题图片样式*/
.index-new img {
  height: 35px;
  padding-left: 10px
}
.index-new {
  margin-bottom: 5px;
}
/*文字列表标题图片样式结束*/
  /*手机端不显示CSS代码*/
@media screen and (max-width: 1221px) { .wapnone{display:none; }
      }
</style>