江苏龙网

  1. 首页 > 人文 > >

科技资讯眺望|能解决 80% 需求的 10个 CSS动画库( 二 )


$(".my-element").addClass("vivify slideInLeft")与Animate CSS一样 ， Vivify 还提供了一些类来控制动画的持续时间和延迟 。
延迟和持续时间类在以下间隔中可用：
4. Magic Animations CSS3网站地址:
网站描述: Magic CSS3 Animations 是 CSS3 动画的包 ， 伴有特殊的效果 ， 用户可以自由的在 web 项目中使用 。
科技资讯眺望|能解决 80% 需求的 10个 CSS动画库这个动画库有一些非常漂亮和流畅的动画 ， 特别是3D的 。 没什么好说的 ， 自己去尝试 。
使用 JS 方式：
document.querySelector('.my-element').classList.add('magictime', 'fadeIn')使用 JQ 方式：
$(".my-element").addClass("magictime fadeIn")5. cssanimation.io
科技资讯眺望|能解决 80% 需求的 10个 CSS动画库网站地址:
cssanimation.io是一大堆不同动画的集合 ， 总共大概有200个 ， 这很强大 。 如果你连在这里都没有找到你所需的动画 ， 那么在其它也将很难找到 。
它的工作原理与 Animista 类似 。 例如 ， 可以选择一个动画并直接从站点获取代码 ， 或者也可以下载整个库 。
科技资讯眺望|能解决 80% 需求的 10个 CSS动画库用法
将cssanimation {animation_name}添加到指定的元素上 。
使用 JS
document.querySelector('.my-element').classList.add('cssanimation','fadeIn')使用 JQ
$(".my-element").addClass("cssanimation fadeIn")还可以添加 infinite 类 ， 这样动画就可以循环播放 。
此外 ， cssanimation.io还为我们提供了动漫字母的功能 。 使用这个需要引入letteranimation.js文件 ， 然后将le {animation_name}添加到我们的文本元素中 。
要使字母按顺序产生动画 ， 添加sequence类 ， 要使它们随机产生动画 ， 添加random类 。
Sequence
科技资讯眺望|能解决 80% 需求的 10个 CSS动画库Random
科技资讯眺望|能解决 80% 需求的 10个 CSS动画库6.Angrytools网站地址:
如果使用不同的生成器 ， Angrytools实际上是一个集合 ， 其中还包括CSS动画生成器 。
它可能不像Animista那么复杂 ， 但我觉得这个也很不错 。 这个站点还提供了一些自定义动画的特性 ， 比如动画的持续时间或延迟 。
但是我喜欢的是 ， 我们可以在其展示时间轴上添加自定义的keyframes ， 然后可以直接在其中编写代码 。 另外 ， 也可以编辑现有的 。
科技资讯眺望|能解决 80% 需求的 10个 CSS动画库当我们完成的时候 ， 可以得到完整的动画代码 ， 也可以下载它 。
7.Hover.css网站地址: 网站描述: 纯CSS3鼠标滑过效果动画库
Hover.css是许多CSS动画的集合 ， 与上面的动画不同 ， 每次将元素悬停时都会触发 。


推荐阅读


上一篇：萱草|SpringBoot 2 webflux 牛刀小试

下一篇：路人战队|自取其辱？董明珠再邀雷军对赌，网友：空调老和手机较什么劲？