好!欢迎访问迷津渡口 现在时间是: 天气 °C ~ °C

迷津渡口

越感到迷惑 越接近真理

animate.css结合jquery实现完美动画效果

css3带来了更炫的效果,虽然写动画有点麻烦,但还是得懂啦^_^

animate.css来自大牛Daniel Eden,这个css库实现包装了一堆酷炫的动画效果,而使用只需要设置类而已,大大简化了动画的使用。

Github项目地址:下载 Demo

使用方法

1、首先到官网下载文件,找到animate.min.css,引入文件:

<head>
  <link rel="stylesheet" href="animate.min.css">
</head>


2、为元素添加动画类,具体看Demo,自行选择需要的效果,必须添加一个animated类和一个效果类例如bounceIn类:

<div id="demo" class="animated bounceIn">Animate.css Demo</div>

设置好动画类之后刷新即可查看效果,但是动画只能执行一次。


3、利用jquery配置,实现鼠标控制动画执行,其实需要不断得删除添加类:

<script>
$(document).ready(function(){
	$("#demo").mouseover(function(){
		$(this).addClass("animated swing");
	});	
	$("#demo").mouseleave(function(){
		$(this).removeClass("animated swing");
	});
});
</script>


注意事项

重点注意元素的位置属性,动画是利用元素的相对位置执行的,例如本站的导航的子菜单开始隐藏在left:-9999px;使用时需要设置left:auto;,才能正常看到动画。


所有完整的动画效果查看Demo,然后自己尝试一下吧。

点赞13
 标签: css css动画 animate.css
   支持一下
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
 点赞
 签到
 表情
 图片
 代码
提交评论

清空信息
关闭评论
inwardoutward
 inwardoutward 约 7 小时前回复
#122
<a href="http://www.sundialproductions.net/nike-air-max-90-gs-hyper-rosa-nike-schuhed">nike air max 90 gs hyper rosa nike</a> <a href="http://www.survivewatercrisis.net/air-jordan-11-low-infrarot-23-billig-kurpese">air jordan 11 low infrarot 23 billig</a> <a href="http://www.szczybelski.net/adidas-john-wall-2-gr%C3%B8nn-bl%C3%A5-obuva">adidas john wall 2 gr酶nn bl氓</a> <a href="http://www.tammyjdalton.net/nike-tanjun-hombres-gris-espadrilles-obuvf">nike tanjun hombres gris espadrilles</a> <a href="http://www.tastingtheacorn.net/salomon-gcs-athletic-trail-marr%C3%B3n-p%C3%BArpura-obuvf">salomon gcs athletic trail marr贸n p煤rpura</a> <a href="http://www.technologyhandyman.net/femmes-air-jordan-retro-5-rouge-or-schuhef">femmes air jordan retro 5 rouge or</a>
inwardoutward http://www.inwardoutward.net/
iranqnap
 iranqnap 2019-03-19 03:52回复
#121
<a href="http://www.beoshoes.com/adidas-ultra-boost-uncaged-triple-negro-zx-flux-schuhed">adidas ultra boost uncaged triple negro zx flux</a> <a href="http://www.biyotestatik.com/adidas-porsche-design-iii-marrone-grigio-scarpec">adidas porsche design iii marrone grigio</a> <a href="http://www.deputadowasny.com/houston-texans-red-jersey-nflw">houston texans red jersey</a> <a href="http://www.gluplayerhub.com/nike-will-compton-ash-one-color-tennessee-titans-nfl-51-pullover-hoodie-nflx">nike will compton ash one color tennessee titans nfl 51 pullover hoodie</a> <a href="http://www.moduticket.com/nike-air-force-blazer-bleu-kurpesa">nike air force blazer bleu</a> <a href="http://www.mycqhair.com/nike-free-run-4.0-gr%C3%A5-and-rosa-jordans-butyf">nike free run 4.0 gr氓 and rosa jordans</a>
iranqnap http://www.iranqnap.com/
xmrujo
 xmrujo 2019-03-18 21:04回复
#120
<a href="http://www.seymourdugan.com/nike-air-max-90-vt-gr%C3%B8nn-obuvl">nike air max 90 vt gr酶nn</a> <a href="http://www.dkstekstil.com/nike-air-huarache-s%C3%B8lv-gr%C3%B8n-skoj">nike air huarache s酶lv gr酶n</a> <a href="http://www.thegillssell.com/nike-zoom-pegasus-34-blu-verde-scarpel">nike zoom pegasus 34 blu verde</a>
xmrujo http://www.xmrujo.com/
byedrinkusa
 byedrinkusa 2019-03-18 10:00回复
#119
<a href="http://www.booksekart.com/nike-tiempo-legend-vi-fg-soccer-boots-rojo-negro-plata-scarpef">nike tiempo legend vi fg soccer boots rojo negro plata</a> <a href="http://www.ccwealthltd.com/flyknit-trainer-arancia-blu-flame-kurpesa">flyknit trainer arancia blu flame</a> <a href="http://www.crudedrilling.com/kvinders-asics-gel-quantum-360-bl%C3%A5-gul-kurpesc">kvinders asics gel quantum 360 bl氓 gul</a> <a href="http://www.divatrendies.com/new-blance-ni%C3%B1os-zapatos-plata-oro-obuva">new blance ni帽os zapatos plata oro</a> <a href="http://www.emojipost.com/kobe-9-schuhe-grade-school-schuhef">kobe 9 schuhe grade school</a> <a href="http://www.fufengnc.com/adidas-soccer-cleats-billig-chaussuresg">adidas soccer cleats billig</a>
byedrinkusa http://www.byedrinkusa.com/
sousoushop
 sousoushop 2019-03-17 03:37回复
#118
<a href="http://www.findatrans.com/orlando-magic-new-era-2018-nba-on-court-collection-9fifty-snapback-cap-hatl">orlando magic new era 2018 nba on court collection 9fifty snapback cap</a> <a href="http://www.isabellerigal.com/hommes-nike-shox-current-vert-rouge-chaussuresh">hommes nike shox current vert rouge</a> <a href="http://www.esnafkocaeli.com/nike-air-max-tailwind-7-mujeres-rosado-p%C3%BArpura-zapatosk">nike air max tailwind 7 mujeres rosado p煤rpura</a> <a href="http://www.dkdjabar.com/adidas-neo-ventilation-silver-pink-shoesi">adidas neo ventilation silver pink</a> <a href="http://www.jamiecirillo.com/nike-zoom-kobe-vi-schwarz-gold-schuhei">nike zoom kobe vi schwarz gold</a> <a href="http://www.xpostshopx.com/hombres-nike-cortez-negro-p%C3%BArpura-zapatosp">hombres nike cortez negro p煤rpura</a>
sousoushop http://www.sousoushop.com/
jemegaupload
 jemegaupload 2019-03-17 02:27回复
#117
<a href="http://www.goodbuysindia.com/air-huarache-mettoutic-argent-quartz-obuvf">air huarache mettoutic argent quartz</a> <a href="http://www.marijuanapeer.com/nike-air-huarache-tout-blanc-vente-obuvd">nike air huarache tout blanc vente</a> <a href="http://www.monolitcenter.com/kvinners-asics-gel-kinsei-4-r%C3%B8d-gul-kurpesg">kvinners asics gel kinsei 4 r酶d gul</a> <a href="http://www.podcastboyz.com/nike-free-tr-flyknit-5.0-brun-gr%C3%B8nn-obuvb">nike free tr flyknit 5.0 brun gr酶nn</a> <a href="http://www.tentplezier.com/nike-roshe-nm-flyknit-schwarz-butya">nike roshe nm flyknit schwarz</a> <a href="http://www.uacurryclub.com/phoenix-suns-nash-jersey-nflu">phoenix suns nash jersey</a>
jemegaupload http://www.jemegaupload.com/
charleyscafe
 charleyscafe 2019-03-16 03:23回复
#116
<a href="http://www.bitcashgrams.com/nfl-daniel-sorensen-womens-limited-red-jersey-49-kansas-city-chiefs-nike-rush-drift-fashion-nflx">nfl daniel sorensen womens limited red jersey 49 kansas city chiefs nike rush drift fashion</a> <a href="http://www.ftpronto.com/mens-alshon-jeffery-limited-green-nike-jersey-nfl-philadelphia-eagles-17-rush-drift-fashion-nflw">mens alshon jeffery limited green nike jersey nfl philadelphia eagles 17 rush drift fashion</a> <a href="http://www.grandslamu.com/roshe-run-hyper-bl%C3%A5-dynamic-flywire-chaussuresa">roshe run hyper bl氓 dynamic flywire</a> <a href="http://www.sanvalmotor.com/kobe-9-bl%C3%A5-and-gul-online-butya">kobe 9 bl氓 and gul online</a> <a href="http://www.seifenstein.com/nike-cortez-triple-svart-butyc">nike cortez triple svart</a> <a href="http://www.sncforyou.com/air-max-2017-nero-and-grigio-yoga-obuvg">air max 2017 nero and grigio yoga</a>
charleyscafe http://www.charleyscafe.com/
alabama beanie
 alabama beanie 2019-03-14 01:25回复
#115
<a href="http://www.ladonnaorsa.com/ralph-lauren-navy-1032-chino-hat-polor">ralph lauren navy 1032 chino hat</a> <a href="http://www.invuulondon.com/nike-mercurial-superfly-ebay-au-runninge">nike mercurial superfly ebay au</a> <a href="http://www.eatcatalonia.com/prada-mens-footwear-in-black-50-pradar">prada mens footwear in black 50</a> <a href="http://www.meranflora.com/flyknit-roshe-run-mineral-water-shoesa">flyknit roshe run mineral water</a> <a href="http://www.bethagustina.com/nike-air-max-2012-dam%C3%A4nner-zappos-kurpesa">nike air max 2012 dam盲nner zappos</a> <a href="http://www.toddystewart.com/nike-air-max-2011-menns-gul-sportsd">nike air max 2011 menns gul</a>
alabama beanie http://www.dynamitagefdt.com/alabama-beanie-hats
hurizmir
 hurizmir 2019-03-13 08:31回复
#114
<a href="http://www.diplomabroad.com/adidas-ag-adizero-f50dragon-hvit-obuvi">adidas ag adizero f50dragon hvit</a> <a href="http://www.trechadental.com/nike-men-roshe-wool-skin-grey-blue-cheap-shoesj">nike men roshe wool skin grey blue cheap</a> <a href="http://www.akhbarsanaye.com/nike-flyknit-racer-mens-volt-black-sequoia-shoesl">nike flyknit racer mens volt black sequoia</a> <a href="http://www.timxes.com/polo-ralph-lauren-classic-swim-shorts-poloh">polo ralph lauren classic swim shorts</a> <a href="http://www.leadercheetah.com/m%C3%A6nd-nike-shox-current-hvid-sort-r%C3%B8d-skok">m忙nd nike shox current hvid sort r酶d</a> <a href="http://www.arealleader.com/rot-low-top-converse-herren-schuheh">rot low top converse herren</a>
[url=http://www.hurizmir.com/]hurizmir[/url]
stephbenzer
 stephbenzer 2019-03-13 00:55回复
#113
<a href="http://www.jljingshi.com/air-max-95-qs-s%C3%B8lv-kit-obuvg">air max 95 qs s酶lv kit</a> <a href="http://www.emanmoon.com/lebron-13-low-schwarz-and-wei%C3%9F-chaussuresa">lebron 13 low schwarz and wei脽</a> <a href="http://www.mysiatravel.com/nike-air-force-1-low-sort-multi-urban-jungle-butya">nike air force 1 low sort multi urban jungle</a> <a href="http://www.pandoraboxhn.com/air-max-90-neon-lyser%C3%B8d-quilt-obuvc">air max 90 neon lyser酶d quilt</a> <a href="http://www.yourctt.com/nike-dunks-schuhe-billig-scarpea">nike dunks schuhe billig</a> <a href="http://www.coccodesigns.com/nike-lebron-13-bhm-volleybtout-scarpef">nike lebron 13 bhm volleybtout</a>
stephbenzer http://www.stephbenzer.com/
顶部留言底部
 00:00/00:00
我想和你虚度时光 - 花房姑娘(9)
  1. 我想和你虚度时光
  2. 花房姑娘
  3. 恋恋风尘
  4. 我喜爱一切不彻底的事物
  5. 我的心里是满的
  6. Long Way
  7. 给少年的歌
  8. 晴日共剪窗
  9. 天上的月你的脸