前端日常实践：132#视频演示如何用纯CSS打造思维之手
时间：2023-04-02 12:22:42
HTML
效果预览点击右侧“点击预览”按钮在当前页面预览，点击链接全屏预览.https://codepen.io/comehop??e/pen/WgdVyx/Interactivevideo这个视频是交互式的，你可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/c23zLuN源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器中的5个.finger元素代表5根手指，.thumb元素代表拇指，.palm元素代表手掌：
中心显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background:radial-gradient(white,lightcyan);}定义容器的大小，其中outline属性为辅助线：.hand{width:16em;高度：8em；字体大小：10px；outline:1pxdashedblack;}画手掌：.hand{position:relative;颜色：深色鲑鱼；}.palm{位置：绝对；宽度：8em；高度：6em；背景颜色：currentColor；边界半径：1em4em；ht:0;}绘制拇指的轮廓：.thumb{position:absolute;宽度：9.6em；高度：3.2em；背景颜色：currentColor；边界半径：3em2em2em1em；右：0；底部：1em；变换原点：计算（100%-2em）2em；变换：旋转（-20deg）；border-bottom:0.2emsolidrgba(0,0,0,0.1);border-left:0.2emsolidrgba(0,0,0,0.1);}在拇指上画钉子：.thumb::before{content:'';位置：绝对；宽度：1.9em；高度：1.9em；背景色：rgba(255,255,255,0.3)；边界半径：60%10%10%30%；底部：-0.3em；左：0.5em；border-right:0.1emsolidrgba(0,0,0,0.1);}将食指的后半部分画到手掌附近：.finger:not(:first-child){position:absolute;宽度：6.4em；高度：3.5em；背景颜色：currentColor；右：5.2em；底部：4em；变换原点：100%2em；transform:rotate(10deg);}绘制食指的前半部分：.finger:not(:first-child)::before{content:'';位置：绝对；宽度：9em；高度：3嗯；背景颜色：currentColor；右：4.2em；顶部：0.2em；边界半径：2em；变换原点：计算（100%-2em）2em；为其他4根手指设置下标变量，从食指到小指逐渐缩小颜色加深：.finger:not(:first-child){--scale:calc(1-(5-var(--n))*0.2);变换：旋转（10deg）比例（var（--scale））；过滤器：亮度（计算（100%-（5-var（--n））*10%））;}.finger:nth-child(2){--n:2;}.finger:nth-child(3){--n:3;}.finger:nth-child(4){--n:4;}.finger:nth-child(5){--n:5;}用伪元素绘制手的影子：.hand::before{content:'';位置：绝对；宽度：14em；高度：4.5em；背景色：黑色；边界半径：4em1em；顶部：4em；filter:blur(1em)opacity(0.3);}增加手指点击桌面的动画效果：.finger:not(:first-child){animation:tap-upper1.2sease-in-outinfinite;animation-delay:calc((var(--n)-2)*0.1s);}@keyframestap-upper{0%,50%,100%{transform:rotate(10deg)scale(var(--scale));}40%{变换：旋转（50度）比例（变量（--比例））；最后，别忘了删除辅助线，大功告成！
