Typecho 博客 Handsome 主题常用魔改代码 - 叽叽's Blog

酷酷的叽叽

Typecho 博客 Handsome 主题常用魔改代码
1、首页文章图片鼠标移动悬停放大放大的时间和大小自行修改以下数值/*首页文章图片获取焦点放大*/ .item-th...
扫描右侧二维码阅读全文
23
2019/07

Typecho 博客 Handsome 主题常用魔改代码

本帖所有资源整合转载于网络。

将以下代码添加至自定义 CSS

1、首页文章图片鼠标移动悬停放大

放大的时间和大小自行修改以下数值

/*首页文章图片获取焦点放大*/
.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);
}

2、首页头像转动并放大

#转动快慢和头像大小自行修改数值
/*首页头像自动旋转*/
.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
}

3、文章标题居中

/*文章标题居中*/
.panel h2{
    text-align: center; 
}
.post-item-foot-icon{
    text-align: center;
}

4、首页文章版式阴影化

#阴影颜色修改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);
}

5、首页图片鼠标悬停放大,但不出框

/*首页文章版式圆角化,及头图鼠标悬停放大*/

.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);
}

6.首页文章板块样式圆角化

圆角大小可修改15px数值

/*首页文章版式圆角化*/
.panel{
    border: none;
    border-radius: 15px;
}

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

.item-thumb{
    border-radius: 15px;  
}
文章名: 《Typecho 博客 Handsome 主题常用魔改代码》
文章链接:http://blog.qq-a.cn/index.php/archives/15/
联系方式:9075512@qq.com
除特别注明外,文章均为叽叽原创,转载时请注明本文出处及文章链接
最后修改:2019 年 08 月 26 日 02 : 55 PM
如果觉得我的文章对你有用,请随意赞赏

1 条评论

  1. 叽叽 Internet Explorer 11.0 Windows 10

发表评论