建站平台备案,房地产企业网站建设,网站建设可视化工具,汕头企业网站公司大家好#xff0c;我是 Just#xff0c;这里是「设计师工作日常」#xff0c;今天分享的是使用 css 模拟一个跷跷板效果的加载动画效果。
《有趣的css》系列最新实例通过公众号「设计师工作日常」发布。 目录 整体效果核心代码html 代码css 部分代码 完整代码如下html 页面…大家好我是 Just这里是「设计师工作日常」今天分享的是使用 css 模拟一个跷跷板效果的加载动画效果。
《有趣的css》系列最新实例通过公众号「设计师工作日常」发布。 目录 整体效果核心代码html 代码css 部分代码 完整代码如下html 页面css 样式页面渲染效果 整体效果 知识点 1️⃣ transform 变形属性以及 transform-origin 基点定位 2️⃣ :before 和 :after 伪元素选择器 3️⃣ animation 动画属性 思路 创建一个长矩形和一个正方形然后让正方形进行翻转移动同时让整体变化角度形成如同跷跷板一样的效果。 模拟一个跷跷板效果的加载动画让用户在等待页面加载时更有趣一些。 核心代码部分简要说明了写法思路完整代码在最后可直接复制到本地运行。
核心代码
html 代码
div classloading73/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 langzhheadmeta charsetutf-8link relstylesheet hrefstyle.csstitle跷跷板加载动画/title/headbodydiv classappdiv classloading73/div/div/body
/htmlcss 样式
/** 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这里是「设计师工作日常」求点赞求关注
