1、首页

  1. 列表项目

文章板块样式圆角化展开目录
将以下代码添加至自定义 CSS

圆角大小可修改15px数值

/首页文章版式圆角化/
.panel{

border: none;
border-radius: 15px;

}

.panel-small{

border: none;
border-radius: 15px;

}

.item-thumb{

border-radius: 15px;  

}
2、首页文章图

  1. 列表项目

片鼠标移动悬停放大展开目录
将以下代码添加至自定义 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 -
Last modification:November 23rd, 2018 at 10:48 pm
If you think my article is useful to you, please feel free to appreciate