「HTML+CSS」--自定义加载动画【047】
前言
Hello!小伙伴!
首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出~
哈哈 自我介绍一下
昵称:海轰
标签:程序猿一只|C++选手|学生
简介:因C语言结识编程,随后转入计算机专业,有幸拿过国奖、省奖等,已保研。目前正在学习C++/Linux(真的真的太难了~)
学习经验:扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语!
日常分享:微信公众号【海轰Pro】记录生活、学习点滴,分享一些源代码或者学习资料,欢迎关注~
效果展示
Demo代码
HTML
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="style.css"><title>Document</title>
</head>
<body><section><span></span></section>
</body>
</html>
CSS
html, body {margin: 0;height: 100%;
}body {display: flex;justify-content: center;align-items: center;background: #263238;
}section {width: 650px;height: 300px;padding: 10px;position: relative;display: flex;align-items: center;justify-content: center;border: 2px solid red;
}span {width: 20px;height: 20px;border-radius: 50%;display: inline-block;position: relative;color: white;left: -100px;/* background-color: red; */animation: loading 4s linear infinite;
}@keyframes loading {0% {box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);}12% {box-shadow: 100px 0 rgba(255, 255, 255, 1), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);}25% {box-shadow: 120px 0 rgba(255, 255, 255, 1), 100px 0 rgba(255, 255, 255, 1), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);}36% {box-shadow: 140px 0 rgba(255, 255, 255, 1), 120px 0 rgba(255, 255, 255, 1), 100px 0 rgba(255, 255, 255, 1), 0px 0 rgba(255, 255, 255, 0);}50% {box-shadow: 160px 0 rgba(255, 255, 255, 1), 140px 0 rgba(255, 255, 255, 1), 120px 0 rgba(255, 255, 255, 1), 100px 0 rgba(255, 255, 255, 1);}62% {box-shadow: 200px 0 rgba(255, 255, 255, 0), 160px 0 rgba(255, 255, 255, 1), 140px 0 rgba(255, 255, 255, 1), 120px 0 rgba(255, 255, 255, 1);}75% {box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 160px 0 rgba(255, 255, 255, 1), 140px 0 rgba(255, 255, 255, 1);}87% {box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 160px 0 rgba(255, 255, 255, 1);}100% {box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0);}
}
原理详解
步骤1
使用span标签,设置为
- 宽度、高度均为20px
- 圆角化
- 背景色为红色
width: 20px;height: 20px;border-radius: 50%;position: relative;background-color: red;
效果图如下
步骤2
将小球左移100px
left: -100px;
效果图如下
步骤3
为span添加动画
使用box-shadow阴影充当白色小球
白色小球有四个
关键有9帧
第一帧
四个白色小球(也就是span的阴影)均位于span初始位置,即红色小球所处的位置
颜色均为
rgba(255, 255, 255, 0)
(白色,但是透明级别为0,视觉上看不见)
box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
效果图如下
第二帧
小球1移动至红色小球右侧100px处,颜色变为
rgba(255, 255, 255, 1)
(纯白)其余小球位置不变
box-shadow: 100px 0 rgba(255, 255, 255, 1), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
效果图如下
第三帧
小球1再向右移动20px(即一个小球的直径长度)
小球2从初识位置移动至红色小球右侧100px处(即第二帧小球1所处的位置)
小球1、2颜色均为
rgba(255, 255, 255, 1)
(纯白)其余小球不变
box-shadow: 120px 0 rgba(255, 255, 255, 1), 100px 0 rgba(255, 255, 255, 1), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
效果图如下
第四帧
小球1再向右移动20px(即一个小球的直径长度)
小球2再向右移动20px
小球3从初识位置移动至红色小球右侧100px处(即第三帧小球2所处的位置)
小球1、2、3颜色均为
rgba(255, 255, 255, 1)
(纯白)
box-shadow: 140px 0 rgba(255, 255, 255, 1), 120px 0 rgba(255, 255, 255, 1), 100px 0 rgba(255, 255, 255, 1), 0px 0 rgba(255, 255, 255, 0);
效果图如下
第五帧
小球1再向右移动20px(即一个小球的直径长度)
小球2再向右移动20px
小球3再向右移动20px
小球4从初识位置移动至红色小球右侧100px处(即第四帧小球3所处的位置)
小球1、2、3、4颜色均为
rgba(255, 255, 255, 1)
(纯白)
box-shadow: 160px 0 rgba(255, 255, 255, 1), 140px 0 rgba(255, 255, 255, 1), 120px 0 rgba(255, 255, 255, 1), 100px 0 rgba(255, 255, 255, 1);
效果图如下
第六帧
- 小球1再直接移动至距离红色小球右侧200px(形成对称)
颜色变为
rgba(255, 255, 255, 0)
(白色,但是透明级别为0,视觉上就看不见了)小球2、3、4再向右侧移动20px(一个小球的直径)
box-shadow: 200px 0 rgba(255, 255, 255, 0), 160px 0 rgba(255, 255, 255, 1), 140px 0 rgba(255, 255, 255, 1), 120px 0 rgba(255, 255, 255, 1);
效果图如下
第七帧
小球1停留在第六帧的位置(红色小球右侧200px处)
小球2移动至小球1的位置,颜色变为
rgba(255, 255, 255, 0)
(小球3、4向右移动20px
box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 160px 0 rgba(255, 255, 255, 1), 140px 0 rgba(255, 255, 255, 1);
效果图如下
第八帧
小球1、2停留在红色小球右侧200px处
小球3移动至小球1、2的位置,颜色变为
rgba(255, 255, 255, 0)
小球4向右移动20px
box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 160px 0 rgba(255, 255, 255, 1);
效果图如下
第九帧
- 小球4最后也移动至红色小球右侧200px处,颜色变为透明
box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0);
效果图如下
各帧之间使用linear速度曲线平稳过渡
综上,动画代码为
animation: loading 4s linear infinite;
/*动画实现*/
@keyframes loading {/*第一帧*/0% {box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);}/*第二帧*/12% {box-shadow: 100px 0 rgba(255, 255, 255, 1), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);}/*第三帧*/25% {box-shadow: 120px 0 rgba(255, 255, 255, 1), 100px 0 rgba(255, 255, 255, 1), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);}/*第四帧*/36% {box-shadow: 140px 0 rgba(255, 255, 255, 1), 120px 0 rgba(255, 255, 255, 1), 100px 0 rgba(255, 255, 255, 1), 0px 0 rgba(255, 255, 255, 0);}/*第五帧*/50% {box-shadow: 160px 0 rgba(255, 255, 255, 1), 140px 0 rgba(255, 255, 255, 1), 120px 0 rgba(255, 255, 255, 1), 100px 0 rgba(255, 255, 255, 1);}/*第六帧*/62% {box-shadow: 200px 0 rgba(255, 255, 255, 0), 160px 0 rgba(255, 255, 255, 1), 140px 0 rgba(255, 255, 255, 1), 120px 0 rgba(255, 255, 255, 1);}/*第七帧*/75% {box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 160px 0 rgba(255, 255, 255, 1), 140px 0 rgba(255, 255, 255, 1);}/*第八帧*/87% {box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 160px 0 rgba(255, 255, 255, 1);}/*第九帧*/100% {box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0);}
}
效果图如下
步骤4
注释掉span的背景色(取消红色)
效果图如下
结语
学习来源:
https://codepen.io/bhadupranjal/pen/vYLZYqQ
文章仅作为学习笔记,记录从0到1的一个过程。希望对您有所帮助,如有错误欢迎小伙伴指正~
我是海轰ଘ(੭ˊᵕˋ)੭,如果您觉得写得可以的话,请点个赞吧
写作不易,「点赞」+「收藏」+「转发」
谢谢支持❤️
「HTML+CSS」--自定义加载动画【047】相关推荐
- 「HTML+CSS」--自定义加载动画【027】
前言 Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 哈哈 自我介绍一下 昵称:海轰 标签:程序猿一只|C++选手|学生 简介:因C语言结识编程,随后转入计算机 ...
- Android为网络请求自定义加载动画
android自带的加载动画都不怎么好看,在这里介绍一种自定义加载动画的方法 原始图片: 编写动画progressbar.xml, <?xml version="1.0" e ...
- 纯css绘制齿轮加载动画
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 目录 前言 一.效果图 二.步骤 1.html部分 2.css部分 前言 纯css绘制齿轮加载动画. 无需使用任何图片及素材. 提示: ...
- CSS齿轮转动加载动画
CSS齿轮转动加载动画 前言:该动画主要流程分为三块:绘制齿轮,齿轮转动动画,出场动画 绘制齿轮 绘制齿轮主要是使用svg进行绘制的 <svg class="guaongRudderO ...
- 【微信小程序】自定义加载动画3
目录 效果图 配置 版本1 版本2 结语 效果图 配置 配置方法参考上一篇文章:[微信小程序]自定义加载动画 版本1 Component({behaviors
- 【微信小程序】自定义加载动画4
目录 效果图 配置文件 结语 效果图 配置文件 配置方法参考上一篇文章:[微信小程序]自定义加载动画 组件源代码: Component({behaviors: [],properties: {
- 直播app系统源码通过CSS液体实现加载动画
直播app系统源码通过CSS液体实现加载动画 首先我们要让元素能够旋转起来,可以使用transform中的rotate进行2D的360deg旋转. 紧接着我们可以通过CSS变量(–开头的形式)结合an ...
- Android 自定义加载动画LoadingView
前言 本文参考辉哥的博客属性动画 - 58同城数据加载动画,用来学习属性动画相关知识非常合适. 最终效果 整体思路 绘制部分分析: 整体加载动画由三部分组成: 1.上方的正方形.圆形以及三角形,需要进 ...
- 加载html动画logo,仅CSS实现的加载动画 – Loader.css
仅CSS实现的加载动画 – Loader.css 4月 13, 2015 评论 (6) Sponsor 当网页的页面大小较大,用户加载可能需要较长的时间,在这些情况下,我们一般会用到(加载)loadi ...
最新文章
- Verilog初级教程(3)Verilog 数据类型
- 2020-11-10(安卓如何传递数据)
- 合作开发工具——freeze和pipreqs
- win10系统下载 Ghost Win10 RS1 1067 64位纯净3月版
- Share Point 开发系列之一:开发方式的选择
- js高级程序设计的笔记(一)
- 【LeetCode】4月2日打卡-Day18-矩阵操作
- 用Python实现智能推荐!某音,某宝都是智能推荐的,你都知道吗?
- 有一种叫“蒸汽波”豪横的平面设计手法
- android contextmenu listview,Android ListView ContextMenu
- pycharm2019安装包以及汉化文件
- 一个优质软件测试工程师简历的范文(答应我一定要收藏起来)
- android 阻尼动画,Android阻尼效果 | 自定义进阶之实现MIUI的拖动视差效果
- Python量化交易学习笔记(50)——程序化交易1
- 家用无线路由器哪个品牌好?程序员分享值得推荐的无线路由器
- 《刷新:重新发现商业与未来》读后感
- 【模拟IC】时钟馈通效应减小及仿真验证
- 生活中的收支明细该如何记录
- Object类的equals方法
- javaMap集合 详解