Hexo为主页文章卡片添加擦亮动画效果

样式预览

操作步骤

  1. 新增css内容
    • 新建文件source/css/home.css或在已引入的css中新增以下内容
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      #recent-posts > .recent-post-item:not(a)::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 200%;
        background: linear-gradient(to right, transparent, white, transparent);
        transform: translateX(-200%);
        transition: transform 0.5s linear;
        z-index: 1;
      }
      #recent-posts > .recent-post-item:not(a):hover::before {
        transform: translateX(100%) skewX(-60deg);
      }
  2. 引入内容
    • 在_config.anzhiyu.yml主题配置文件下inject配置项中head处引入home.css
      1
      2
      3
      4
         
      inject:
        head:
          - <link rel="stylesheet" href="/css/home.css"> # 首页文章卡片擦亮效果
  3. Hexo三联查看效果即可
    1
    2
    3
    4

    hexo cl 
    hexo g 
    hexo s

特别鸣谢

本文是基于铭心石刻的魔改文章的搬运记录，方便后续自己优化。