效果预览

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

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. leetcode-mid-dynamic programming-62. Unique Paths

    mycode   time limited class Solution(object): def uniquePaths(self, m, n): """ :type ...

  2. git跟yum一样 linux下的命令使用和思想是类似的

    git跟yum一样 linux下的命令使用和思想是类似的

  3. GitHub - 解决 GitHub Page 404

    带有下划线的文件报 404 解决:在仓库文件夹根目录添加.nojekyll文件 参见: Bypassing Jekyll on GitHub Pages - The GitHub Blog How t ...

  4. Linux监控命令之==>free

    一.命令说明 free 命令显示系统内存的使用情况:包括物理内存.交换内存(swap)和内核缓冲区内存 二.参数说明 -b -k -m -g:分别以字节.KB.MB.GB为单位显示内存使用情况 -l: ...

  5. 【Spring】---【IOC】

    Spring 2017-08-15 08:25:57 [IOC] 分享几篇好文 谈谈对Spring IOC的理解 Spring的IOC原理(转载) java框架篇---spring IOC 实现原理 ...

  6. ARP协议基础

    ARP 什么是ARP协议 ARP协议是能够根据IP地址解析出该IP地址所在设备的MAC地址,叫(Address Resolution Protocol)地址解析协议 ARP地址的工作流程 当一台主机A ...

  7. 杭州集训Day4

    别问我为什么没有前三天,有时间再补~ 60+60+50=170. T1 . 坐等 memset0 ( 1s 256MB )( 原题:洛谷CF1151E Number of Components ) 树 ...

  8. [转帖]100G QSFP28与CFP,CFP2,CFP4光模块的比较

    100G QSFP28与CFP,CFP2,CFP4光模块的比较 https://www.eefocus.com/etulink/blog/17-09/423967_5c520.html 数据中心网络发 ...

  9. Nginx 的方向代理及配置

    最近有打算研读nginx源代码,看到网上介绍nginx可以作为一个反向代理服务器完成负载均衡.所以搜罗了一些关于反向代理服务器的内容,整理综合. 一  概述 反向代理(Reverse Proxy)方式 ...

  10. iview报错[Vue warn]: Error in render: "TypeError: ctx.injections.tableRoot.$scopedSlots[ctx.props.column.slot] is not a function"

    原因是我使用了iview的<Table>组件,我给Table组件的columns中定义了4个含有slot的列,但是实际在<Table>中只使用了其中3个,导致的报错. 也就是说 ...