直接上代码,我相信你肯定可以看懂。
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">.item {width: 200px;height: 200px;margin: 30px auto;background-color: red;}.item2 {width: 200px;height: 200px;margin: 30px auto;background-color: red;}.box {width: 500px;height: 2000px;background-color: royalblue;margin: 20px auto;}</style><link rel="stylesheet" href="http://zhangli6.top/texiao/animate.min.css"><script src="http://zhangli6.top/texiao/wow.js" type="text/javascript" charset="utf-8"></script></head><body><!-- wow : 添加wow演示, fadeInUpBig : 向上快速淡入,data-wow-delay : 动画开始前延迟 0.3秒 --><div class="box"><li class="item wow animated fadeIn">啊哈哈哈</li></div><div class="box"><li class="item wow swing animated">啊哈哈哈</li></div><li class="item2 wow swing animated ">啊哈哈哈</li></body><script type="text/javascript">new WOW().init();</script></html>
老铁你肯定已经出效果了,不过我建议你把animate.min.css和wow.js下载下来放到本地。因为你现在看到的在我的服务器上。
当你在vue中是使用wow.js请点击这里
如果觉得《wow.js插件 让滚动动画更简单 让生活更美好》对你有帮助,请点赞、收藏,并留下你的观点哦!