前端每日实战:114# 视频演示如何用纯 CSS 和混色模式创作一个 loader 动画
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
https://codepen.io/comehope/pen/MqYroW
可交互视频
此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
https://scrimba.com/p/pEgDAM/c2qZyUV
源代码下载
每日前端实战系列的全部源代码请从 github 下载:
https://github.com/comehope/front-end-daily-challenges
代码解读
定义 dom,只有 1 个元素:
<div class="loader"></div>
居中显示:
body {margin: 0;height: 100vh;display: flex;align-items: center;justify-content: center;background-color: lightyellow;
}
定义容器尺寸:
.loader {width: 30em;height: 3em;font-size: 10px;
}
用伪元素画出2个圆角矩形,各占容器的一半宽,放置在容器的左右两端,分别上色:
.loader {position: relative;
}.loader::before,
.loader::after {content: '';position: absolute;width: 50%;height: inherit;border-radius: 1em;
}.loader::before {left: 0;background-color: dodgerblue;
}.loader::after {right: 0;background-color: hotpink;
}
为圆角矩形增加 'loading' 文本:
.loader::before,
.loader::after {content: 'loading';font-size: 2.5em;color: white;text-align: center;line-height: 1em;
}
增加动画效果:
.loader::before,
.loader::after {animation: 5s move ease-in-out infinite;
}@keyframes move {50% {transform: translateX(100%);}
}
为两个圆角矩形分别设置运动方向变量,使它们相对移动:
.loader::before {--direction: 1;
}.loader::after {--direction: -1;
}@keyframes move {50% {transform: translateX(calc(100% * var(--direction)));}
}
最后,设置混色模式,使两个矩形相交的部分不是覆盖而是使颜色重叠:
.loader::before,
.loader::after {mix-blend-mode: multiply;
}
大功告成!
前端每日实战:114# 视频演示如何用纯 CSS 和混色模式创作一个 loader 动画相关推荐
- 前端每日实战:100# 视频演示如何用纯 CSS 创作闪闪发光的霓虹灯文字
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/GBwvxw 可交互视频 此视频是可 ...
- 前端每日实战:45# 视频演示如何用纯 CSS 创作一个菱形 loader 动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/eKzjqK 可交互视频教程 此视频 ...
- 前端每日实战:93# 视频演示如何用纯 CSS 创作一根闪电连接线
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/RBjdzZ 可交互视频 此视频是可 ...
- 前端每日实战:60# 视频演示如何用纯 CSS 创作一块乐高积木
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/qKKqrv 可交互视频 此视频是可 ...
- 前端每日实战:140# 视频演示如何用纯 CSS 创作文本的淡入动画效果
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ZMwgqK 可交互视频 此视频是可 ...
- 前端每日实战:56# 视频演示如何用纯 CSS 描述程序员的生活
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/YvYVvY 可交互视频 此视频是可 ...
- 前端每日实战:34# 视频演示如何用纯 CSS 创作在文本前后穿梭的边框
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/qYepNv 可交互视频教程 此视频 ...
- 前端每日实战:151# 视频演示如何用纯 CSS 创作超能陆战队的大白
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ReGRaO 可交互视频 此视频是可 ...
- 前端每日实战:62# 视频演示如何用纯 CSS 创作一只蒸锅
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/YvOzNy 可交互视频 此视频是可 ...
最新文章
- 数据挖掘·数据变换与离散化·概念分层与离散化·3-4-5规则
- 为了探究不同光照处理_渭南市实验初中“诱思探究学导”课堂教学改革展示活动圆满成功...
- 去除字符串中所有的逗号
- ArcEngine中使用上下左右键移动地图
- 国家开放大学本科计算机应用基础,【(精华版)最新国家开放大学电大本科《计算机应用基础》网络课网考形考作业一及三试题答案】.docx...
- 飞鸽传书2007程序语言的面向对象最后会成自然语言吗?
- leetcode437. 路径总和 III
- 配置私有仓库(使用registry镜像搭建一个私有仓库)
- LeetCode之长度最小的子数组
- 打开计算机不显示百度云管家,百度云管家怎么打不开电脑上的百度云管家打不开的解决方法...
- python 复数的模_如何使用abs在python中返回复数?
- 免费下论文的网站有哪些?
- git使用命令行首次提交代码
- snapchat_如何查看谁查看了Snapchat故事并对其进行了截图
- 猿创征文 |【算法入门必刷】数据结构-栈(五)
- 我要让一些好习惯替换掉坏习惯
- 对接接口需要注意的事项
- 1017 非常可乐
- uni-app - 拨打电话功能(在不同平台下,点击按钮触发一键拨号功能)
- 为什么有的站点别人能访问但我无法访问
热门文章
- PHP和MySQL处理树状、分级、无限分类、分层数据的方法
- 盖瑞解剖学: 临床实践的解剖学基础 Gray‘s Anatomy: The Anatomical Basis of Clinical Practice 高清英文原版
- 第21天学习Java的笔记-数学工具类Arrays,Math
- 计算机视觉--Python实现人体姿态估计
- Xilinx Platform Cable USB II 下载器驱动安装教程——Win10
- 【Spring 数据访问终篇】Spring + Hibernate + Mysql
- UG NX12.0安装教程
- 什么是“小小输入法”软件? 用其进行郑码输入练习
- C语言中fun的功能是将字符串,下列给定的程序中,fun()函数的功能是:将p所指字符串中......
- oracle日志分析产品,鼎甲技术应用:Oracle日志分析 之事务级精准恢复