基于handsome主题的一些美化方法总结

[font color=”#A52A2A”]购买handsome主题有一段时间了，是一款非常值得购买的主题![/font]

自己也折腾了许久，最终还是买的真香，无论是美观还是性能上，handsome值得一试。
handsome介绍及购买
进入正题:
代码没标明的都是添加至handsome主题后台主题设置 自定义CSS。
进入正题:
代码没标明的都是添加至handsome主题后台主题设置 自定义CSS。

首页头像转动并放大

**width**:**130px**;
}

**.avatar**{
    **-webkit-transition**: **0.4s**;
    **-webkit-transition**: -webkit-transform **0.4s** ease-out;
    **transition**: transform **0.4s** ease-out;
    **-moz-transition**: -moz-transform **0.4s** ease-out;
}

**.avatar****:hover**{
    **transform**: **rotateZ**(360deg);
    **-webkit-transform**: **rotateZ**(360deg);
    **-moz-transform**: **rotateZ**(360deg);
}

**#aside-user** **span****.avatar**{
    **animation-timing-function**:**cubic-bezier**(0,0,.07,1)**!important**;
    **border**:**0** solid
}

**#aside-user** **span****.avatar****:hover**{
    **transform**:**rotate**(360deg) **scale**(1.2);
    **border-width**:**5px**;
    **animation**:avatar .**5s**
}

头像呼吸光环

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**;
    }
}

文章内打赏图标跳动

**animation**: star **0.5s** ease-in-out infinite alternate;
}

@**keyframes** star {
    **from** {
        **transform**: **scale**(1);
    }

    **to** {
        **transform**: **scale**(1.1);
    }
}

首页文章版式圆角化

**.panel**{
    **border**: none;
    **border-radius**: **15px**;
}

**.panel-small**{
    **border**: none;
    **border-radius**: **15px**;
}

**.item-thumb**{
    **border-radius**: **15px**;
}

首页文章版式阴影化

**.panel**{
   **box-shadow**: **1px** **1px** **5px** **5px** **rgba**(255, 112, 173, 0.35);
    **-moz-box-shadow**: **1px** **1px** **5px** **5px** **rgba**(255, 112, 173, 0.35);
}

**.panel****:hover**{
    **box-shadow**: **1px** **1px** **5px** **5px** **rgba**(255, 112, 173, 0.35);
    **-moz-box-shadow**: **1px** **1px** **5px** **5px** **rgba**(255, 112, 173, 0.35);
}

**.panel-small**{
    **box-shadow**: **1px** **1px** **5px** **5px** **rgba**(255, 112, 173, 0.35);
    **-moz-box-shadow**: **1px** **1px** **5px** **5px** **rgba**(255, 112, 173, 0.35);
}

**.panel-small****:hover**{
    **box-shadow**: **1px** **1px** **5px** **5px** **rgba**(255, 112, 173, 0.35);
    **-moz-box-shadow**: **1px** **1px** **5px** **5px** **rgba**(255, 112, 173, 0.35);
}

图片抖动效果

**-webkit-animation**:sucaijiayuan **1s** .**1s** ease both;
**-moz-animation**:tada **1s** .**1s** ease both;
}
@-**webkit**-**keyframes** sucaijiayuan {
0% {
**-webkit-transform**:**scale**(1)
}
10%, 20% {
**-webkit-transform**:**scale**(0.8) **rotate**(-2deg)
}
30%, 50%, 70%, 90% {
**-webkit-transform**:**scale**(1.1) **rotate**(2deg)
}
40%, 60%, 80% {
**-webkit-transform**:**scale**(1.1) **rotate**(-2deg)
}
100% {
**-webkit-transform**:**scale**(1) **rotate**(0)
}

自定义鼠标样式

**cursor**:**url**(**'鼠标指针图片链接'**), auto;
}
**select**, **input**, **textarea**, **a**, **button** {
    **cursor**:**url**(**'鼠标指针图片链接'**), auto;
}
**input****[disabled]**, **select****[disabled]**, **textarea****[disabled]**, **input****[readonly]**, **select****[readonly]** {
    **cursor**:**url**(**'鼠标指针图片链接'**), auto;
}

浏览器动态标题

<script>
 var OriginTitle = document.title;
 var titleTime;
 document.addEventListener('visibilitychange', function () {
     if (document.hidden) {
         $('[rel="icon"]').attr('href', "//这里替换为你需要显示的favicon链接");
         document.title = 'ヽ(●-`Д´-)ノ别走啊！';
         clearTimeout(titleTime);
     }
     else {
         $('[rel="icon"]').attr('href', "//这里替换为你需要显示的favicon链接");
         document.title = 'ヾ(Ő∀Ő3)ノ想我啦！' + OriginTitle;
         titleTime = setTimeout(function () {
             document.title = OriginTitle;
         }, 2000);
     }
 });
</script>

admin普通

打赏 收藏 海报 链接