animate.css+wow.js实现网页动画

animate文档地址
wow.js文档地址

<!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>animate动画</title><link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css"></head>
<style>.wrap {display: flex;align-items: center;justify-content: space-between;margin-top: 200px;flex-wrap: wrap;width: 1200px;margin: auto;}.wrap div {width: 260px;height: 260px;border-radius: 50%;background: lightseagreen;margin: 50px;}.btn {width: 200px;height: 50px;text-align: center;line-height: 50px;background: lightseagreen;color: #fff;cursor: pointer;animation-duration: 2s;animation-delay: 300ms;animation-iteration-count: infinite;animation-name: pulse;}
</style><body><div class="btn">点击动画</div><div class="wrap"><div id="one" class="wow bounceInDown"></div><div class="wow zoomInDown"></div><div class="wow flipInY"></div><div class="wow pulse"></div><div class="wow rubberBand"></div><div class="wow shake"></div><div class="wow swing"></div><div class="wow tada"></div><div class="wow wobble"></div><div class="wow jello"></div><div class="wow heartBeat"></div><div class="wow bounceInRight"></div></div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/wow/0.1.11/wow.min.js"></script>
<script>$(function () {// 初始化wownew WOW().init();$.fn.extend({animateCss: function (animationName) {var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';$(this).addClass('animated ' + animationName).one(animationEnd, function () {$(this).removeClass('animated ' + animationName);});}});$('.btn').on('click', function () {$('.wrap').animateCss('bounceInUp');});});
</script></html>

animate.css+wow.js实现网页动画相关推荐

Animate.css+wow.js实现页面滚动到可视区显示动画效果
今天看迅雷官网 https://www.xunlei.com/v2018/dist/aboutus.html 实现的滚动到可视区域后显示动画,自己之前没做过这种,非常感兴趣,然后问小伙伴, 大部分都没 ...
vue3使用wow.js实现网页动画
实现效果效果就是类似于网页各个板块的加载动画,当你控制滚动条滑动到某个板块进行显示时,当前在可是范围内的板块会根据设定好的动画以及动画时间显示出来. WoW.JS官网注意点:配合animate.c ...
wow.js+animate.css实现滚动加载动画
迅雷官网有这种效果: 迅雷网络-关于我们迅雷是全球领先的共享计算与区块链技术创新企业,公司成立于2003年,基于深耕十几年.获得国际专利的P2SP下载加速技术优势,面向个人用户和企业用户打造了丰富的下 ...
网页版2048html制作,基于HTML＋CSS＋JS的网页版2048的实现.pdf
ELECTRONICS WORLD ・探索与观察基于HTML+CSS+JS的网页版2048的实现山西农业大学王艺燕 [摘要] 描述了一个使用HTML和CSS进行UI界面设计,使用JS进行后台逻辑 ...
react基于WOW.js和Animate.css实现特定位置的动画执行
写在前面:对于css3动画小白的我,自己动手写动画确实很艰难,但是无意间了解到有相关库可以实现,为什么不用呢,嘿嘿(当然也在学css3啦) 文章目录效果展示官网文档实现步骤 1.下载WOW.js ...
Nuxtjs上使用wow.js+animate.css实现滚动加载动画
最近做个官网(技术栈使用Nuxt)需要用到滑动到可视区域才触发动画效果,几乎所有的页面都要"动"起来,手写要累死的节奏,赶紧寻找工具!发现wow.js+animate.css可以满 ...
3 css 奖品出现弹出动画_【技术】nuxt中引入wow和animate.css 页面随滚动条出现动画...
1. 通过nodejs安装 cnpm install wowjs --save-dev 安装成功后在"package.json: "wowjs": "^1.1. ...
【技术】nuxt中引入wow和animate.css随页面滚动出现动画
通过nodejs安装 cnpm install wowjs --save-dev 安装成功后:"package.json "wowjs": "^1.1.3&qu ...
使用wow.js让网页“动起来”
wow.js 可以实现网页滑动到元素时,产生动画效果,但是目前只支持触发一次(页面不刷新的的情况下). 引入animate.css和wow.js <link rel="styleshe ...

animate.css+wow.js实现网页动画

animate.css+wow.js实现网页动画相关推荐

最新文章

热门文章