如何用纯 CSS 创作一个方块旋转动画
效果预览
在线演示
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
https://codepen.io/comehope/pen/gjgyWm
可交互视频
此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
https://scrimba.com/p/pEgDAM/czDMNsw
源代码下载
本地下载
每日前端实战系列的全部源代码请从 github 下载:
https://github.com/comehope/front-end-daily-challenges
代码解读
定义 dom,容器中包含 4 个元素:
<div class="loader"><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;
}
画出容器中心的方块:
.loader{width: 10em;height: 10em;border: 0.25em solid white;font-size: 10px;border-radius: 1em;
}
画出容器四周的方块:
.loader,
.loader span {position: absolute;
}.loader span:nth-child(1) {top: 5em;left: 5em;
}.loader span:nth-child(2) {top: -5em;left: 5em;
}.loader span:nth-child(3) {top: 5em;left: -5em;
}.loader span:nth-child(4) {top: -5em;left: -5em;
}
给方块上色:
.loader,
.loader span {mix-blend-mode: screen;
}.loader {background-color: gold;
}.loader span:nth-child(1) {background-color: dodgerblue;
}.loader span:nth-child(2) {background-color: hotpink;
}.loader span:nth-child(3) {background-color: mediumpurple;
}.loader span:nth-child(4) {background-color: limegreen;
}
为容器整体增加旋转动画:
.loader {animation: rotating 2s linear infinite;
}@keyframes rotating {to {transform: rotate(1turn);}
}
为容器四周的方块增加反向旋转的动画效果:
.loader span {animation: de-rotating 4s linear infinite;
}@keyframes de-rotating {from, to {transform: rotate(0deg) scale(0.5);}50% {transform: rotate(-180deg) scale(1.2);}
}
最后,隐藏可能出现在页面外部的内容:
body {overflow: hidden;
}
大功告成!
原文地址:https://segmentfault.com/a/1190000015721771
如何用纯 CSS 创作一个方块旋转动画相关推荐
- 前端每日实战:45# 视频演示如何用纯 CSS 创作一个菱形 loader 动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/eKzjqK 可交互视频教程 此视频 ...
- 如何用纯 CSS 创作一个雷达扫描动画
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VdbGvr 可交互视频 ...
- 如何用纯 CSS 创作一个小球上台阶的动画
如何用纯 CSS 创作一个小球上台阶的动画 效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/come ...
- 如何用纯 CSS 创作一个同心圆弧旋转 loader 特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/OZmXQX 可交互视频教程 此视 ...
- 如何用纯 CSS 创作一个荧光脉冲 loader 特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/erRzzR 可交互视频教程 此视 ...
- 如何用纯 CSS 创作一个冒着热气的咖啡杯
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/xjXxoz 可交互视频教程 此视 ...
- 如何用纯 CSS 创作一个渐变色动画边框
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/odpRKX 可交互视频教 ...
- 如何用纯 CSS 创作一个极品飞车 loader
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/w178191520/article/details/84861010 效果预览 在线演示 按下右侧的 ...
- 如何用纯 CSS 创作一个极品飞车 loader 1
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/w178191520/article/details/84861010 效果预览 在线演示 按下右侧的 ...
最新文章
- 把项目从VS2005升级到VS2013
- SqlServer判断数据库、表、存储过程、函数是否存在
- Android里监视数据库的变化
- (转)程序员的十层楼11层(上帝)
- 视频参数(流媒体系统,封装格式,视频编码,音频编码,播放器)对比
- 受迫阻尼 matlab 仿真,MATLAB系统仿真报告——有阻尼受迫振动系统
- 【开发工具】 JEECG_3.7新版开发工具
- java if else程序,java – if then else条件评估
- 随想录(关于pthread的使用方法)
- Android大学课件SQLite3 数据库操作
- web前端网站推荐(后续继续补充)
- callback的实现
- Java配置环境变量、方法和原因
- Linux系统彻底卸载MySQL数据库
- 易康(eCognition)对象几何特征--2:几何(Geometry)_ 形状(Shape)
- excel打开表 正在计算机,事实:在Excel中打开表格时响应缓慢的解决方案技术
- 计算机科学有什么,计算机科学是什么意思
- 《自然语言处理-基于预训练模型的方法》笔记
- Adobe XD 下载和安装教程
- P2360 地下城主
热门文章
- 美国进入紧急状态:谷歌投入1700名工程师上阵抗疫,马斯克称车祸比新冠病毒危险...
- Google X垃圾分类机器人横空出世,再也不怕分不清干垃圾湿垃圾有害垃圾了
- 阿里平头哥首款AI芯片发布!46倍于英伟达P4,刷新全球推理性能最高纪录
- erp系统为什么要选稳定性强的?看完你就明白了
- 计算机操作原理进程调度算法---先来先服务,短进程优先(C语言)
- ACM之路(16)—— 数位DP
- jquery easyui 操作总结
- Hibernate Criterion
- Windows2012R2服务器的安装与亮点功能介绍
- c++文件操作一一读取文件内容