当前位置: 首页 > 工具软件 > Visibility.js > 使用案例 >

页面动效(animate.css和wow.js)

楚宏胜
2023-12-01

动效(animate.css和wow.js)的基本使用

网站:https://www.delac.io/wow/

animate.css实现了动效,wow.js实现的用户交互效果(当浏览器出现该元素时执行动画)

  • 使用方法
  1. 引入animate.css和wow.js
<link rel='stylesheet' href='animate.css'/>
<link rel='stylesheet' href='wow.js'/>
  1. 初始化wow
<script>
	new WOW.init()
</script>

4.给需要动效的标签添加类
如果不需要js效果,可以不写style中的内容,并把class中的wow去掉

<div class='wow 动效 animated' style='visibility: visible;animation-name: 动效;'>

动效的类型请参考网址:https://www.swiper.com.cn/usage/animate/index.html

 类似资料: