获得徽章 0
赞了这篇沸点
【阴阳】加载动画 #svg
几天前想到这个点子，于是就尝试着用svg实现了下。动画本身并不复杂，难的地方在于怎么样把这个动画做成响应式的同时保证八卦图的长宽比不变。挣扎一段时间后发现借助svg的preserveAspectRatio="xMidYMid slice"可以实现这个效果: 左右两扇门的实际大小比viewport要大，随着窗口的缩小只居中显示一部分svg。
(preserveAspectRatio="xMidYMid slice"的效果有点像background-position: center center + background-size: cover)
几天前想到这个点子，于是就尝试着用svg实现了下。动画本身并不复杂，难的地方在于怎么样把这个动画做成响应式的同时保证八卦图的长宽比不变。挣扎一段时间后发现借助svg的preserveAspectRatio="xMidYMid slice"可以实现这个效果: 左右两扇门的实际大小比viewport要大，随着窗口的缩小只居中显示一部分svg。
(preserveAspectRatio="xMidYMid slice"的效果有点像background-position: center center + background-size: cover)
展开
3
44
赞了这篇文章
赞了这篇沸点
赞了这篇沸点
如果你想了解一下 CSS 中 border-radius 的8个参数的用法，这个交互拖拽式的圆角生成器「📐Border Radius Slider」或许能帮你去了解8个参数的使用，并且你也能用它轻易地去生成你需要形状。（建议使用桌面浏览器打开，移动端未适配）
地址：
gwokhou.info
GitHub：github.com
地址：
gwokhou.info GitHub：
github.com
展开
2
34
赞了这篇文章
赞了这篇文章
赞了这篇沸点
anime: 一款轻量级的 JS 动画库，使用 anime 可以做出各类华丽的动画，支持 CSS transform、SVG 等变幻，通过时间轴、关键帧等特性构建出绚丽的动画效果。GitHub 地址：github.com
github.com
2
72
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇沸点
vue的一个环状进度展示组件. 觉得还算好看.
可以配置颜色, 环状宽度, 可以加个footer说明. 自带计数效果
可以配置颜色, 环状宽度, 可以加个footer说明. 自带计数效果
评论
9
赞了这篇沸点
vue-device-detector vue包裹后的 device.js. 根据ua区分 ios/andriod/ iphonex / weixin /dingding , mobile/desktop . 支持ts提示
评论
2
赞了这篇沸点
vue-storage-watcher 一个对 localstorage / sessionStorage 操作的vue插件, 支持 timeout, 变动通知, ts 类型等特性.
评论
15
赞了这篇沸点
看惯了你那千篇一律的轮播图, 是时候来点新鲜的了.
看过来, 给你的轮播图凹造型
. 十分佩服原作者的代码. 我真的看的头疼了.
vue 组件仓库:github.com
在线凹造型(demo) 地址:
dreambo8563.github.io
喜欢的给我点个star吧
看过来, 给你的轮播图凹造型
. 十分佩服原作者的代码. 我真的看的头疼了. vue 组件仓库:
github.com在线凹造型(demo) 地址:
dreambo8563.github.io喜欢的给我点个star吧
展开
4
39
赞了这篇沸点
赞了这篇沸点
17
73
