前端日常实践：122#视频演示如何使用纯CSS制作苹果系统相册图标
时间：2023-04-02 20:28:48
HTML
效果预览在当前页面点击右侧“点击预览”按钮进行预览，点击链接进行预览全屏显示。https://codepen.io/comehop??e/pen/zJKwbO互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cDBZNUW源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器包含8个元素，每个元素代表一个矩形色块：
居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background-color:#ccc;}定义容器大小:.icon{width:10em;高度：10em；字体大小：30px；背景颜色：#eee；border-radius:20%;}绘制矩形的轮廓（border是辅助线，最终会被删除），放在容器的顶部：.icon{position:relative;显示：弹性；证明内容：居中；框大小：边框框；padding:1em;}.iconspan{position:absolute;宽度：22.5%；身高：37.5%；边框：1px黑色虚线；边界半径：50%/30%；}为矩形设置下标变量--n:.iconspan:nth-child(1){--n:1;}.iconspan:nth-child(2){--n:2;}.??iconspan:nth-child(3){--n:3;}.iconspan:nth-child(4){--n:4;}.iconspan:nth-child(5){--n:5;}.iconspan:nth-child(6){--n:6;}.iconspan:nth-child(7){--n:7;}.iconspan:nth-child(8){--n:8;}将8个矩形旋转一个固定的角??度，形成一个圆：.iconspan{transform-origin:center105%;转换：旋转（计算（（var（--n）-1）*45deg））；}为矩形设置颜色变量--c:.iconspan:nth-child(1){--c:rgba(243,156,18,0.7);}.iconspan:nth-child(2){--c:rgba(241,196,15,0.7);}.iconspan:nth-child(3){--c:rgba(46,204,113,0.7);}.iconspan:nth-child(4){--c:rgba(27,188,155,0.7);}.iconspan:nth-child(5){--c:rgba(65,131,215,0.7);}.iconspan:nth-child(6){--c:rgba(102,51,153,0.7);}.iconspan:nth-child(7){--c:rgba(155,89,182,0.7);}.iconspan:nth-child(8){--c:rgba(242,38,19,0.7);}给8个矩形上色，删除辅助线borders:.icon秒pan{/*边框：1px黑色虚线；*/background-color:var(--c);}设置混色模式，重叠的颜色可以叠加：.iconspan{mix-blend-mode:multiply;}增加Mouseover效果，悬停时运行动画矩形色块的展开：.icon:hoverspan{animation:rotating2sease-in-outforwards;}@keyframesrotating{from{transform:rotate(0deg);}到{变换：旋转（计算（（var（--n）-1）*45deg））；}}注意第一个矩形在动画过程中是不旋转的，因为它是从0度到0度，为了让它旋转，通过修改它的下标变量，将它的结束角度设置为360度：.iconspan：nth-child(1){--n:9;}大功告成！
