Skip to content

CSS动画库

包含js库,和css动画代码不同方式

Animate + wowjs

Animate官网直通车   🚘    wowjs官网直通车   🚘

Animate(js库)

  • 使用非常简单,只需要把通用类 animated 和相应的类添加到元素上就行了。

  • 是一个有趣的,跨浏览器的 css3 动画库,内置了很多典型的 css3 动画,兼容性好使用方便。

wow(js库)

  • 用于实现页面滚动到当前位置时的执行动画效果的库

  • 它提供了一种简单的方法来增强用户的滚动体验,使页面元素在滚动时产生动画效果。

You-need-to-know-css(js库)

官网直通车   🚘

  • 多是动画效果

包括

translucent-bordersmultiple-bordersinner-rounding
background-positionstripes-backgroundellipse
parallelogrambevel-cornerspie-chart
polygonsingle-projection不规则投影
毛玻璃效果文本行斑马条纹常见的文字效果
环形文字选择合适的鼠标光标扩大可点击区域
自定义复选框自定义单选框输入框完美居中
通过阴影弱化背景通过模糊弱化背景交互式图片对比控件
全背景下等宽内容居中绝对底部水平垂直居中
弹性过度闪烁效果打字效果
抖动效果无缝平滑效果延轨迹平滑效果
自定义文字下划线提示气泡自定义滚动条
圣杯布局双飞翼布局类订单布局
Flex 布局1px 线/边弹跳效果
插入换行自定义变量有趣的项目

CSS-Inspiration

官网直通车   🚘

  • CSS 的灵感,以分类的形式,展示不同 CSS 属性或者不同的课题使用 CSS 来解决的各种方法

  • 包含了:布局(Layout)、阴影(box-shadow、drop-shadow)、伪类/伪元素、滤镜(fliter)、边框(border)、背景/渐变(linear-gradient/radial-gradient/conic-gradient)、混合模式(mix-blend-mode/background-blend-mode)、3D、动画/过渡(transition/animation)、clip-path、文本类、综合、CSS-Doodle、SVG 等内容。

巧用 CSS 实现酷炫的充电动画

css_tricks

官网直通车   🚘

  • 通过操作页面配置(特殊三角形、扇形...),生成对应的css代码

  • 记录一些 CSS 的新属性和一点奇技淫巧

  • 在“动”部分下有些动画并不是 CSS 效果,因为没有地方放置,所以暂时寄存在这里

animista

官网直通车   🚘

  • 纯英文界面,不太友好

  • 动画特效很多,根据自己的配置条件去生成css代码

  • 包含了 Animate 动画的大部分内容,算是Animate的超集