中心显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background:linear-gradient(skyblue,lightblue);}设置伪元素常用属性：.umbrella*::before,.umbrella*::after{content:'';position:absolute;}首先画出雨伞打开的样子。设置容器的大小，后面会用到font-size的属性值，所以定义了一个变量：:root{--font-size:10px;}.umbrella{position:relative;宽度：25em；高度：26em；font-size:var(--font-size);}定义树冠的大小：.umbrella.canopy{position:absolute;宽度：继承；高度：5.5em；top:2.5em;}用::before伪元素绘制树冠的上半部分，先画一个半圆，然后垂直压缩它：.umbrella.canopy::before{width:inherit;高度：12.5em；背景：rgb(100,100,100);边界半径：12.5em12.5em00；变换：scaleY(0.4)；top:-4em;}使用::after伪元素绘制树冠的下半部分：.umbrella.canopy::after{width:inherit;高度：1.5em；背景色：#333；顶部：4em；border-radius:50%;}绘制伞柄的长杆：.umbrella.shaft{position:absolute;宽度：0.8em；高度：18em；背景色：rgba(100,100,100,0.7);顶部：5.5em；left:calc((100%-0.8em)/2);}使用伪元素绘制伞杆顶部露出伞套的Pointy，方法与绘制伞套上半部分类似，先画一个半圆，然后在水平方向压缩：.umbrella.shaft::before{width:6em;高度：3em；背景颜色：rgba(100,100,100,0.7);左：计算（（100%-6em）/2）；顶部：-5.5em；边界半径：6em6em00；transform:scaleX(0.1);}绘制Umbrellahookhandle:.umbrella.shaft::after{box-sizing:border-box;宽度：4em；高度：2.5em；边框：1em实心#333；顶部：100%；左：计算（50%-4em+1em/2）；边界半径：002.5em2.5em；border-top:none;}至此打开了伞，接下来通过变形绘制伞。首先通过水平压缩和垂直拉伸来放置伞盖canopy：.umbrella.canopy{transform-origin:top;transform:scale(0.08,4);}隐藏canopy的下半部分：.umbrella.canopy::after{transform:scaleY(0);}让伞倾斜，因为垂直伞有点僵硬，所以添加一点改动：.umbrella{transform:rotate(-30deg);}至此，伞收起时的外观也完成了，是时候把它变成一个toggle控件了。给dom添加一个checkbox控件：把控件设置成和一个一样大伞并并列在伞层之上：.toggle{position:absolute;过滤器：不透明度（0）；宽度：25em；高度：26em；字体大小：var（--字体大小）；游标：指针；z-index:2;}checkbox控件的未选中状态对应的是收伞时的外观，即伞当前的外观，所以只需要指定选中状态对应的伞的外观即可打开时的控件。因为收伞是通过变形几个元素得到的，所以切换到伞的打开状态就是取消变形。让伞先出来：.toggle:checked~.umbrella{transform:rotate(0deg);}然后打开伞盖：.toggle:checked~.umbrella.canopy{transform:scale(1,1);}and然后显示伞盖下部：.toggle:checked~.umbrella.canopy::after{transform:scaleY(1);}最后设置上面元素的缓动效果：.umbrella,.umbrella.canopy,.umbrella.canopy::after{transition:0.3scubic-bezier(0.5,-0.25,0.5,1.25);}大功告成！