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

迷津渡口

越感到迷惑 越接近真理

css3+jQuery实现载入圆圈动画提示

载入网页的时候,在页面左下角显示动画提示载入中和已完成.

完成后隐藏,完全不需要图片,只需要css3,html和jquery实现.

话不多说,小指直接就分享代码了:

首先在<body>下面添加html和script代码:

<div id="circle" style="display: block;"></div>
<div id="circletext" style="display: block;"></div>
<div id="circle1" style="display: block;"></div>
<script type="text/javascript">
    $(function () {
        $("#circletext").text("加载中");
        $(window).load(function() {
        	$("#circle").fadeOut(400);
        	$("#circle1").fadeOut(600);
        	$("#circletext").text("已完成").fadeOut(800);
        });
    });
</script>

添加动画样式,可用<style>包裹添加到<head></head>之间,或者添加到css样式表文件里.

#circle{background-color:rgba(0,0,0,0);border:5px solid rgba(10,10,10,0.9);opacity:.9;border-right:5px solid rgba
(0,0,0,0);border-left:5px solid rgba(0,0,0,0);border-radius:50px;box-shadow:0 0 35px #808080;width:60px;height:60px;margin:0 auto;position:fixed;left:30px;bottom:30px;-moz-animation:spinPulse 1s infinite linear;-webkit-animation:spinPulse 1s infinite linear;-o-animation:spinPulse 1s infinite linear;-ms-animation:spinPulse 1s infinite linear;}
#circle1{background-color:rgba(0,0,0,0);border:6px solid rgba(20,20,20,0.9);opacity:.9;border-left:6px solid rgba(0,0,0,0);border-right:6px solid rgba(0,0,0,0);border-radius:50px;box-shadow:0 0 15px #202020;width:40px;height:40px;margin:0 auto;position:fixed;left:39px;bottom:39px;-moz-animation:spinoffPulse 1s infinite linear;-webkit-animation:spinoffPulse 1s infinite linear;-o-animation:spinoffPulse 1s infinite linear;-ms-animation:spinoffPulse 1s infinite linear;}
#circletext{font-size:14px;width:46px;height:20px;margin:0 auto;position:fixed;left:46px;bottom:53px;}
@-moz-keyframes spinPulse{0%{-moz-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px #505050;}50%{-moz-transform:rotate(145deg);opacity:1;}100%{-moz-transform:rotate(-320deg);opacity:0;}}
@-moz-keyframes spinoffPulse{0%{-moz-transform:rotate(0deg);}100%{-moz-transform:rotate(360deg);}}
@-webkit-keyframes spinPulse{0%{-webkit-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px #505050;}50%{-webkit-transform:rotate(145deg);opacity:1;}100%{-webkit-transform:rotate(-320deg);opacity:0;}}
@-webkit-keyframes spinoffPulse{0%{-webkit-transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);}}
@-o-keyframes spinPulse{0%{-o-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px #505050;}50%{-o-transform:rotate(145deg);opacity:1;}100%{-o-transform:rotate(-320deg);opacity:0;}}
@-o-keyframes spinoffPulse{0%{-o-transform:rotate(0deg);}100%{-o-transform:rotate(360deg);}}
@-ms-keyframes spinPulse{0%{-ms-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px #505050;}50%{-ms-transform:rotate(145deg);opacity:1;}100%{-ms-transform:rotate(-320deg);opacity:0;}}
@-ms-keyframes spinoffPulse{0%{-ms-transform:rotate(0deg);}100%{-ms-transform:rotate(360deg);}}


搞定了,自己试试吧~效果还是挺炫的^_^

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

清空信息
关闭评论
lacosmeticink
 lacosmeticink 约 17 小时前回复
#73
<a href="http://www.elifeinsnow.com/nike-kyrie-2-mens-imdb-trainersf">nike kyrie 2 mens imdb</a> <a href="http://www.tsgctt.com/oversized-sunglasses-prada-pradar">oversized sunglasses prada</a> <a href="http://www.satonni.com/nike-air-pegasus-92-womens-gold-runningb">nike air pegasus 92 womens gold</a> <a href="http://www.inenigroup.com/michael-kors-cherry-tote-mkr">michael kors cherry tote</a> <a href="http://www.nowminning.com/bon-march%C3%A9-nike-free-tr-fit-hommes-gris-sneakere">bon march茅 nike free tr fit hommes gris</a> <a href="http://www.mytopdollar.com/cody-latimer-14-jersey-nfld">cody latimer 14 jersey</a>
lacosmeticink http://www.lacosmeticink.com/
smilesdrdavid
 smilesdrdavid 约 22 小时前回复
#72
<a href="http://www.sguerradesign.com/nike-air-max-90-carved-verde-arancia-scarpel">nike air max 90 carved verde arancia</a> <a href="http://www.zeneventsja.com/air-jordan-retro-5-all-black-shoesj">air jordan retro 5 all black</a> <a href="http://www.adharaweb.com/mk-jet-set-python-embossed-continental-large-blue-wallets-mkh">mk jet set python embossed continental large blue wallets</a> <a href="http://www.jrelselaw.com/kvinners-asics-gel-noosa-tri-9-rosa-gr%C3%A5-obuvi">kvinners asics gel noosa tri 9 rosa gr氓</a> <a href="http://www.intellalegal.com/air-jordan-retro-12-oro-bianca-scarpej">air jordan retro 12 oro bianca</a> <a href="http://www.carmelscoffee.com/womens-air-jordan-retro-1-pink-white-shoesh">womens air jordan retro 1 pink white</a>
smilesdrdavid http://www.smilesdrdavid.com/
veskopetrov
 veskopetrov 2019-02-15 09:32回复
#71
<a href="http://www.cardiachits.com/michael-kors-cloth-tote-bag-mkh">michael kors cloth tote bag</a> <a href="http://www.zestchannel.com/mennns-asics-gel-noosa-tri-7-hvit-himmelen-bl%C3%A5-obuvi">mennns asics gel noosa tri 7 hvit himmelen bl氓</a> <a href="http://www.eczacinim.com/femminile-asics-gel-noosa-tri-7-cielo-blu-nero-scarpej">femminile asics gel noosa tri 7 cielo blu nero</a> <a href="http://www.chilangorails.com/nike-kobe-5-purple-blue-shoesh">nike kobe 5 purple blue</a> <a href="http://www.mariusen.com/air-jordan-retro-7-mujeres-blanco-zapatosk">air jordan retro 7 mujeres blanco</a> <a href="http://www.brittonoilco.com/og-nike-cortez-blanco-negro-zapatosp">og nike cortez blanco negro</a>
veskopetrov http://www.veskopetrov.com/
yanaena
 yanaena 2019-02-12 20:07回复
#70
<a href="http://www.mndrsngh.com/mens-jason-kelce-elite-black-nike-jersey-nfl-philadelphia-eagles-62-usa-flag-fashion-nfls">mens jason kelce elite black nike jersey nfl philadelphia eagles 62 usa flag fashion</a> <a href="http://www.myfunshirt.com/nike-vomero-femmes-noir-mold-scarpeg">nike vomero femmes noir mold</a> <a href="http://www.pompaolipanas.com/nike-air-flight-89-gr%C3%BCn-lake-obuvd">nike air flight 89 gr眉n lake</a> <a href="http://www.tentalltales.com/lunarglide-8-kvinders-sort-l%C3%A6der-scarpea">lunarglide 8 kvinders sort l忙der</a> <a href="http://www.advobrite.com/nike-air-max-1-essential-blanc-dark-armory-bleu-schuhec">nike air max 1 essential blanc dark armory bleu</a> <a href="http://www.crystalgarza.com/nike-womens-justin-jones-navy-blue-name-number-logo-los-angeles-chargers-nfl-91-pullover-hoodie-nflr">nike womens justin jones navy blue name number logo los angeles chargers nfl 91 pullover hoodie</a>
yanaena http://www.yanaena.com/
primarknorway
 primarknorway 2019-02-12 12:23回复
#69
<a href="http://www.dinerwaresf.com/lacoste-long-sleeve-polo-kids-polor">lacoste long sleeve polo kids</a> <a href="http://www.bandaangatu.com/billig-air-jordan-reveal-dam%C3%A4nner-silber-trainersce">billig air jordan reveal dam盲nner silber</a> <a href="http://www.donnaemendoza.com/discount-ray-ban-polarized-sunglasses-sunglassesr">discount ray ban polarized sunglasses</a> <a href="http://www.nemoutrading.com/mackage-motorcycle-leather-jacket-mackager">mackage motorcycle leather jacket</a> <a href="http://www.givenkface.com/silver-womens-under-armour-curry-1-low-sneakere">silver womens under armour curry 1 low</a> <a href="http://www.katymissouri.com/jordan-infrared-11-black-friday-footc">jordan infrared 11 black friday</a>
primarknorway http://www.primarknorway.com/
khalataxi
 khalataxi 2019-02-12 03:32回复
#68
<a href="http://www.albainmaz.com/nike-huarache-ultra-womens-yellow-green-runninge">nike huarache ultra womens yellow green</a> <a href="http://www.seemyvcard.com/all-new-puma-shoes-zapatosu">all new puma shoes</a> <a href="http://www.joegauntlett.com/nike-kobe-10-braun-gr%C3%BCn-chaussuresa">nike kobe 10 braun gr眉n</a> <a href="http://www.rpnailsalon.com/nike-dallas-cowboys-8-troy-aikman-game-navy-blue-throwback-alternate-jersey-nfle">nike dallas cowboys 8 troy aikman game navy blue throwback alternate jersey</a> <a href="http://www.hrubinlaser.com/nike-lunar-am90-google-runningg">nike lunar am90 google</a> <a href="http://www.pruvitallday.com/zdeno-chara-33-boston-bruins-reebok-premier-alternate-jersey-small-nflv">zdeno chara 33 boston bruins reebok premier alternate jersey small</a>
[url=http://www.khalataxi.com/]khalataxi[/url]
vuurogen
 vuurogen 2019-02-12 02:36回复
#67
<a href="http://www.tkbelazig.com/nike-air-max-tailwind-7-femminile-bianca-viola-scarpej">nike air max tailwind 7 femminile bianca viola</a> <a href="http://www.swiftgrocer.com/nike-roshe-run-speckle-mint-green-shoesh">nike roshe run speckle mint green</a> <a href="http://www.warrnamboolag.com/air-jordan-retro-14-mujeres-hombresta-verde-negro-zapatosk">air jordan retro 14 mujeres hombresta verde negro</a> <a href="http://www.paineesq.com/nike-kobe-10-hombres-rojo-zapatosp">nike kobe 10 hombres rojo</a> <a href="http://www.gemmatyndall.com/the-north-face-resolve-rain-jacket-review-northfaceh">the north face resolve rain jacket review</a> <a href="http://www.cestreaming.com/dam%C3%A4nner-nike-cortez-wei%C3%9F-lila-schuhej">dam盲nner nike cortez wei脽 lila</a>
vuurogen http://www.vuurogen.com/
edenwins
 edenwins 2019-02-12 02:32回复
#66
<a href="http://www.gladatassen.com/prada-messenger-purse-keeper-pradab">prada messenger purse keeper</a> <a href="http://www.strongtowercf.com/mulberry-bag-strap-for-sale-canada-mulberrye">mulberry bag strap for sale canada</a> <a href="http://www.hamiltonhunt.com/nike-air-huarache-light-dam%C3%A4nner-gelb-sneakerd">nike air huarache light dam盲nner gelb</a> <a href="http://www.mailstraight.com/hermes-kelly-grey-hermesr">hermes kelly grey</a> <a href="http://www.kmkonka.com/nike-air-force-1-puerto-rico-sko-shoesv">nike air force 1 puerto rico sko</a> <a href="http://www.todayjosh.com/purple-coach-bag-coacha">purple coach bag</a>
edenwins http://www.edenwins.com/
kaosmotogp
 kaosmotogp 2019-02-11 08:00回复
#65
<a href="http://www.lagunawoodsre.com/nike-zoom-pegasus-32-gr%C3%B8n-bl%C3%A5-skoi">nike zoom pegasus 32 gr酶n bl氓</a> <a href="http://www.highbacklink.com/nike-free-run-3-femminile-oro-rosso-scarpeq">nike free run 3 femminile oro rosso</a> <a href="http://www.vuurogen.com/womens-gray-pink-nike-shox-shoesj">womens gray pink nike shox</a> <a href="http://www.rsvppersonnel.com/yellow-michael-kors-purse-mkh">yellow michael kors purse</a> <a href="http://www.shonema.com/air-jordan-eclipse-mint-gr%C3%B8nn-svart-obuvi">air jordan eclipse mint gr酶nn svart</a> <a href="http://www.enventsurvey.com/nike-zoom-clear-out-grigio-arancia-scarpej">nike zoom clear out grigio arancia</a>
kaosmotogp http://www.kaosmotogp.com/
bookoobeats
 bookoobeats 2019-02-09 20:22回复
#64
<a href="http://www.hinogi.com/air-jordan-retro-29-schwarz-gold-schuheh">air jordan retro 29 schwarz gold</a> <a href="http://www.prontosignsus.com/adidas-soccers-shoes-sky-blue-black-shoesq">adidas soccers shoes sky blue black</a> <a href="http://www.ticahome.com/mlb-jerseys-chicago-white-sox-45-michael-jordan-white-jerseys-nfli">mlb jerseys chicago white sox 45 michael jordan white jerseys</a> <a href="http://www.prformusic.com/nike-lunarglide-8-oransje-himmelen-bl%C3%A5-obuvp">nike lunarglide 8 oransje himmelen bl氓</a> <a href="http://www.tatilblogu.com/coach-bleecker-map-bag-price-coachh">coach bleecker map bag price</a> <a href="http://www.danieladirosa.com/nike-air-max-90-vt-arancia-nero-scarpei">nike air max 90 vt arancia nero</a>
bookoobeats http://www.bookoobeats.com/
顶部留言底部
 00:00/00:00
我想和你虚度时光 - 花房姑娘(9)
  1. 我想和你虚度时光
  2. 花房姑娘
  3. 恋恋风尘
  4. 我喜爱一切不彻底的事物
  5. 我的心里是满的
  6. Long Way
  7. 给少年的歌
  8. 晴日共剪窗
  9. 天上的月你的脸