^ 回到顶部
  • 人生没有定律,每个人都有自己的节奏
  • 本站wordpress建站教程均通过实践后发布,希望对你有帮助
  • 希望你的坚持,都是因为热爱,而不是因为不甘心
  • 5年wordpress建站经验,5星服务品质
  • 那些不愿意让你吃亏的人,才是真正值得你深交的人,也是值得你付出时间的人

xiu主题添加加载特效

阿里云限时特惠

看到别人的加载特效,简直叼渣天啊,立马搜索了下,这不陌小雨给大家带来了:

1、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:50px;      
    height:50px;      
        margin:0 auto;             
    position:fixed;      
        left:30px;      
        bottom:30px;      
    -moz-animation:spinPulse 1s infinite ease-in-out;      
    -webkit-animation:spinPulse 1s infinite ease-in-out;      
    -o-animation:spinPulse 1s infinite ease-in-out;      
    -ms-animation:spinPulse 1s infinite ease-in-out;      
     
}      
#circle1 {      
    background-color: rgba(0,0,0,0);      
    border:5px solid rgba(0,183,229,0.9);     
    opacity:.9;      
    border-left:5px solid rgba(0,0,0,0);      
    border-right:5px solid rgba(0,0,0,0);      
    border-radius:50px;      
    box-shadow: 0 0 35px #2187e7;       
    width:30px;      
    height:30px;      
        margin:0 auto;      
        position:fixed;      
        left:40px;      
        bottom:40px;      
    -moz-animation:spinoffPulse 1s infinite linear;      
    -webkit-animation:spinoffPulse 1s infinite linear;      
    -o-animation:spinoffPulse 1s infinite linear;      
    -ms-animation:spinoffPulse 1s infinite linear;      
}      
@-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); }      
}

2、js

<code><div id="circle"></div> <div id="circle1" ></div></code>     
<script type="text/javascript">      
$(window).load(function() {           
$("#circle").fadeOut(500);      
$("#circle1").fadeOut(700);      
});      
</script>

去看看陌小雨首页的左下角吧,是不是酷毙了!

xiu主题添加加载特效

历史上的今天:
让小雨知道,这篇文章帮到了你

展开阅读全文

扫码关注微信公众号zs40086(微搜片)随时随地微信看片,抢先福利电影等你来

热门推荐

如有疑问,请前往问答中心反馈!

反馈
  1. 大刘子
    叼炸天
  2. 漠然
    :?: 求教这玩意怎么用???
    • 陌小雨网站管理员
      @漠然 教程中已经说明的很详细了, :sad: 点击首页wordpress程序服务找小雨帮忙吧