基于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>版权属于：Cyril
本文链接：https://cloud.tencent.com/developer/article/1856702
转载时须注明出处及本声明
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2021 年 06 月，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录