简单38天前更新关注私信 效果 将代码放置于自定义CSS内 /*底部板块三图片border*/ .footer-miniimg { p{ position: relative; &:hover { filter: contrast(1.1); } &:active { filter: contrast(0.9); } &::before, &::after{ content: ""; border: 2px solid; border-image: linear-gradient(45deg, gold, deeppink) 1; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; animation: clippath 3s infinite ; } &::before{ animation: clippath 3s infinite -1.5s linear; } } } @keyframes clippath { 0%, 100% { clip-path: inset(0 0 96% 0); filter: hue-rotate(0deg); } 25% { clip-path: inset(0 96% 0 0); } 50% { clip-path: inset(96% 0 0 0); filter: hue-rotate(360deg); } 75% { clip-path: inset(0 0 0 96%); } } 温馨提示: 本文最后更新于2025-03-23 16:19:43,某些文章具有时效性,若有错误或已失效,请在下方 留言或联系 Re blog 。 © 版权声明 🎀 🌸 📜 版权声明: 本文为原创文章,版权归 Re blog 所有 未经许可,禁止转载。如需转载,请联系作者并获得授权 授权方式:CC BY-NC-SA 4.0(署名-非商业性使用-相同方式共享) THE END教程技术教程 喜欢就支持一下吧点赞10 分享QQ空间微博QQ好友海报分享复制链接收藏