如何用纯 CSS 创作一个精彩的彩虹 loading 特效
效果预览
在线演示
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
https://codepen.io/comehope/pen/vjvoow
可交互视频教程
此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
https://scrimba.com/p/pEgDAM/cPLGLhV
源代码下载
本地下载
每日前端实战系列的全部源代码请从 github 下载:
https://github.com/comehope/front-end-daily-challenges
代码解读
定义 dom:
<div class="rainbow"><div class="bows"><span></span><span></span><span></span><span></span><span></span><span></span></div>
</div>
居中显示:
html, body, .bows {height: 100%;display: flex;align-items: center;justify-content: center;background: black;
}
定义彩虹的尺寸:
.rainbow {width: 20em;height: 10em;
}
定义彩虹内拱形的尺寸:
.bows {width: 100%;height: 200%;position: relative;
}
定义彩虹内所有拱形共有的特性:
.bows {transform: rotate(225deg);
}.bows span {position: absolute;width: calc(100% - 2em * (var(--n) - 1));height: calc(100% - 2em * (var(--n) - 1));border: 1em solid var(--color);box-sizing: border-box;border-top-color: transparent;border-left-color: transparent;border-radius: 50%;
}
分别设置每个拱形的个性变量:
.bows span:nth-child(1) {--n: 1;--color: orangered;
}.bows span:nth-child(2) {--n: 2;--color: orange;
}.bows span:nth-child(3) {--n: 3;--color: yellow;
}.bows span:nth-child(4) {--n: 4;--color: mediumspringgreen;
}.bows span:nth-child(5) {--n: 5;--color: deepskyblue;
}.bows span:nth-child(6) {--n: 6;--color: mediumpurple;
}
定义动画效果:
.bows span {animation: rotating 3s infinite;animation-delay: calc(0.05s * var(--n));
}@keyframes rotating {0%, 20% {transform: rotate(0deg);}80%, 100% {transform: rotate(360deg);}
}
最后,隐藏掉容器之外的内容:
.rainbow {overflow: hidden;
}
大功告成!
原文地址:https://segmentfault.com/a/1190000014939781
如何用纯 CSS 创作一个精彩的彩虹 loading 特效相关推荐
- 如何用纯 CSS 创作一个同心圆弧旋转 loader 特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/OZmXQX 可交互视频教程 此视 ...
- 如何用纯 CSS 创作一个金属光泽 3D 按钮特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/full/MGeRRO 可交互视频教程 此 ...
- 如何用纯 CSS 创作一个金属光泽 3D 按钮特效 1
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/full/MGeRRO 可交互视频教程 此 ...
- 如何用纯 CSS 创作一个小球上台阶的动画
如何用纯 CSS 创作一个小球上台阶的动画 效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/come ...
- 4. 纯 CSS 创作一个金属光泽 3D 按钮特效
4. 纯 CSS 创作一个金属光泽 3D 按钮特效 原文地址:https://segmentfault.com/a/1190000014599280 HTML代码: <div class=&qu ...
- 7.纯 CSS 创作一个 3D 文字跑马灯特效
7.纯 CSS 创作一个 3D 文字跑马灯特效 原文地址:https://segmentfault.com/a/1190000014663038 感想:简单的从右到左动画 HTML代码: <di ...
- 如何用纯 CSS 创作一个荧光脉冲 loader 特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/erRzzR 可交互视频教程 此视 ...
- 如何用纯 CSS 创作一个冒着热气的咖啡杯
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/xjXxoz 可交互视频教程 此视 ...
- 如何用纯 CSS 创作一个渐变色动画边框
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/odpRKX 可交互视频教 ...
最新文章
- shell 脚本定时创建月份表
- 零基础自学python的建议-【老男孩Python课堂安排】零基础Python学习方法
- TOJ 4095: love168yk的选美大赛
- centos mysql root_CentOS下MySQL忘记root密码解决方法
- MATLAB机器学习系列-3:BP神经网络算例实现
- 我开发了一个对.NET程序进行瘦身的工具
- 用户参与度与活跃度的区别_用户参与度突然下降
- 23 FI配置-财务会计-未清和关账过账期间
- 技巧:在Silverlight中如何访问外部xap文件中UserControl
- java8编程开发入门 李兴华_李兴华系列--JAVA详解视频(jdk1.8)及项目实战教程
- 查找窗口隐藏了怎么办_百度地图这些不为人知的隐藏功能
- Codevs 1200 同余方程 2012年NOIP全国联赛提高组
- MySQL数据库将多条记录的单个字段合并成一条记录(GROUP_CONCAT)
- Hinduja Global Solutions借助OpManager一年节省300万美元
- intel服务器无线网卡,英特尔网卡: Intel无线网卡Win7驱动 12.4.1.53版发布
- 用聚宽量化炒股-5获取数据函数-6)获取指数成分股代码函数get_index_stocks
- 一树梨花压海棠的典故
- linux的intel显卡驱动下载地址,英特尔®嵌入式媒体和显卡驱动程序(英特尔® EMGD)...
- [车联网安全自学篇] Android安全之Android中常用权限手册「必备」
- 《人生要耐得住寂寞》