CorePress主题美化记录 – 友链模块美化

友链模块美化

效果预览

实现方法

1. 友链申请按钮美化

子主题或自定义css加入以下代码即可

/* 按钮美化 */
.friend-links-apply {
    padding: 5px 10px;
    color: white !important;
    text-decoration: none;
    border-radius: 50px;
    background: linear-gradient(to right, #fd0808, #df05ed);
    background-size: 200% auto;
    animation: flowingGradient 3s ease-in-out infinite;
    opacity: 1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    filter: brightness(130%);
}

.friend-links-apply:hover {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
}

@keyframes flowingGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.friend-links .list-plane-title > div {
    /* 修复对齐效果 */
    line-height: 30px;
}

.fa-paper-plane:hover {
    color:red;
}

 2. 友链鼠标悬浮效果

当鼠标放友链上时，呈现放大效果。

子主题或自定义css加入以下代码即可

/* 友链a标签放大效果 */
.friend-links-list a:hover {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
}

3. 多行友情链接时添加空隙

如果友情链接不止一行时，会显得很紧凑，可以适当添加个 margin-bottom。

子主题或自定义css加入以下代码即可

/** 友情链接多行时显示过于紧凑 **/
.friend-links-list {
   padding: 10px 10px 10px 15px !important;
}

.friend-links-list a {
   margin-bottom: 10px;
}

4. 手机显示底部导航并美化

Corepress 手机默认不显示友情链接，如果需要可以添加如下代码，至于美化的话根据自己实际情况需要。

/** 手机显示底部导航并美化 */
@media screen and (max-width: 800px) {
  .friend-links {
    display: block !important;
  }
  .friend-links .list-plane-title {
/*      padding: 5px 0px 5px 0px; */
      padding: 0px;
    }
    .friend-links-list img {
        display: none !important;
    }
    .friend-links .list-plane-title > div {
        padding: 5px 0px 5px 15px;
        font-size: 16px;
        clear: both;
    }
    .list-plane-linksdescribe, .friend-links-apply{
        display:none!important
    }
    .friend-links-list {
        padding: 10px !important;
        margin: 0 5px;
        display: block;
    }
    .friend-links-list a {
        font-size: 12px;
        margin-bottom: 5px;
        color: #262525!important;
        -webkit-tap-highlight-color: transparent;
    }
    .friend-links-item {
        margin-right: 0px;
    }
    .friend-links-item:not(:first-child):before {
        content: "";
        width: 4px;
        height: 4px;
        margin: 0 .3em;
        border-radius: 50%;
        display: inline-block;
        vertical-align: middle;
        background:#262525;
        opacity: .3;
        vertical-align: .2em;
    }
}