CSS的趣味应用 - 渐变式圆点加载动画
整体效果
知识点: animation 时间函数 steps()。用 css3 模拟一个渐变式圆点加载效果。核心代码部分,简要说明了写法思路;完整代码在最后,可直接复制到本地运行。
核心代码
html 代码
<div class="loading38">
<span class="load-span38"></span>
<span class="load-span38"></span>
<span class="load-span38"></span>
<span class="load-span38"></span>
<span class="load-span38"></span>
<span class="load-span38"></span>
<span class="load-span38"></span>
<span class="load-span38"></span>
</div>
用8个 spn 标签绘制8个圆点。
css 部分代码
.loading38 {
--r-num: 45deg; /*定义角度值*/
width: 40px;
height: 40px;
position: relative;
animation: loading38-eff 1s steps(8) both infinite; /*steps函数*/
}
.load-span38{
width: 6px;
height: 6px;
display: block;
border-radius: 3px;
position: absolute;
left: 17px;
top: 0;
transform-origin: 3px 20px; /*定义变形中心点*/
}
.load-span38:nth-of-type(1){
transform: rotate(var(--r-num));
background: #2FACFD;
}
.load-span38:nth-of-type(2){
transform: rotate(calc(var(--r-num)*2));
background: #33B4FD;
}
.load-span38:nth-of-type(3){
transform: rotate(calc(var(--r-num)*3));
background: #38BEFE;
}
.load-span38:nth-of-type(4){
transform: rotate(calc(var(--r-num)*4));
background: #3ECAFE;
}
.load-span38:nth-of-type(5){
transform: rotate(calc(var(--r-num)*5));
background: #45D7FE;
}
.load-span38:nth-of-type(6){
transform: rotate(calc(var(--r-num)*6));
background: #4BE4FE;
}
.load-span38:nth-of-type(7){
transform: rotate(calc(var(--r-num)*7));
background: #52F1FF;
}
.load-span38:nth-of-type(8){
transform: rotate(calc(var(--r-num)*8));
background: #57FBFF;
}
@keyframes loading38-eff{
to {
transform: rotate(0deg);
}
from {
transform: rotate(-360deg);
}
}
8个 spn 绘制8个圆点,分别写上不同的背景色;通过 transform-origin 属性来定义变形的中心点,然后给每个圆点计算角度变形(这里我定义的角度值为 (360°/8 = 45°)),注意这里的每次变形是基于上一个圆点的角度 +45deg;最后给整体加上 animation 动画,并设置时间函数 steps() 为8,意思是分8次整体旋转完成 360deg。
完整代码如下
html 页面
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>渐变加载条</title>
</head>
<body>
<div class="app">
<div class="loading38">
<span class="load-span38"></span>
<span class="load-span38"></span>
<span class="load-span38"></span>
<span class="load-span38"></span>
<span class="load-span38"></span>
<span class="load-span38"></span>
<span class="load-span38"></span>
<span class="load-span38"></span>
</div>
</div>
</body>
</html>
css 样式
/** style.css **/
.app{
width: 100%;
height: 100vh;
background-color: #ffffff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.loading38 {
--r-num: 45deg; /*定义角度值*/
width: 40px;
height: 40px;
position: relative;
animation: loading38-eff 1s steps(8) both infinite;
}
.load-span38{
width: 6px;
height: 6px;
display: block;
border-radius: 3px;
position: absolute;
left: 17px;
top: 0;
transform-origin: 3px 20px;
}
.load-span38:nth-of-type(1){
transform: rotate(var(--r-num));
background: #2FACFD;
}
.load-span38:nth-of-type(2){
transform: rotate(calc(var(--r-num)*2));
background: #33B4FD;
}
.load-span38:nth-of-type(3){
transform: rotate(calc(var(--r-num)*3));
background: #38BEFE;
}
.load-span38:nth-of-type(4){
transform: rotate(calc(var(--r-num)*4));
background: #3ECAFE;
}
.load-span38:nth-of-type(5){
transform: rotate(calc(var(--r-num)*5));
background: #45D7FE;
}
.load-span38:nth-of-type(6){
transform: rotate(calc(var(--r-num)*6));
background: #4BE4FE;
}
.load-span38:nth-of-type(7){
transform: rotate(calc(var(--r-num)*7));
background: #52F1FF;
}
.load-span38:nth-of-type(8){
transform: rotate(calc(var(--r-num)*8));
background: #57FBFF;
}
@keyframes loading38-eff{
to {
transform: rotate(0deg);
}
from {
transform: rotate(-360deg);
}
}
页面渲染效果
以上就是所有代码,以及简单的思路,希望对你有一些帮助或者启发。
CSS
网站开发
小程序开发
阅读排行
-
1. 几行代码就能实现Html大转盘抽奖
大转盘抽奖是网络互动营销的一种常见形式,其通过简单易懂的界面设计,让用户在游戏中体验到乐趣,同时也能增加商家与用户之间的互动。本文将详细介绍如何使用HTML,CSS和JavaScript来实现大转盘抽奖的功能。
查看详情 -
2. 浙江省同区域公司地址变更详细流程
提前准备好所有需要的资料,包含:房屋租赁合同、房产证、营业执照正副本、代理人身份证正反面、承诺书(由于我们公司其中一区域已有注册另外一公司,所以必须需要承诺书)
查看详情 -
3. 微信支付商户申请接入流程
微信支付,是微信向有出售物品/提供服务需求的商家提供推广销售、支付收款、经营分析的整套解决方案,包括多种支付方式,如JSAPI支付、小程序支付、APP支付H5支付等支付方式接入。
查看详情 -
4. 阿里云域名ICP网络备案流程
根据《互联网信息服务管理办法》以及《非经营性互联网信息服务备案管理办法》,国家对非经营性互联网信息服务实行备案制度,对经营性互联网信息服务实行许可制度。
查看详情 -
5. 微信小程序申请注册流程
微信小程序注册流程与微信公众号较为相似,同时微信小程序支持通过已认证的微信公众号进行注册申请,无需进行单独认证即可使用,同一个已认证微信公众号可同时绑定注册多个小程序。
查看详情