置顶插件Sticky样式美化

March 3, 2018 • Read: 1260 • 动手干

预览:

鼠标点击前

置顶演示1.png

鼠标点击后

置顶演示2.png

只需将以下填入Sticky插件设置框即可:

<div class="wrap"><span class="wraps">置顶</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: #fff;
    opacity: 0.5;
    -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: 200px;
    height: 30px;
    line-height: 27px;
    position: absolute;
    top: 30px;
    right: -50px;
    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 3px #796E5D, 0px 21px 5px -18px rgba(0,0,0,0.6);
    background: #796E5D;
}
</style>

颜色根据自己喜好修改。

Archives QR Code Tip
QR Code for this page
Tipping QR Code
Leave a Comment

已有 8 条评论
  1. Mirages主题非卡片式置顶图标会飘到顶部2333

    1. leo leo

      @Yiveco需要自己根据实际情况改下,这个是卡片式的样式。

  2. @(爱心)

    1. leo leo

      @三秋@(爱心)

  3. 1212 1212

    最新里番在线动漫
    https://www.nicemoe.com/

  4. 多谢

  5. 赞@(爱心)

    1. 春

      @糯米团#(不出所料)谢谢