效果预览

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

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

可交互视频

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

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

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

源代码下载

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

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

代码解读

定义 dom,容器中包含 8 个元素,每个元素代表一个矩形色块:

<div class="icon">
<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: #ccc;
}

定义容器尺寸:

.icon {
width: 10em;
height: 10em;
font-size: 30px;
background-color: #eee;
border-radius: 20%;
}

绘制出矩形的轮廓(边框为辅助线,最终会被删除),并放置在容器的中上方:

.icon {
position: relative;
display: flex;
justify-content: center;
box-sizing: border-box;
padding: 1em;
} .icon span {
position: absolute;
width: 22.5%;
height: 37.5%;
border: 1px dashed black;
border-radius: 50% / 30%;
}

为矩形设置下标变量 --n

.icon span:nth-child(1) {
--n: 1;
} .icon span:nth-child(2) {
--n: 2;
} .icon span:nth-child(3) {
--n: 3;
} .icon span:nth-child(4) {
--n: 4;
} .icon span:nth-child(5) {
--n: 5;
} .icon span:nth-child(6) {
--n: 6;
} .icon span:nth-child(7) {
--n: 7;
} .icon span:nth-child(8) {
--n: 8;
}

让 8 个矩形依次旋转固定的角度,围合成一个圆形:

.icon span {
transform-origin: center 105%;
transform: rotate(calc((var(--n) - 1) * 45deg));
}

为矩形设置颜色变量 --c

.icon span:nth-child(1) {
--c: rgba(243, 156, 18, 0.7);
} .icon span:nth-child(2) {
--c: rgba(241, 196, 15, 0.7);
} .icon span:nth-child(3) {
--c: rgba(46, 204, 113, 0.7);
} .icon span:nth-child(4) {
--c: rgba(27, 188, 155, 0.7);
} .icon span:nth-child(5) {
--c: rgba(65, 131, 215, 0.7);
} .icon span:nth-child(6) {
--c: rgba(102, 51, 153, 0.7);
} .icon span:nth-child(7) {
--c: rgba(155, 89, 182, 0.7);
} .icon span:nth-child(8) {
--c: rgba(242, 38, 19, 0.7);
}

为 8 个矩形上色,并删除掉起辅助线作用的边框:

.icon span {
/* border: 1px dashed black; */
background-color: var(--c);
}

设置混色模式,使重叠颜色能叠加在一起:

.icon span {
mix-blend-mode: multiply;
}

增加鼠标悬停效果,当悬停时运行矩形色块展开的动画:

.icon:hover span {
animation: rotating 2s ease-in-out forwards;
} @keyframes rotating {
from {
transform: rotate(0deg);
} to {
transform: rotate(calc((var(--n) - 1) * 45deg));
}
}

注意,在动画过程中第 1 个矩形并没有转动,因为它是从 0 度转到 0 度,为了让它转动,要把它的结束角度设置为 360 度,通过修改它的下标变量来实现:

.icon span:nth-child(1) {
--n: 9;
}

大功告成!

前端每日实战:122# 视频演示如何用纯 CSS 创作一个苹果系统的相册图标的更多相关文章

  1. 前端每日实战:157# 视频演示如何用纯 CSS 创作一个棋盘错觉动画(实际上每一行都是平行的)

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VEyoGj 可交互视频 此视频是可 ...

  2. 前端每日实战:158# 视频演示如何用纯 CSS 创作一个雨伞 toggle 控件

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/pxLbjv 可交互视频 此视频是可 ...

  3. 前端每日实战:156# 视频演示如何用纯 CSS 创作一个飞机舷窗风格的 toggle 控件

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/jeaOrw 可交互视频 此视频是可 ...

  4. 前端每日实战:25# 视频演示如何用纯 CSS 创作一个慧星拖尾效果的 loader 动画

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/YLRLaM 可交互视频教程 此视频 ...

  5. 前端每日实战:30# 视频演示如何用纯 CSS 创作一个晃动的公告板

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/wjZoGV 可交互视频教程 此视频 ...

  6. 前端每日实战:45# 视频演示如何用纯 CSS 创作一个菱形 loader 动画

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/eKzjqK 可交互视频教程 此视频 ...

  7. 前端每日实战:86# 视频演示如何用纯 CSS 创作一个方块旋转动画

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/gjgyWm 可交互视频 此视频是可 ...

  8. 前端每日实战:91# 视频演示如何用纯 CSS 创作一个行驶中的火车 loader

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/RBLWzJ 可交互视频 此视频是可 ...

  9. 前端每日实战:47# 视频演示如何用纯 CSS 创作一个蝴蝶标本展示框

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/xzgZzQ 可交互视频教程 此视频 ...

随机推荐

  1. 卡死浏览器使IPhone的自带safari打开重启的JS循环代码

    <html> <body> <script> var total=""; for (var i=0; i < 1000000; i++) ...

  2. [Python]ctypes+struct实现类c的结构化数据串行处理

    1. 用C/C++实现的结构化数据处理 在涉及到比较底层的通信协议开发过程中, 往往需要开发语言能够有效的表达和处理所定义的通信协议的数据结构. 在这方面是C/C++语言是具有天然优势的: 通过str ...

  3. Git 版本管理工具命令速查

    转自:http://www.jb51.net/article/55442.htm 一. Git 常用命令速查 git branch 查看本地所有分支git status 查看当前状态 git comm ...

  4. Python Module_os_操作系统

    目录 目录 前言 软件环境 os模块内建属性 osname 获取执行平台的类型 oslinesep 输出当前平台使用的行终止符 ossep 输出操作系统特定的路径分隔符 ospathsep 输出用于分 ...

  5. linux防火墙iptables简单介绍

    --append  -A chain        Append to chain  --delete  -D chain        Delete matching rule from chain ...

  6. ARTS挑战

    最近有点迷茫,感觉自己工作了一年多,技术成长有限,我要做出改变.2019年11月2日,就从今天开始,参加耗子叔的ARTS挑战. ARTS的初衷 Algorithm:主要是为了编程训练和学习.每周至少做 ...

  7. .net core 学习小结之 配置介绍(config)以及热更新

    命令行的配置 var settings = new Dictionary<string, string>{ { "name","cyao"}, {& ...

  8. 多线程16-SpinWait

        );             isCompleted = ));             isCompleted = );             isCompleted = true;    ...

  9. 指定pom文件jdk版本

    <build> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> ...

  10. MySQL-快速入门(15)MySQL Replication,主从复制

    1.何为主从复制. 从一个MySQL主服务器(master)将数据复制到另一台或多台MySQL从服务器(slaves)的过程,将主数据库的DDL和DML操作通过二进制日志传到复制服务器上,然后在从服务 ...