纯 CSS 丝滑边框线条动画
出处：
mp.weixin.qq.com
作者：
南城
在这个网站（minimal-portfolio-swart.vercel.app）发现一个不错的交互效果，用户体验效果很不错。如上图所示，这个卡片上有一根白色的线条围绕着卡片移动，且在线条的卡片内部跟随这一块模糊阴影，特别是在线条经过卡片圆角部分有特别丝滑的感觉。
今天的文章就来解析如何实现这种效果，文末附源码预览地址。根据示例图片分析需要实现的功能点如下：
线条跟随卡片边框匀速移动
线条内部对应有模糊阴影
圆角部分丝滑动画
这里为什么单独说明圆角部分是因为这块需要特殊处理，请看后面的文章。
查看原文
37
技术
lddgo
分享于
2024-05-30
