使用纯html与css实现跳动小球加载动画

简介: 跳动小球加载动画在网页开发中,加载动画是必不可缺的一个设计;因为在一些资源加载的时候需要让用户等待一段时间,为了使用户有更好的交互体验,一个使人身心愉悦的加载动画变必不可少。今天为大家带来的就是一个小求跳动加载动画

跳动小球加载动画

在网页开发中,加载动画是必不可缺的一个设计;因为在一些资源加载的时候需要让用户等待一段时间,为了使用户有更好的交互体验,一个使人身心愉悦的加载动画变必不可少。

今天为大家带来的就是一个小求跳动加载动画

效果图


网络异常,图片无法展示
|



就如效果图上面多战士出来的,我们大致可以分为两部分:一部分是上面的灯,另一部分则是下面跳动的小球。

设计思路也很简单,上面的小灯打下来的灯光,使得下面下面跳动的小球有一定的阴影,并且根据小球距离灯的距离远近,其阴影也随之变化。

实现

话不多说,直接开始通过代码实现,这是一个纯html与css实现的动画,不需要任何js。

灯光部分

灯光部分我使用了一个div将灯和灯光包裹起来,这样做为了方便调整位置,同时也可以方便的调整灯光的大小。

<div class="lightBox">
    <div class="light"></div>// 灯泡
    <div class="lampLight"></div>// 灯光
</div>
复制代码

灯光主题很简单,这里就不多说了。

下面就是样式部分:

我的设计思路是这样的:灯泡部分设置一个宽高,然后使用border-radius,使得灯泡呈现一个圆形。然后灯光我们使用一个盒子,设置一个宽高,然后使用border-radius,使得灯光呈现一个圆形,但是灯光这个盒子的大小比灯泡的盒子大得多,这样就可以使得灯光有一定的阴影效果。

我们将整个灯光的大盒子居中,但不是垂直居中,因为下面还有一个跳动的小球。

.lightBox{
    position: absolute;
    top: 20%;
    left: 50%;
}
.light{
    position: absolute;
    top: 50px;
    left: 50%;
    margin-left: -10px;
    width: 20px;
    height: 20px;
    background-color: rgb(249, 159, 4);
    border-radius:50%;
    z-index: 1;
}
.lampLight{
    position: absolute;
    top: 16%;
    left: 50%;
    margin-left: -60px;
    width: 20px;
    height: 20px;
    border-bottom: 50px solid rgb(251, 232, 124);
    border-top: 50px solid transparent;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-radius: 50%;
}
复制代码

最后灯光的效果就出来了:


网络异常,图片无法展示
|


小球部分

接下来就是小球的跳动部分,在这里我们使用一个稍大的长方形盒子,将三个小球放在盒子顶部,并设置一定间距,在盒子下面我们设置三个阴影。

<div class="father">
    <!-- 加载小球 -->
    <div class="ball1"></div>
    <div class="ball2"></div>
    <div class="ball3"></div>
    <!-- 小球阴影 -->
    <div CLASS="ballShadow1"></div>
    <div CLASS="ballShadow2"></div>
    <div CLASS="ballShadow3"></div>
</div>
复制代码

然后我们设置一下样式:

首先就是整个大盒子的样式,我们给这个大盒子设置150px的宽度,70px高度,然后设置一个背景颜色,这样就可以看到这个大盒子的位置了。

但是后期我们并不需要这个背景颜色,此时设置背景颜色只是为了更好的观察。

.father{
    position: absolute;
    /* 居中 */
    top:50%;
    margin-top: -50px;
    left: 50%;
    margin-left: -80px;
    /* 设置长宽 */
    width: 160px;
    height: 70px;
    /* 背景色 */
    /* background-color: #ccc; */
}
复制代码

接下来就是给小球设置一些样式,我们给小球设置一个宽高,然后设置一个背景颜色,这样就可以看到小球的位置了,前面我们还说到要讲小球均匀分布,所以这里还需要设置一些外边距。

.ball1{
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #0ff;
    left: 10px;// **1
    border-radius: 50%;
    z-index: 1;
    animation: bounce 2s ease-in-out infinite;// **2
    animation-delay: 0s;// **3 
}
复制代码

上面的代码只是第一个小球的样式,我们可以看到,在第一个小球上面我们设置小球的位置,但是每一个小球的位置都不一样,所以我这样设置:第一个小球左边距为10px,后面的每个小球依次比前一个小球多60px。这里我就不重复写了。

然后我们设置小球的动画,这里我们使用的是CSS3的动画,我们设置一个动画名字为bounce,动画时间为2s,动画的效果为ease-in-out,动画的次数为无限次。

然后我们设置小球的动画延迟,这里我们设置第一个小球的动画延迟为0s,第二个小球的动画延迟为0.5s,第三个小球的动画延迟为1s。

接下来我们为小球设置动画:

@keyframes bounce{
    0%{
        top: 0px;
    }
    50%{
        top: 40px;
    }
    100%{
        top:0px;
    }
}
复制代码

阴影部分

在效果图里面还有小球跳动的阴影,这里我们也给小球设置一个阴影,在父盒子下面设置三个盒子,长宽比例为2:1,然后设置一个背景颜色,边框使用border-radius:50%,这样就可以看到阴影的位置了。

.ballShadow1{
    position: absolute;
    bottom: 2px;
    left: 0px;
    width: 40px;
    height: 20px;
    border-radius: 50%;
    background-color: #ededed;
    animation: box_shadow 2s ease-in-out 0s infinite;
}
复制代码

同样的,我这里展示的是第一个小球跳动的阴影。我们可以看到,阴影的位置是在小球的下面,所以我们设置了bottom: 2px;,然后我们设置了一个动画,动画的名字为box_shadow,动画的时间为2s,动画的效果为ease-in-out,动画的延迟为0s,动画的次数为无限次。

后面的两个小球只需要设置一下位置就可以了,这里我就不重复写了。

接下来我们设置阴影的动画:

在日常生活中物体距离光源的距离会引起物体的阴影变化(大小,颜色深浅),我们这里使用缩放来实现阴影大小的变化,使用设置深一点的颜色来体现颜色的变化。

@keyframes box_shadow {
    0%{
        transform: scale(1,1);
        background-color: #ededed;
    }
    50%{
        transform: scale(0.5,0.5);
        background-color: #999999;
    }
    100%{
        transform: scale(1,1);
        background-color: #ededed;
    }
}
复制代码

结尾

这里我们就完成了一个简单的小球跳动的效果,这里我们使用了CSS3的动画,这里我们使用了@keyframes来设置动画,然后我们使用animation来设置动画的属性,这里我们使用了animation-delay来设置动画的延迟,这样我们就可以实现小球跳动的效果了。

这样一个小小的demo,不仅可以给我带来乐趣,也在无形之中让我进一步巩固了知识。


相关文章
|
4月前
|
存储 自然语言处理 前端开发
抖音快手小红书虚拟评论截图生成器,模拟对话制作工具,html+js+css
这是一款纯前端实现的多平台虚拟评论生成器,支持抖音、快手、小红书风格,适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局,利用IndexedDB存储数据,CSS Variables切换主题。
|
8月前
|
前端开发 JavaScript
CSS 过渡和动画
CSS过渡和动画是用于为网页元素添加动态效果的两种重要技术
266 73
|
4月前
|
存储 前端开发 安全
病历单生成器在线制作,病历单生成器app,HTML+CSS+JS恶搞工具
本项目为医疗病历模拟生成器,旨在为医学教学和软件开发测试提供数据支持,严格遵守《医疗机构病历管理规定》。
|
4月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
4月前
|
前端开发 容器
处方单图片生成器, 处方单在线制作免费,js+css+html恶搞神器
这是一个电子处方模拟生成系统,使用html2canvas库实现图片导出功能。系统生成的处方单包含多重防伪标识,并明确标注为模拟数据,仅供学习
|
4月前
|
前端开发 JavaScript 容器
制作b超单生成器, 假怀孕b超单图片制作, p图医院证明【css+html+js装逼恶搞神器】
本资源提供一个适合用于熟人之间恶搞的工具,效果逼真,仅供学习参考与娱乐。包含前端技术学习要点:语义化布局、响应式设计、Flexbox、图片自适应
|
4月前
|
前端开发
医院检查单子p图软件,在线制作仿真病历,js+css+html装逼神器
本示例展示如何用HTML/CSS创建医疗信息页面,内容仅供学习参考。页面模拟“阳光医院体检中心”场景,提供预约功能验证(如姓名、手机号、日期)。所有数据仅用于演示
|
前端开发 内存技术
CSS动画示例(上一篇是CSS过渡…)
CSS动画示例(上一篇是CSS过渡…)
|
前端开发
CSS3中的动画示例
CSS3中的动画示例
|
前端开发
css扫描动画效果demo示例(整理)
css扫描动画效果demo示例(整理)