Typecho文章置顶插件Sticky样式美化

2019-03-18,20:26,[周1]

1707 次阅读

2190个字

Sticky插件美化样式

<div class="wrap"><span class="wraps">Rcmd</span></div>
<style type="text/css">
.wrap {
    width: 100%;
    height: 100%;
    position: absolute;
    top: -8px;
    left: 8px;
    overflow: hidden;
    font-size: 17px;
    font-weight: 400;
    color: #f1f1f1;
    opacity: 0.7;
    -webkit-transition: .3s ease all;
    -moz-transition: .3s ease all;
    -ms-transition: .3s ease all;
    -o-transition: .3s ease all;
    transition: .3s ease all;
}
.wrap:hover {
    opacity: 0.9;
}
.wraps {
    display: inline-block;
    text-align: center;
    width: 273px;
    height: 20px;
    line-height: 20px;
    position: absolute;
    top: 20px;
    right: -110px;
    z-index: 2;
    overflow: hidden;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    border: 1px dashed;
    box-shadow: 0 0 0 1px #000, 0px 21px 5px -18px rgba(0,0,0,0.6);
    background: #048e68;
}
</style>

插件下载：
Typecho文章置顶插件Sticky 含分类，顶置文字在标题后！

原版sticky只在首页顶置，文字在标题前面需要上面美化的推荐用这个！

2020.1.3号更新一下：

由于前面的 wrap 的CSS会挡住文章的一些A链接内容，我就直接精简掉了！hover获取焦点变色我也删掉了，但是文章还是留下更新之前的代码吧，因为这个是看个人喜欢爱好！喜欢哪个就用哪个，得到如下代码！

<div  class="wraps">Rcmd</div>
<style type="text/css">
.wraps {
    display: inline-block;
    text-align: center;
    width: 273px;/*我现在是110,自己调一下*/
    height: 20px;
    line-height: 20px;
    position: absolute;
    top: 20px;/*我现在是10,自己调一下*/
    right: -110px;/*我现在是33,自己调一下*/
    z-index: 2;
    overflow: hidden;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    border: 1px dashed;
    box-shadow: 0 0 0 1px #000, 0px 21px 5px -18px rgba(0,0,0,0.6);
    background: #048e68;
    color: #fff;/*这个自定义文字的颜色*/
}
</style>