如何提高百度排名?百度排名第一怎么不花钱广?百度排名靠前的方法?

SEO秀

您现在的位置是:首页>SEO建站

SEO建站

wordpress主题页面顶部加载进度条的完成

seo秀2020-11-24 22:47:46SEO建站28来源:西安百度推广

wordpress主题页面顶部加载进度条的完成,大叔第一时候能想到的就是css3了,然则可能对IE低版本的浏览器兼容性不好了,然则玩wordpress的,都疏忽IE了哈,那末,下面我就直接说教程吧,简朴粗犷,css3+JQ了辣。

wordpress主题页面顶部加载进度条的完成

CSS3   

wordpress主题页面顶部加载进度条的完成

  1. body{

  2.                 margin:0;

  3.             }

  4.             #progress {

  5.                 position:fixed;

  6.                 height: 2px;

  7.                 background:#2085c5;

  8.                 transition:opacity 500ms linear

  9.             }

  10.             #progress.done {

  11.                 opacity:0

  12.             }

  13.             #progress span {

  14.                 position:absolute;

  15.                 height:2px;

  16.                 -webkit-box-shadow:#2085c5 1px 0 6px 1px;

  17.                 -webkit-border-radius:100%;

  18.                 opacity:1;

  19.                 width:150px;

  20.                 rightright:-10px;

  21.                 -webkit-animation:pulse 2s ease-out 0s infinite;

  22.             }


  23.             @-webkit-keyframes pulse {

  24.                 30% {

  25.                     opacity:.6

  26.                 }

  27.                 60% {

  28.                     opacity:0;

  29.                 }

  30.                 100% {

  31.                     opacity:.6

  32.                 }

  33. }

对的,仅针对针对webkit内核浏览器写的,处女座的你,能够恰当的多写一些前缀。

HTML代码

  1. <div id="progress">

  2.             <span></span>

  3. </div>

jquery代码

  1. $({property: 0}).animate({property: 100}, {

  2.                 duration: 3000,

  3.                 step: function() {

  4.                     var percentage = Math.round(this.property);


  5.                     $('#progress').css('width',  percentage+"%");


  6.                      if(percentage == 100) {

  7.                             $("#progress").addClass("done");//完成,隐蔽进度条

  8.                         }

  9.                 }

  10. });

活学活用吧,上面设置的时候是3秒,依据本身的需求设定时候吧,到了这步,wordpress主题页面顶部加载进度条的完成就涌现了,做为想学习者,我想你应当晓得ctrl+f5是去缓存革新,革新后,看看革新网页,顶部是否是涌现了加载进度条了。。恩,就是如许!

发表评论

评论列表(22人评论 , 28人围观)
  • 2020-12-13 07:41:43

    每当我找到成功的钥匙,就发现有人把锁芯给换了…

  • 2020-12-05 21:28:57

    听成绩的时候要用右耳听,因为左耳靠近心脏,可能会猝死。

  • 2020-12-12 14:50:25

    世界上最宽广的是海洋,比海洋更宽广的是天空,比天空更宽广的是考试范围。

  • 2020-12-05 01:15:20

    摊煎饼的大妈说,她月入三万,不差你一个鸡蛋。

  • 2020-11-28 19:56:42

    我从不去想何时能成功,既然选择了远方,那就还远着呢。