1、首页
- 列表项目
文章板块样式圆角化展开目录
将以下代码添加至自定义 CSS
圆角大小可修改15px数值
/首页文章版式圆角化/
.panel{
border: none;
border-radius: 15px;}
.panel-small{
border: none;
border-radius: 15px;}
.item-thumb{
border-radius: 15px; }
2、首页文章图
- 列表项目
片鼠标移动悬停放大展开目录
将以下代码添加至自定义 CSS
放大的时间和大小自行修改以下数值
/首页文章图片获取焦点放大/
.item-thumb{
cursor: pointer;
transition: all 0.6s; }
.item-thumb:hover{
transform: scale(1.05); }
.item-thumb-small{
cursor: pointer;
transition: all 0.6s;}
.item-thumb-small:hover{
transform: scale(1.05);}
3、首页头像转动并放大展开目录
将以下代码添加至自定义 CSS
转动快慢和头像大小自行修改数值
/首页头像自动旋转/
.thumb-lg{
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}
4、首页头像放大并自动旋转展开目录
将以下代码添加至自定义 CSS
旋转速度请修改3s数值
/首页头像放大并自动旋转/
.thumb-lg{
width:130px;}
@-webkit-keyframes rotation{
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}}
.img-full{
-webkit-transform: rotate(360deg);
animation: rotation 3s linear infinite;
-moz-animation: rotation 3s linear infinite;
-webkit-animation: rotation 3s linear infinite;
-o-animation: rotation 3s linear infinite;}
5、自定义滚动条滑块展开目录
将以下代码添加至自定义 CSS
/定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸/
::-webkit-scrollbar{
width: 3px;
height: 16px;
background-color: rgba(255,255,255,0);}
/定义滚动条轨道 内阴影+圆角/
::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: rgba(255,255,255,0);}
/定义滑块 内阴影+圆角/
::-webkit-scrollbar-thumb{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;}
6、鼠标点击特效展开目录
将以下代码添加至 handsome/component/footer.php
样式 1（文字）
字体自行修改
样式 2（爱心）
7、文章标题居中展开目录
将以下代码添加至自定义 CSS
/文章标题居中/
.panel h2{
text-align: center; }
.post-item-foot-icon{
text-align: center;}
8、首页文章版式阴影化展开目录
将以下代码添加至自定义 CSS
阴影颜色修改rgba后面的值
/panel阴影/
.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);}
如果也想使盒子四周也有阴影，加上以下代码
.app.container {
box-shadow: 0 0 30px rgba(255, 112, 173, 0.35);}
9、博客显示天气展开目录
进入 https://www.seniverse.com 注册账号
进入 https://www.seniverse.com/widget/get 根据自己的博客主题配置样式
将获得的代码添加在 /handsome/component/headnav.php 中适当的位置，推荐放在搜索前后
10、改变导航栏图标颜色（来自梁兴健个人博客）展开目录
导航栏默认配置为
{"name":"音乐","class":"glyphicon glyphicon-music","link":"xxx.com"}
添加一个名为 "text-success" 的类
{"name":"音乐","class":"glyphicon glyphicon-music text-success","link":"xxx.com"}
这时图标就会变为绿色
下面是颜色列表
（默认）defualt
（绿色）success
（深色）primary
（浅蓝）info
（黄色）warning
（红色）danger
替换就好
11、首页图片鼠标悬停放大，但不出框
/首页文章版式圆角化，及头图鼠标悬停放大/
.index-post-img,.entry-thumbnail,.panel,.panel-small{
overflow: hidden;
border: none;
border-radius: 20px;
}
.index-post-img img,.entry-thumbnail img{
cursor: pointer;
transition: all 0.6s;
}
.index-post-img img:hover,.entry-thumbnail img:hover{
transform: scale(1.1);
}
- The End -
