非常奈斯的jquery加载动画

这篇文章最后更新于05-22 16:36前,您需要注意相关的内容是否还可用,如有疑问请联系作者!

非常奈斯的jquery加载动画
火狐截图_2021-05-22T08-34-03.862Z.png
html代码:

<div class="Loading-warp">
    <div class="Loading">
        <div class="Circle"></div>
        <div class="Circle2"></div>
        <div class="Circle3"></div>
    </div>
</div>

css样式:

.Loading-warp {
    width:100%;
    height:100%;
    background-color:#374140;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:10000;
}
.Loading-warp .Loading {
    position:relative;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:180px;
    height:20px;
    display:flex;
    justify-content:space-between;
}
.Loading-warp .Loading .Circle,.Circle2,.Circle3 {
    width:20px;
    height:100%;
    background-color:#FFFFFF;
    border-radius:50%;
    animation:bounce 1.5s infinite ease-in-out;
    opacity:0;
}
@keyframes bounce {
    0%,100% {
    transform:scale(0);
    opacity:0;
}
50% {
    transform:scale(1.2);
    opacity:1;
}
}.Loading-warp .Loading .Circle2 {
    animation-delay:.25s;
}
.Loading-warp .Loading .Circle3 {
    animation-delay:.5s;
}

js代码:

window.onload = function() {
    $('.Loading-warp').delay(800).fadeOut('slow');
}

标签: 加载 特效 动画
评论 打赏
最后编辑于:2021 年 05 月 22 日

网友评论 0 评论

评论空空如也,快来评论吧!

作者资料

寻梦xunm

博主

邮箱:1340326824@qq.com

链接:http://huue.cc/index.php/archives/189.html

网友评论

  • 溜溜测试一下
    发表于:2周前
  • ggfhjghjfghjfgjgffghjfghjfgjfghjfghjfgh
    发表于:3周前
  • 寻梦xunm等有空了重新调整一下字体大小
    发表于:2个月前
  • 城南旧事字太小了,看的难受
    发表于:2个月前
  • 123456加油
    发表于:2个月前
  • 寻梦xunm2333333333
    发表于:2个月前

其它信息

  • 文章:603
  • 分类:28
  • 评论:46
  • 页面:4

订阅信息

返回顶部