有趣的css - 跷跷板加载动画

大家好,我是 Just,这里是「设计师工作日常」,今天分享的是使用 css 模拟一个跷跷板效果的加载动画效果。

《有趣的css》系列最新实例通过公众号「设计师工作日常」发布。


目录

整体效果

💎知识点:

1️⃣ transform 变形属性以及 transform-origin 基点定位

2️⃣ :before 和 :after 伪元素选择器

3️⃣ animation 动画属性
🔑思路:

创建一个长矩形和一个正方形,然后让正方形进行翻转移动,同时让整体变化角度,形成如同跷跷板一样的效果。

模拟一个跷跷板效果的加载动画,让用户在等待页面加载时更有趣一些。


核心代码部分,简要说明了写法思路;完整代码在最后,可直接复制到本地运行。

核心代码

html 代码

html 复制代码
<div class="loading73"></div>

主体标签代码。

css 部分代码

css 复制代码
.loading73{
  width: 80px;
  height: 80px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-origin:center center;
  animation: effbox73 3s cubic-bezier(0, 0.6, 1, 0.4) infinite;
}
@keyframes effbox73{
  0%{
    transform: rotate(-30deg);
  }
  40%{
    transform: rotate(30deg);
  }
  50%{
    transform: rotate(30deg);
  }
  90%{
    transform: rotate(-30deg);
  }
  100%{
    transform: rotate(-30deg);
  }
}
.loading73::before{
  content: '';
  width: 100%;
  height: 4px;
  background-color: #000;
  position: absolute;
  left: 0;
}
.loading73::after{
  content: '';
  width: 16px;
  height: 16px;
  background-color: #089f1f;
  position: absolute;
  top: 21px;
  left: 0;
  border-radius: 3px;
  animation: eff73 3s ease-in-out infinite;
}
@keyframes eff73{
  0%{
    transform: translateX(0) rotate(0);
  }
  10%{
    transform: translateX(16px) rotate(90deg);
  }
  20%{
    transform: translateX(32px) rotate(180deg);
  }
  30%{
    transform: translateX(48px) rotate(270deg);
  }
  40%{
    transform: translateX(64px) rotate(360deg);
  }
  50%{
    transform: translateX(64px) rotate(360deg);
  }
  60%{
    transform: translateX(48px) rotate(270deg);
  }
  70%{
    transform: translateX(32px) rotate(180deg);
  }
  80%{
    transform: translateX(16px) rotate(90deg);
  }
  90%{
    transform: translateX(0) rotate(0);
  }
  100%{
    transform: translateX(0) rotate(0);
  }
}

1、给主体标签添加基本样式,定义 flex 布局,让内元素平行垂直居中;添加 transform-origin:center center; 属性,让主体整体基于中心点对齐;
2、利用 :before 基于主体创建一个伪元素长矩形作为跷跷板,宽度为 100% ,高度为 4px ,设置定位属性,靠左对齐,背景色为 #000 黑色,。
3、利用 :after 基于主体创建一个伪元素正方形,设置其基本样式,通过定位靠左对齐,并且让底部与长矩形跷跷板顶部差 1px,这样正方形在旋转时,不会遮盖住长矩形。
4、给伪元素正方形添加 animation 属性,设置参数 animation: eff73 3s ease-in-out infinite; ,并且设置关键帧,让伪元素正方形不停的翻转移动。
5、最后给主体标签添加 animation 属性,设置参数 animation: effbox73 3s cubic-bezier(0, 0.6, 1, 0.4) infinite; ,注意这里设置运动速率为 cubic-bezier(0, 0.6, 1, 0.4) ,让伪元素正方形翻转移动到跷跷板两头时加速跷跷板下降;最后同样要设置关键帧,让跷跷板和正方形的关键帧同步。

完整代码如下

html 页面

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="loading73"></div>
    </div>
  </body>
</html>

css 样式

css 复制代码
/** style.css **/
.app{
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loading73{
  width: 80px;
  height: 80px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-origin:center center;
  animation: effbox73 3s cubic-bezier(0, 0.6, 1, 0.4) infinite;
}
@keyframes effbox73{
  0%{
    transform: rotate(-30deg);
  }
  40%{
    transform: rotate(30deg);
  }
  50%{
    transform: rotate(30deg);
  }
  90%{
    transform: rotate(-30deg);
  }
  100%{
    transform: rotate(-30deg);
  }
}
.loading73::before{
  content: '';
  width: 100%;
  height: 4px;
  background-color: #000;
  position: absolute;
  left: 0;
}
.loading73::after{
  content: '';
  width: 16px;
  height: 16px;
  background-color: #089f1f;
  position: absolute;
  top: 21px;
  left: 0;
  border-radius: 3px;
  animation: eff73 3s ease-in-out infinite;
}
@keyframes eff73{
  0%{
    transform: translateX(0) rotate(0);
  }
  10%{
    transform: translateX(16px) rotate(90deg);
  }
  20%{
    transform: translateX(32px) rotate(180deg);
  }
  30%{
    transform: translateX(48px) rotate(270deg);
  }
  40%{
    transform: translateX(64px) rotate(360deg);
  }
  50%{
    transform: translateX(64px) rotate(360deg);
  }
  60%{
    transform: translateX(48px) rotate(270deg);
  }
  70%{
    transform: translateX(32px) rotate(180deg);
  }
  80%{
    transform: translateX(16px) rotate(90deg);
  }
  90%{
    transform: translateX(0) rotate(0);
  }
  100%{
    transform: translateX(0) rotate(0);
  }
}

页面渲染效果

以上就是所有代码,以及简单的思路,希望对你有一些帮助或者启发。


1\] [原文阅读](https://mp.weixin.qq.com/s/N-4Fo53SOdQe8AoZopksQg) \[2\] 《有趣的css》,访问网址:[funcss.liujueyi.cn](https://funcss.liujueyi.cn),欢迎大家访问。 *** ** * ** *** 我是 Just,这里是「设计师工作日常」,求点赞求关注!

相关推荐
前端切图仔00140 分钟前
CSS预处理器对比:Sass、Less与Stylus如何选择
css·less·sass
codingandsleeping9 小时前
一个简易版无缝轮播图的实现思路
前端·javascript·css
liangshanbo121514 小时前
CSS 包含块
前端·css
倒霉男孩14 小时前
CSS文本属性
前端·css
程序员张316 小时前
Vue3+TS中svg图标的使用-@unocss/preset-icons
前端·css
Json_16 小时前
使用纯前端技术html+css+js实现一个蔬果商城的前端模板!
前端·css·html
星空寻流年17 小时前
css3新特性第五章(web字体)
前端·css·css3
MaisieKim_17 小时前
CSS预处理工具有哪些?分享主流产品
css·less·sass
小桥风满袖20 小时前
Three.js-硬要自学系列7 (查看几何体顶点位置和索引、旋转,缩放,平移几何体)
前端·css·three.js
换日线°20 小时前
微信小程序文字混合、填充动画有效果图
css·微信小程序