迅雷官网有这种效果： 迅雷网络-关于我们迅雷是全球领先的共享计算与区块链技术创新企业，公司成立于，基于深耕十几年、获得国际专利的P2SP下载加速技术优势，面向个人用户和企业用户打造了丰富的下载加速、区块链、云计算、影音娱乐等产品及服务，为超过4亿用户创造了高效、智能、安全的互联网体验。/v/dist/aboutus.html
参考：Animate.css+wow.js实现页面滚动到可视区显示动画效果_百事可口的博客-CSDN博客_animate.css wow今天看迅雷官网 /v/dist/aboutus.html实现的滚动到可视区域后显示动画，自己之前没做过这种，非常感兴趣，然后问小伙伴，大部分都没做过类似的，于是乎我只能自己查了第一想到的是swiper，之前写轮播图用过。//usage/animate/index.html但是引入了之后 发现不是特别适合我 而且还有5版本6版本一系列写法兼容问/qq_38594056/article/details/121081566animate动画演示：animate.css动画演示_dowebok/demo//98/
wow.js依赖animate.css，不需要jquery；
cdn：wow (v1.1.2) - Reveal CSS animation as you scroll down a page | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务Reveal CSS animation as you scroll down a page/wow/
引入animate.css
<link href="/case/css/animate.min.css" rel="stylesheet">
加入wow.js
<script src="/js/wow.min.js"></script>
初始化
<script>new WOW().init();</script>
如果在vue2中，需在mounted中写：
<script>export default {mounted() {new WOW().init();},};</script>
data-wow-duration : 动画持续时间，时间越久动画越慢 例如 1s data-wow-delay ： 延迟 时间越久动画越迟出现 例如 1s data-wow-offset ：动画开始的距离，根据浏览器窗口底部框 当设置大的时候意味着动画更难出现 例如10意味着元素内容有10在浏览器中才会出现动画。默认值为0 data-wow-iteration ：动画重复次数 设为 infinite 时会持续不停重复 也可以设置整数
html+CSS 示例
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>使用wow做的项目</title><link href="/case/css/animate.min.css" rel="stylesheet"><style>.container{width:800px;margin:0 auto;}.container ul{display:flex;display:-webkit-flex;justify-content: space-between;flex-wrap: wrap;}.container ul li{width:300px;height:300px;margin-bottom:40px;list-style:none;border-radius:50%;text-align:center;vertical-align:middle;align-items: center;line-height:300px;background-color:pink;}.container ul li:nth-child(4n){background-color:#409EFF;}.container ul li:nth-child(4n+1){background-color:#67C23A;}.container ul li:nth-child(4n+2){background-color:#E6A23C;}</style></head><body><section class="container"><ul><li class="wow bounceInLeft">啊啊啊</li><li class="wow bounceInRight"></li><li class="wow bounceIn"></li><li class="wow bounceInUp"></li><li class="wow bounceInDown"></li><li class="wow slideInUp"></li><li class="wow slideInDown"></li><li class="wow slideInLeft"></li><li class="wow slideInRight"></li><li class="wow lightSpeedIn"></li><li class="wow pulse"></li><li class="wow flipInX">哦哦哦</li><li class="wow flipInY"></li><li class="wow bounce"></li><li class="wow shake"></li><li class="wow wobble"></li><li class="wow rollIn"></li><li class="wow fadeInUpBig" data-wow-delay="0.3s"></li><li class="wow fadeInUpBig" data-wow-delay="0.6s">呃呃呃</li><li class="wow fadeInUpBig" data-wow-delay="0.9s"></li><li class="wow fadeInUpBig" data-wow-delay="1.2s"></li><li class="wow fadeInUpBig" data-wow-delay="1.5s"></li></ul></section><script src="/js/wow.min.js"></script><script>new WOW().init();</script></body></html>
vue2示例
效果类似于这种：迅雷网络-关于我们迅雷是全球领先的共享计算与区块链技术创新企业，公司成立于，基于深耕十几年、获得国际专利的P2SP下载加速技术优势，面向个人用户和企业用户打造了丰富的下载加速、区块链、云计算、影音娱乐等产品及服务，为超过4亿用户创造了高效、智能、安全的互联网体验。/v/dist/aboutus.html
<!--home.vue--><template><div class="container"><div class="page1"><h2 class="wow fadeInUp" data-wow-duration="0.5s">关于我们</h2></div><div class="page2"><div class="test_left"><h3style="line-height: 90px; font-size: 30px"class="wow fadeInUp"data-wow-offset="200"data-wow-duration="1s">公司简介</h3><pstyle="line-height: 40px"class="wow fadeInUp"data-wow-offset="150"data-wow-duration="1s">COMPANY PROFILE深圳市迅雷网络技术有限公司（纳斯达克股票代码：XNET）成立于，是全球领先的共享计算与区块链技术创新企业，同时也是中国用户数领先，历史悠久的互联网品牌之一。迅雷基于深耕十几年、获得国际专利的P2SP下...</p></div></div></div></template><script>export default {mounted() {new WOW().init();},};</script><style lang="scss" scoped>.container {width: 100vw;.page1 {background: url("/v/dist/banner01.jpg?h=445192")no-repeat;height: 618px;width: 100%;h2 {width: 100%;padding-top: 260px;text-align: center;font-size: 48px;font-weight: lighter;letter-spacing: 8px;}}.page2 {background: url(/v/dist/banner02.jpg?h=969d69)no-repeat;position: relative;height: 600px;.test_left {display: inline-block;width: 600px;height: 400px;background-color: rgba(0, 0, 0, 0.631);border-radius: 10px;padding: 30px;position: absolute;margin-top: 60px;margin-left: 60px;}}}</style>
附上animated的各个动画class属性
fade: {title: '淡入淡出',fadeIn: '淡入',fadeInDown: '向下淡入',fadeInDownBig: '向下快速淡入',fadeInLeft: '向右淡入',fadeInLeftBig: '向右快速淡入',fadeInRight: '向左淡入',fadeInRightBig: '向左快速淡入',fadeInUp: '向上淡入',fadeInUpBig: '向上快速淡入',fadeOut: '淡出',fadeOutDown: '向下淡出',fadeOutDownBig: '向下快速淡出',fadeOutLeft: '向左淡出',fadeOutLeftBig: '向左快速淡出',adeOutRight: '向右淡出',fadeOutRightBig: '向右快速淡出',fadeOutUp: '向上淡出',fadeOutUpBig: '向上快速淡出'},bounce: {title: '弹跳类',bounceIn: '弹跳进入',bounceInDown: '向下弹跳进入',bounceInLeft: '向右弹跳进入',bounceInRight: '向左弹跳进入',bounceInUp: '向上弹跳进入',bounceOut: '弹跳退出',bounceOutDown: '向下弹跳退出',bounceOutLeft: '向左弹跳退出',bounceOutRight: '向右弹跳退出',bounceOutUp: '向上弹跳退出'},zoom: {title: '缩放类',zoomIn: '放大进入',zoomInDown: '向下放大进入',zoomInLeft: '向右放大进入',zoomInRight: '向左放大进入',zoomInUp: '向上放大进入',zoomOut: '缩小退出',zoomOutDown: '向下缩小退出',zoomOutLeft: '向左缩小退出',zoomOutRight: '向右缩小退出',zoomOutUp: '向上缩小退出'},rotate: {title: '旋转类',rotateIn: '顺时针旋转进入',rotateInDownLeft: '从左往下旋入',rotateInDownRight: '从右往下旋入',rotateInUpLeft: '从左往上旋入',rotateInUpRight: '从右往上旋入',rotateOut: '顺时针旋转退出',rotateOutDownLeft: '向左下旋出',rotateOutDownRight: '向右下旋出',rotateOutUpLeft: '向左上旋出',rotateOutUpRight: '向右上旋出'},flip: {title: '翻转类',flipInX: '水平翻转进入',flipInY: '垂直翻转进入',flipOutX: '水平翻转退出',flipOutY: '垂直翻转退出'},strong: {title: '强调类',bounce: '弹跳',flash: '闪烁',pulse: '脉冲',rubberBand: '橡皮筋',shake: '左右弱晃动',swing: '上下摆动',tada: '缩放摆动',wobble: '左右强晃动',jello: '拉伸抖动'}
