CSS
3篇文章 · 0订阅
  • 纯CSS实现简单骨骼动画
    1. 背景 某天设计师来找我说，“这个心愿牌傻傻地挂在那不好看，加个动效呗，就左右摆动一下就行，很简单的！”，我一想，行呀，提升用户视觉体验，开搞。 十分钟后，不对呀，这个左右摆动好假，不像现实中风吹的效果。 冷静思考，为啥这个摆动会没有灵魂。于是拿起工卡开始摆动，看看现实中的…
    CSS
  • 巧用 CSS 实现酷炫的充电动画
    循序渐进，看看只使用 CSS ，可以鼓捣出什么样的充电动画效果。 欧了，勉强就是它了。有了电池，那接下来直接充电吧。最最简单的动画，那应该是用色彩把整个电池灌满即可。 有内味了，如果要求不高，这个勉强也就能够交差了。通过蓝色渐变表示电量，通过色块的位移动画实现充电的动画。但是总…
    CSS 前端
    巧用 CSS 实现酷炫的充电动画
  • 前端动画专题（三）：撩人的按钮特效
    因为 button 元素可以使用 before/after 伪元素，所以借助伪元素，可以实现动态图中的遮盖层。 为了避免回流重绘，滑箱的运动方向是垂直方向，所以使用scaleY属性。对于动画的方向，需要借助transform-origin改变动画原点。 果冻特效可以分割成 5 …
    CSS