当前位置: 首页 > news >正文

如何用纯 CSS 创作一个菱形 loader 动画

效果预览

在线演示

按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。

https://codepen.io/comehope/pen/eKzjqK

可交互视频教程

此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

https://scrimba.com/p/pEgDAM/c8eyJUE

源代码下载

本地下载

每日前端实战系列的全部源代码请从 github 下载:

https://github.com/comehope/front-end-daily-challenges

代码解读

定义 dom,一个容器中包含 9 个子元素:

<div class="loader">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

居中显示:

body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: black;
}

定义容器和子元素尺寸,是一个大正方形里包含 9 个小正方形:

.loader {
    width: 10em;
    height: 10em;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 0.5em;
}

把图案调整为大菱形中包含 9 个小菱形:

.loader {
    transform: rotate(45deg);
}

以竖向的小菱形为单位,为小菱形块上色:

.loader span {
    background-color: var(--c);
}

.loader span:nth-child(7) {
    --c: tomato;
}

.loader span:nth-child(4),
.loader span:nth-child(8) {
    --c: gold;
}

.loader span:nth-child(1),
.loader span:nth-child(5),
.loader span:nth-child(9) {
    --c: limegreen;
}

.loader span:nth-child(2),
.loader span:nth-child(6) {
    --c: dodgerblue;
}

.loader span:nth-child(3) {
    --c: mediumpurple;
}

定义动画效果:

.loader span {
    animation: blinking 2s linear infinite;
    animation-delay: var(--d);
    transform: scale(0);
}

@keyframes blinking {
    0%, 100% {
        transform: scale(0);
    }

    40%, 80% {
        transform: scale(1);
    }
}

最后,为小菱形设置时延,增强动感:

.loader span:nth-child(7) {
    --d: 0s;
}

.loader span:nth-child(4),
.loader span:nth-child(8) {
    --d: 0.2s;
}

.loader span:nth-child(1),
.loader span:nth-child(5),
.loader span:nth-child(9) {
    --d: 0.4s;
}

.loader span:nth-child(2),
.loader span:nth-child(6) {
    --d: 0.6s;
}

.loader span:nth-child(3) {
    --d: 0.8s;
}

大功告成!

原文地址:https://segmentfault.com/a/1190000015208027

相关文章:

  • java实现定时任务
  • nginx location if 的匹配规则
  • zabbix 4.0 安装配置
  • spark完整的数据倾斜解决方案
  • 程序员如何选择第一家公司
  • zabbix之 自动发现磁盘io util 监控
  • 通用点赞设计思路
  • MVVM模块化架构
  • EF Core中执行Sql语句查询操作之FromSql,ExecuteSqlCommand,SqlQuery
  • 随手记统一监控平台Focus设计解析
  • Centos7 系统启动docker报错 inotify add watch failed
  • 以OpenGL/ES视角介绍gfx-hal(Vulkan) Texture接口使用
  • 阿里云应用高可用服务公测发布
  • JAVA入门到精通-第57讲-SQLserver数据类型
  • 利用keepalived实现高可用nginx(修改正)
  • 【5+】跨webview多页面 触发事件(二)
  • 11111111
  • quasar-framework cnodejs社区
  • Selenium实战教程系列(二)---元素定位
  • Spring Boot快速入门(一):Hello Spring Boot
  • 阿里云前端周刊 - 第 26 期
  • 闭包--闭包作用之保存(一)
  • 技术攻略】php设计模式(一):简介及创建型模式
  • 解析带emoji和链接的聊天系统消息
  • 开源地图数据可视化库——mapnik
  • 学习使用ExpressJS 4.0中的新Router
  • 一个普通的 5 年iOS开发者的自我总结,以及5年开发经历和感想!
  • 栈实现走出迷宫(C++)
  • 掌握面试——弹出框的实现(一道题中包含布局/js设计模式)
  • 找一份好的前端工作,起点很重要
  • 国内开源镜像站点
  • ​什么是bug?bug的源头在哪里?
  • ###项目技术发展史
  • #【QT 5 调试软件后,发布相关:软件生成exe文件 + 文件打包】
  • #define MODIFY_REG(REG, CLEARMASK, SETMASK)
  • #Ubuntu(修改root信息)
  • #我与Java虚拟机的故事#连载02:“小蓝”陪伴的日日夜夜
  • $.each()与$(selector).each()
  • .bat批处理(六):替换字符串中匹配的子串
  • .NET Core 实现 Redis 批量查询指定格式的Key
  • .net Stream篇(六)
  • .NET 设计一套高性能的弱事件机制
  • .Net 转战 Android 4.4 日常笔记(4)--按钮事件和国际化
  • .NET处理HTTP请求
  • .NET的微型Web框架 Nancy
  • .NET命令行(CLI)常用命令
  • .NET与java的MVC模式(2):struts2核心工作流程与原理
  • .Net中wcf服务生成及调用
  • /bin/bash^M: bad interpreter: No such file or directory
  • [ajaxupload] - 上传文件同时附件参数值
  • [AutoSAR系列] 1.3 AutoSar 架构
  • [BIZ] - 1.金融交易系统特点
  • [BZOJ 3680]吊打XXX(模拟退火)
  • [C++数据结构](31)哈夫曼树,哈夫曼编码与解码
  • [dts]Device Tree机制