本博客基于handsome的一些美化

  • 头像呼吸光环和鼠标悬停旋转放大

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可

/*头像呼吸光环和鼠标悬停旋转放大*/
.img-full {
    width: 100px;
    border-radius: 50%;
    animation: light 4s ease-in-out infinite;
    transition: 0.5s;
}

.img-full:hover {
    transform: scale(1.15) rotate(720deg);
}

@keyframes light {
    0% {
        box-shadow: 0 0 4px #f00;
    }

    25% {
        box-shadow: 0 0 16px #0f0;
    }

    50% {
        box-shadow: 0 0 4px #00f;
    }

    75% {
        box-shadow: 0 0 16px #0f0;
    }

    100% {
        box-shadow: 0 0 4px #f00;
    }
}
  • 首页评论自动排名

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可

/*首页评论自动排名*/

    .autofirst1 .item{

        padding:5px 10px

      }

    .item a{border-radius:10px}

    .overflow{

        overflow:hidden;

        white-space: nowrap;

        word-wrap: normal;

      }

    .autofirst1{

        padding:10px 20px

    }
  • 首页文章图片获取焦点放大

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可

/*首页文章图片获取焦点放大*/

.item-thumb{

    cursor: pointer;  

    transition: all 0.6s;  

}

.item-thumb:hover{

      transform: scale(1.05);  

}

.item-thumb-small{

    cursor: pointer;  

    transition: all 0.6s;

}

.item-thumb-small:hover{

    transform: scale(1.05);

}
  • 首页文章版式圆角化

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可

/*首页文章版式圆角化*/

.panel{

    border: none;

    border-radius: 15px;

}

.panel-small{

    border: none;

    border-radius: 15px;

}

.item-thumb{

    border-radius: 15px;  

}
  • 首页文章版式阴影化

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可

/*panel阴影*/

.app.container {

    box-shadow: 0 0 30px rgba(173, 216, 230, 0.35);

}

.panel{

   box-shadow: 1px 1px 5px 5px rgba(169, 169, 169, 0.35);

    -moz-box-shadow: 1px 1px 5px 5px rgba(169, 169, 169, 0.35);

}

.panel:hover{

    box-shadow: 1px 1px 5px 5px rgba(173, 216, 230, 0.35);

    -moz-box-shadow: 1px 1px 5px 5px rgba(173, 216, 230, 0.35);

}

.panel-small{

    box-shadow: 1px 1px 5px 5px rgba(169, 169, 169, 0.35);

    -moz-box-shadow: 1px 1px 5px 5px rgba(169, 169, 169, 0.35);

}

.panel-small:hover{

    box-shadow: 1px 1px 5px 5px rgba(173, 216, 230, 0.35);

    -moz-box-shadow: 1px 1px 5px 5px rgba(173, 216, 230, 0.35);
  • 右侧列表导航栏图标颜色

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可

/*右侧列表导航栏图标颜色*/

.glyphicon-fire {

    color: #ff0000;

}

.nav-tabs-alt .glyphicon-comment {

    color: #495dc3;

}

.glyphicon-transfer {

    color: #0e5458;

}
  • 彩色标签云

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义JavaScript即可

<!--彩色标签云-->

let tags = document.querySelectorAll("#tag_cloud-2 a");

let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];

tags.forEach(tag => {

    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];

    tag.style.backgroundColor = tagsColor;

});

以上内容转载至互联网,如有侵权请联系我!
Last modification:September 18th, 2019 at 07:24 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment