UI设计
心谭
公众号搜索:「心谭博客」
专注前端与算法,一起 day day up!
展开
-
「翻译」逐步替换Sass
本文来自心谭博客·「译文」逐步替换Sass,最新文章请见导航页,欢迎交流✿✿ヽ(°▽°)ノ✿翻译说明这是一篇介绍现代 css 核心特性的文章,并且借助 sass 进行横向对比,充分体现了 css 作为一门设计语言的快速发展以及新特性为我们开发者带来的强大生产力。第一次尝试翻译技术文,为了让文章更通俗易懂,很多地方结合了文章本意和自己的说话风格。另外,时间有限水平有限,难免有些失误或者翻译...原创 2019-06-19 14:50:54 · 202 阅读 · 0 评论 -
CSS动画设计专题(一):字体特效
本文来自《动画设计·字体特效》,更多文章放在了Github欢迎交流和Star特效一览划线动态:背景高亮:色块进出:划线动态效果图原理首先,利用::after和::before就可以画出上下两条线,所以只需要一个 dom 元素即可。其次,对于鼠标移入的动画,要给上面两个伪元素设置:hover选择器。最后是处理动画方向。我们以上面的线条为例,在鼠标移入的时候,是从右到...原创 2019-07-29 19:00:36 · 1210 阅读 · 0 评论 -
前端动画专题(二):输入框特效
本文来自「心谭博客」的《动画设计·输入框特效》,更多文章放在了Github欢迎交流和Star特效一览划线动态:动态边框:划线动态效果图原理和代码:before 和 :after伪元素指定了一个元素文档树内容之前和之后的内容。由于input标签不是可插入内容的容器。所以这里下划线无法通过伪元素来实现。需要借助其他 dom 节点。<div> <inpu...原创 2019-07-31 19:38:36 · 499 阅读 · 0 评论 -
前端动画专题(三):撩人的按钮特效
本文来自「心谭博客」的《动画设计·按钮特效》,更多文章放在了Github欢迎交流和Star特效一览滑箱:果冻:脉冲:闪光:气泡:滑箱特效效果图原理因为 button 元素可以使用 before/after 伪元素,所以借助伪元素,可以实现动态图中的遮盖层。为了避免回流重绘,滑箱的运动方向是垂直方向,所以使用scaleY属性。对于动画的方向,需要借助trans...原创 2019-08-02 10:38:30 · 723 阅读 · 1 评论