村里唯一的希望

网页设计群:706684

Album
预加载动画(自定义)
  css     2020-01-10     44     0

css代码

.loading_box {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 66;
}
.loader-inner, .loading, .loading_text {
position: absolute;
top: 50%;
}
.loading_text {
color: #2a2474;
font-family: "微软雅黑";
font-size: 22px;
left: 50%;
margin-left: -36px;
margin-top: 40px;
width: 60px;
}
.loader-inner {
height: 100px;
left: 0;
margin-top: -112px;
width: 100%;
}
.inneer1 {
animation: 1s cubic-bezier(0.2, 0.68, 0.18, 1.08) 0.1s normal none infinite running line-scale;
background: #940914 none repeat scroll 0 0;
}
.inneer2 {
animation: 1s cubic-bezier(0.2, 0.68, 0.18, 1.08) 0.2s normal none infinite running line-scale;
background: #7a0f2c none repeat scroll 0 0;
}
.inneer3 {
animation: 1s cubic-bezier(0.2, 0.68, 0.18, 1.08) 0.3s normal none infinite running line-scale;
background: #621641 none repeat scroll 0 0;
}
.inneer4 {
animation: 1s cubic-bezier(0.2, 0.68, 0.18, 1.08) 0.4s normal none infinite running line-scale;
background: #401e60 none repeat scroll 0 0;
}
.inneer5 {
animation: 1s cubic-bezier(0.2, 0.68, 0.18, 1.08) 0.5s normal none infinite running line-scale;
background: #2a2474 none repeat scroll 0 0;
}
.line-scale > div {
animation-fill-mode: both;
border-radius: 5px;
display: inline-block;
height: 100px;
margin-right: 5px;
width: 12px;
}
@keyframes line-scale {
0%, 100% {
transform: scaleY(1);
}
50% {
transform: scaleY(0.4);
}
}
.loading {
display: inline-block;
height: 60px;
left: 50%;
margin-left: -42px;
margin-right: 40px;
margin-top: -42px;
width: 60px;
z-index: 66;
}
.chart {
height: 500px;
margin: 0 auto;
width: 1000px;
}
@keyframes heightdownup {
0% {
height: 40px;
}
100% {
height: 80px;
}
}
@keyframes fromTop {
0% {
transform: translateY(-300%);
}
100% {
transform: translateY(0px);
}
}
@keyframes fromTop {
0% {
transform: translateY(-300%);
}
100% {
transform: translateY(0px);
}
}
@keyframes fromDown {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0px);
}
}
@keyframes fromDown {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0px);
}
}

html代码

<div class="loading_box">   
<div class="loader-inner line-scale">
<div class="inneer1"></div>
<div class="inneer2"></div>
<div class="inneer3"></div>
<div class="inneer4"></div>
<div class="inneer5"></div>
</div>
<div class="loading_text">Loading...</div>
</div>
<a class="banner_next fromTopDown" href="#conter2"></a>

css
最新评论
  • 脑婆最大!!! 2020年01月25日
    我的城市缺个你
  • 小生不才 2020年01月19日
    好好看的个人博客

  • @_@、 2020年01月18日
    你的评论功能,指自己写的代码吗
  • me 2020年01月18日
    这设计真好看,想知道是做ux的吗
  • 悠悠 2020年01月17日
    可有可无 不打算加了
  • 唤( . )醒 2020年01月17日
    视频列表 点击封面不能跳转
  • A 王小五 2020年01月10日
    挡着没有用,我都看到了!
  • 演员 2020年01月10日
    友联-.-
  • 悠悠 2020年01月10日
    就用用嘛
  • 唤( . )醒 2020年01月10日
    用我的主题壁纸