洛小依

简单说下handsome的一些样式修改
handsome主题前言handsome是一个功能比较全面的一款Tyoecho主题,这款主题基本上集成了博客所有能...
扫描右侧二维码阅读全文
12
2018/12

简单说下handsome的一些样式修改

handsome主题前言

handsome是一个功能比较全面的一款Tyoecho主题,这款主题基本上集成了博客所有能用到的功能,包括音乐引入,视频引入,相册,留言,丰富的独立页面等等,但是如果所有人都用同一种主题,岂不是太大众了?不怕,我们可以魔改下我们的主题,让我们的主题变的与众不同,如何魔改呢,请往下看;

handsome主题魔改CSS

首先我们要下载我集成好的CSS文件,此文件内收集了基本所有handsome主题的魔改CSS样式,并且上传至我们服务器/usr/themes/handsome/assets/css目录下。

食用方法

通过引入的方式将其引入到我们原文件下,这时很多小伙伴会说handsome主题的设置里可以添加CSS样式,不需要这么麻烦,其实,这个每个人都有所不一样的见解,因为我不喜欢把过多的CSS文件样式写在页面上,让人感觉很不简洁,当然你也可以直接打开CSS文件,将文件内的样式代码复制并保存在handsome的设置里。至于怎么引用就很简单了。

找到这个目录/usr/themes/handsome/component,打开header.php文件,在第57行后添加这句话。

<link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/party.css?v=<?php echo 
Handsome::$version.Handsome::$versionTag ?>" type="text/css" />

刷新页面即可。

扩展样式

以下代码是文章内的图片抖动并且放大,之所以不放在css文件里是因为经过测试,有些不兼容,所有如果要使用这个效果建议放在handsome主题设置下的自定义css里方可

/*文章内图片抖动*/
img:hover {
-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)
}

下载地址

链接: https://share.weiyun.com/5VaEFfr (密码:ZvSM)。

最后修改:2019 年 04 月 16 日 03 : 43 PM
如果觉得我的文章对你有用,请随意赞赏

发表评论