前端日常实践：68#视频演示纯CSS制作色卡
时间：2023-04-05 22:09:24
HTML5
效果预览点击右侧“点击预览”按钮可在当前页面预览，点击链接可全屏预览。https://codepen.io/comehop??e/pen/LraOXQ互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cQv6NhD源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器包含8个元素：
居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background-color:lightgray;}重新定义框模型：.cards,.cards>*{box-sizing:border-box;}定义容器大小：.cards{width:20em;高度：20em；}抽牌：.cardsspan{position:absolute;宽度：10em；高度：3em；背景色：浅绿色；顶部：计算（50%-3em/2）；border:0.2emsoliddimgray;border-radius:0.3em0.8em0.8em0.3em;}用伪元素绘制卡片的标签：.cardsspan::before{content:'';位置：绝对；宽度：35%；高度：100%；背景色：白色；右：0；边界半径：00.6em0.6em0；border-left:0.2emsolidsilver;}用伪元素绘制色卡标签上的文字：.cardsspan::after{content:'';位置：绝对；宽度：0.4em；高度：2em；背景色：银色；左：6.5em；顶部：0.1em；box-shadow:0.7em00-0.1emsilver;}为色卡设置变量：.cardsspan:nth-child(1){--n:1;}.cardsspan:nth-child(2){--n:2;}.??cardsspan:nth-child(3){--n:3;}.cardsspan:nth-child(4){--n:4;}.cardsspan:nth-child(5){--n:5;}.cardsspan:nth-child(6){--n:6;}.cardsspan:nth-child(7){--n:7;}.cardsspan:nth-child(8){--n:8;}使用HSL颜色模式给色卡上色：.cardsspan{background-color:hsl(calc(360/8*var(--n)),80%,70%);}定义动画效果：.cardsspan{transform-origin:right;动画：旋转3s线性无限;}@keyframes旋转{0%,35%{transform:rotate(0deg);}90%,100%{变换:旋转(360deg);}}最后，设置动画延迟以一张一张地旋转卡片：.cardsspan{animation-delay:calc((var(--n)-8)*0.15s);}就大功告成了！
