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

本文操作步骤为anzhiyu主题，其他主题可以自行尝试,该方法通过外部引入，无需修改主题源文件

本文介绍了如何为主页文章卡片添加擦亮动画效果。
内容转载自铭心石刻

操作步骤

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
hexo clean; hexo g; hexo s