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