Hexo添加头像呼吸灯-四次元拾光

AI智能摘要

To add a breathing light effect to the avatar on Hexo, directly insert the provided CSS code into the `custom.css` file. The animation is defined for both light and dark themes using `@keyframes`. The box shadow changes size and intensity over 4 seconds, creating a pulsating appearance for the avatar. The color and timing can be adjusted as needed. This method allows for easy customization without disrupting the overall site design.

— 此摘要由AI分析文章内容生成，仅供参考。

直接在 custom.css添加如下代码即可，颜色和时间可调

/* 头像呼吸灯 */
[data-theme="light"] .avatar-img {
  animation: huxi_light 4s ease-in-out infinite;
}
[data-theme="dark"] .avatar-img {
  animation: huxi_dark 4s ease-in-out infinite;
}
@keyframes huxi_light {
  0% {
    box-shadow: 0px 0px 1px 1px #e9f5fa;
  }
  50% {
    box-shadow: 0px 0px 5px 5px #e9f5fa;
  }
  100% {
    box-shadow: 0px 0px 1px 1px #e9f5fa;
  }
}
@keyframes huxi_dark {
  0% {
    box-shadow: 0px 0px 1px 1px #39c5bb;
  }
  50% {
    box-shadow: 0px 0px 5px 5px #39c5bb;
  }
  100% {
    box-shadow: 0px 0px 1px 1px #39c5bb;
  }
}

版权声明 1 本网站名称：四次元拾光
2 本站永久网址： https://yuika.cn
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
5 本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可

THE END