大家好，我是 Just，这里是「设计师工作日常」，今天分享的是使用 css 模拟一个跷跷板效果的加载动画效果。
《有趣的css》系列最新实例通过公众号「设计师工作日常」发布。
整体效果
知识点：
1️⃣ transform 变形属性以及 transform-origin 基点定位
2️⃣ :before 和 :after 伪元素选择器
3️⃣ animation 动画属性
思路：
创建一个长矩形和一个正方形，然后让正方形进行翻转移动，同时让整体变化角度，形成如同跷跷板一样的效果。
模拟一个跷跷板效果的加载动画，让用户在等待页面加载时更有趣一些。
核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。
核心代码
html 代码
<div class="loading73"></div>
主体标签代码。
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 页面
<!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 样式
/** 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] 原文阅读
[2] 《有趣的css》，访问网址：funcss.liujueyi.cn，欢迎大家访问。
我是 Just，这里是「设计师工作日常」，求点赞求关注！
本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！
转载请注明出处： 免费源码网-免费的源码资源网站 » 有趣的css - 跷跷板加载动画
发表评论 取消回复