您现在的位置是:首页 > WEB > html+csshtml+css

用CSS创建一个简单的加载器

阿龙2019-06-10【html+css】人已围观

简介Loader是网站令人印象深刻的部分,需要简单而有趣,因此阿龙将构建一个漂亮的加载器。

先来看看效果:

创建一个容纳装载器的容器
< html >
<body>
<div class="container">
</div>
</body>
</html >
将主体的宽度和高度设置为100%,同时更改display为flex使我们可以轻松地将容器放在中心位置screen。
html, body {
width: 100 %;
height: 100 %;
display: flex;
//集中容器,设置justify-content和align-items - center。
justify - content: center;
align - items: center;
background: #FCEAFC;
}
添加height和width对contianer
.container {
width: 320px;
height: 180px;
}
现在我们需要div为每个创建color ,并将其放在容器中
<div class="color">
<div class="red"></div>
</div>
<div class="color">
<div class="orange"></div>
</div>
<div class="color">
<div class="yellow"></div>
</div>
<div class="color">
<div class="green"></div>
</div>
<div class="color">
<div class="blue"></div>
</div>
<div class="color">
<div class="purple"></div>
</div>
设置加载器的高度
.container.color {
height: 30px;
}
.container.color div {
height: 30px;
width: 100 %;
}
我们需要为每种颜色添加背景
red {
background: #f25774;
}
.orange {
background: #ffb65b;
}
.yellow {
background: #fdda74;
}
.green {
background: #4cbe5d;
}
.blue {
background: #4080ff;
}
.purple {
background: #7b64c0;
}
现在装载机看起来像

为了设置颜色的动画,我们需要初始设置width为0,然后当我们将宽度更改为100 % 此时将创建扩展效果
.container.color div {
width: 0;
animation - name: slide;
animation - duration: 2.5s;
animation - iteration - count: infinite;
}
@keyframes slide {
10 % {
width: 0;
}
37 % {
width: 100 %;
}
63 % {
width: 100 %;
}
90 % {
width: 0;
}
}
将动画分配给color div ,1s为每个动画添加延迟div,使动画一个接一个地出现
.red {
animation - delay: 0.1s;
}
.orange {
animation - delay: 0.2s;
}
.yellow {
animation - delay: 0.3s;
}
.green {
animation - delay: 0.4s;
}
.blue {
animation - delay: 0.5s;
}
.purple {
animation - delay: 0.6s;
}
为了将上面的内容更改为右侧的结尾,我们可以将float属性添加到div中 color div
@keyframes slide {
10 % {
width: 0;
float: left;
}
37 % {
width: 100 %;
float: left;
}
63 % {
width: 100 %;
float: right;
}
90 % {
width: 0;
float: right;
}
}
现在我们得到了预期的装载机
-------end--------

Tags:html   css   加载器

支持一下! ()

文章评论

    共有条评论大侠,来闹两句...

    请输入昵称:

    填入验证码:

打赏本站

  • 如果您觉得站长文章不错,可以通过扫码支付打赏一下哦!
  • 微信扫码:您说多少就多少~
  • 支付宝扫码:您说多少就多少~