前端日常实践：76#视频演示如何使用纯CSS制作一套单体办公用品（内含2个视频）

居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；justify-content:center;}定义容器尺寸：.desk{width:70em;高度：70em；字体大小：5px；position:relative;}定义每个元素的公共属性：.desk{--b:1emsoliddarkslategray;}.desk*{position:absolute;边框：var(--b);box-sizing:border-box;}.??desk*::before,.desk*::after{content:'';位置：绝对；box-sizing:border-box;}绘制纸的轮廓：.paper{width:24em;高度：30em；颜色：天蓝色；背景颜色：currentColor；边界半径：0003em；顶部：14em；left:4em;}在纸的左侧绘制卷曲部分：.paper::before{width:4em;高度：32em；背景颜色：currentColor；边框呃：var(--b);滤镜：饱和度（150%）亮度（0.9）；底部：1.6em；左：-1em；border-radius:3em03em0;}.paper::after{width:4em;高度：5em；背景颜色：currentColor；边框：var(--b);底部：-1em；左：-1em；边界半径：2.5em002.5em；border-right:none;}drawRuleroutline:.ruler{width:6em;高度：24em；背景：线性渐变（向右，peru30%，sandybrown30%）；顶部：8em；左：14em；transform:rotate(25deg);}在尺子上绘制长刻度线：.ruler::before{width:2em;高度：计算（100%-3em）；背景图像：线性渐变（darkslategray1em，透明0）；背景大小：4em4em；top:1em;}在标尺上绘制短刻度线：.ruler::after{width:1em;高度：计算（100%-3em）；背景图像：线性渐变（darkslategray1em，透明0）；背景-大小：4em4em；top:3em;}绘制日历的轮廓：.calendar{width:28em;高度：28em；背景：线性-渐变（珊瑚色30%，白色30%）；边界半径：2em；顶部：14em；右：4em；transform:rotate(15deg);}在日历的顶部绘制轴：.calendar::before{width:3em;高度：4em；颜色：沙褐色；背景颜色：currentColor；顶部：-2em；左：4em；边界半径：100%100%50%50%；box-shadow:00,0001emdarkslategray,15em0,15em001emdarkslategray;}在日历上绘制日期：.calendar::after{width:3em;高度：3em；颜色：银色；背景色：银色；顶部：10em；左：4em；边界半径：0.4em；box-shadow:00,5em0,10em0,15em0,05em,5em5em,10em5em,15em5em,010em,5em10em,10em10em,15em10em;}画笔记笔记本{width:26em;高度：34em；背景：线性渐变（向右，番茄12%，珊瑚12%，珊瑚60%，暗石灰60%，暗石灰64%，沙棕64%，沙棕78%，暗石灰78%，暗石板灰色82%，珊瑚82%）；边界半径：3em；底部：8em；left:20em;}绘制笔记本底部：.notebook::before{width:inherit;高度：5em；背景颜色：白色；边框：var(--b);底部：-1em；左：-1em；border-radius:3em03em3em;}绘制记事本书签:.notebook::after{width:4em;高度：5em；背景色：珊瑚色；边框：var(--b);底部：-3em；左：4em；边框顶部：无；border-radius:001em1em;}绘制铅笔的轮廓：.pencil{width:6em;高度：12em；背景：线性渐变（珊瑚色20%，暗石灰20%，暗石灰25%，沙褐色25%）；边界半径：0.8em；底部：14em；右：13em；transform:rotate(-35deg);}绘制铅笔尖：.pencil::before{border:3emsolidtransparent;border-top-color:darkslategray;底部：-6.5em；left:-1em;}.pencil::after{border:2emsolidtransparent;边框顶部颜色：沙褐色；底部：-4.5em；左边：0;}增加鼠标悬停效果，将项目推到桌面边缘：.desk*{transition:1s;}.desk:hover.paper{top:0;left:0;}.desk:hover.ruler{top:0;左：50%；变换：旋转（0）；}.desk：hover.calendar{top：0；右：0；变换：旋转（0度）；}.desk：hover.notebook{bottom：0;left:0;}.desk:hover.pencil{bottom:0;右：0；transform:rotate(180deg);}在dom中添加文本“Hey,Takeiteasy”：

嘿！
放轻松！