mp.weixin.qq.com
获得徽章 0
- 【每日时报】2020.03.16
[文章] 如何推动前端团队的基础设施建设：
mp.weixin.qq.com
[文章] 如何在 JS 中，取消异步任务：ckeditor.com
[文章] 专访阿里本地生活王磊：兵对兵，将对将，全面对标和竞争：mp.weixin.qq.com
[类库] AlloyFinger 是多点触控手势库，这个需要在手机客户端上看效果：github.com
[工具] 一个基于 Electron 的音乐软件：github.com
[资源] 统一中文文案、排版的相关用法，降低团队成员之间的沟通成本，增强网站气质：mazhuang.org
今天是每日时报陪伴您的第 322 天github.com 展开评论7 - 【阴阳】加载动画 #svg
几天前想到这个点子，于是就尝试着用svg实现了下。动画本身并不复杂，难的地方在于怎么样把这个动画做成响应式的同时保证八卦图的长宽比不变。挣扎一段时间后发现借助svg的preserveAspectRatio="xMidYMid slice"可以实现这个效果: 左右两扇门的实际大小比viewport要大，随着窗口的缩小只居中显示一部分svg。
(preserveAspectRatio="xMidYMid slice"的效果有点像background-position: center center + background-size: cover)展开344
