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

样式预览

神经蛙博客

点击预览

操作步骤

1. 新增css内容
   • 新建文件source/css/home.css或在已引入的css中新增以下内容

     #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

     
     inject:
      head:
        - <link rel="stylesheet" href="/css/home.css"> # 首页文章卡片擦亮效果
     

3. Hexo三联查看效果即可

   
    hexo cl 
    hexo g 
    hexo s
   

特别鸣谢