小提示:点击标题直链官网查看文档/在线预览~

1、animate

animate.css 动画库,预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果,几乎包含了所有常见的动画效果,可在线预览效果~,
animate

1、通过npm或者yarn下载引入
  npm install animate.css --save 或 yarn add animate.css
  
  import "animate.css"
``` js
##### 2、通过cdn引入
```
基本用法
<h1 class="animate__animated animate__bounce">Hi animate</h1>

Javascript用法
const element = document.querySelector('.element');
element.classList.add('animate__animated','animate__bounceOutLeft');

2、You-need-to-know-css

一共包含43个CSS的小样式,可在线预览还在持续更新中~,包含各种css效果实现尤其是动画效果,还可以本地克隆安装css预览,可在线预览效果~

3、CSS-Inspiration

如果没有灵感去可以寻找到使用或者是学习 CSS 的灵感,以分类的形式,展示不同 CSS 属性或者不同的课题使用 CSS 来解决的各种方法,里面包含、布局(Layout)、阴影(box-shadow、drop-shadow)、伪类/伪元素、滤镜(fliter)、边框、背景/渐变(linear-gradient/radial-gradient/conic-gradient)等等小样式,可在线预览效果~
CSS-Inspiration

4、CSS Tricks

这里总结一些常用的 CSS 样式记录一些 CSS 的新属性和一点奇技淫巧在“动”部分下有些动画并不是 CSS 效果,因为没有地方放置,所以暂时寄存在这里,可在线预览效果~
CSS Tricks

5、animista.net

这里有各种样css实现效果,还有代码演示,可在线自行调节动画参数,可直接复制代码,还可以复制压缩后的代码,可在线预览效果~
animista.net

上一篇 下一篇