明月登楼

Typecho 的 handsome 主题首页头像转动并放大CSS代码
突然发现本博客左边的头像固定的不好看,于是就借来【许建华博客】的分享CSS代码给美化了一下,具有动感的头像给人的感...
扫描右侧二维码阅读全文
18
2018/08

Typecho 的 handsome 主题首页头像转动并放大CSS代码

突然发现本博客左边的头像固定的不好看,于是就借来【许建华博客】的分享CSS代码给美化了一下,具有动感的头像给人的感觉还是不一样的!

本项修改的是首页头像,将鼠标放至头像后使其转动并放大。效果参考我博客左侧头像。
仍为本主题使用,操作方式为:将以下代码添加至后台主题设置 自定义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
}
最后修改:2018 年 08 月 18 日 09 : 49 AM
如果觉得我的文章对你有用,请随意赞赏

12 条评论

  1. 在花

    评论测试

    1. 明月登楼
      @在花

      欢迎,谢谢支持!

  2. 芭比

    这个也可以应用到评论里的头像吧

    1. 明月登楼
      @芭比

      是的!可以的!

  3. 闲鱼

    (๑•̀ㅁ•́ฅ)放大的时候会导致整个栏目向下浮动,强迫症看着不太好

    1. 明月登楼
      @闲鱼

      哦,是嘛?我还没有发现呢?

  4. ACG资源

    了解一下

    1. 明月登楼
      @ACG资源

      谢谢支持哦!

  5. boke112导航

    每次折腾都有新内容分享,不错

    1. 明月登楼
      @boke112导航

      呵呵,见笑了!

  6. 梁兴健

    同理也可以添加到评论区头像

    1. 明月登楼
      @梁兴健

      嗯,是的!

发表评论