wefinger

添加文章头图圆角显示、获取焦点放大、头像转动特效
如本站首页,是不是比原版好看一点呢。
扫描右侧二维码阅读全文
13
2018/05

添加文章头图圆角显示、获取焦点放大、头像转动特效

如本站首页,是不是比原版好看一点呢。

废话不多说,直接上代码

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

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

.item-thumb{
    border-radius: 15px;  
}
  • 文章头图获取焦点放大
/*首页文章图片获取焦点放大*/
.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);
}
  • 头像转动特效
/*首页头像转动*/
.thumb-lg{
    width:100px; 
}

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

i> 食用方式,选择需要使用的方式,直接复制到handsome主题文件夹中的/assets/css/handsome.min.css。然后浏览器ctrl+F5强制刷新即可看到效果

Last modification:May 17th, 2018 at 06:21 pm
If you think my article is useful to you, please feel free to appreciate

7 comments

  1. XSY

    建议不要修改文件,更新麻烦

    1. wefinger
      @XSY

      emmm无所谓了。。更新再折腾

      1. XSY
        @wefinger

        |´・ω・)ノ

  2. XSY

    嘿嘿

    1. wefinger
      @XSY

      哈哈,搬运工

  3. 孟小N

    嗯,是我在群里推荐的吧,哈哈,我感觉加到主题的开发者CSS比直接修改文件要更好一些

    1. wefinger
      @孟小N

      哈哈,我觉得直接改文件简单直接更暴力

Leave a Comment