制作裁剪动画对于裁剪动画，使用clip-path而不是width/height来避免DOM重排导致的性能低下。.animate{宽度：200px;高度：200px；背景：#000；animation:1sclip;}@keyframesclip{0%{clip-path:inset(0000);}100%{剪辑路径：插图（0100%100%0）；}}clip-path也可以用来切割其他规则/不规则的图形。clip{clip-path:polygon(0100%,50%0,100%100%,030%,100%30%);/*多边形*/clip-path:circle(30pxat35px35px);/*circle*/clip-path:ellipse(30px25pxat35px35px);/*ellipse*/}优化动画性能除了使用transform3d开启gpu加速外，还可以使用will-change强制gpu加速来优化动画性能。animate{width:200px;高度：200px；背景：#000；动画：1s剪辑；will-change:clip-path;}@keyframesclip{0%{clip-path:inset(0000);}100%{剪辑路径：插图（0100%100%0）；}}使用padding模拟实现纵横比，然后子元素使用绝对定位/*1:1*/.container{width:200px;}.container:after{display:block;内容：'';padding-top:100%;}/*16:9*/.container{width:200px;}.container:after{display:block;内容：'';padding-top:calc(100%*9/16);}垂直居中我们通??常的方式：display:inline-blocktop:50%+transform:tranlsateY(-50%)display:flex其他还有paddingup和down,display:table,position+margin:auto,absolutepositioning+margin等，这些不是常用和特殊场景只能用，css3之前的hack方法，css3之后，就没必要用这些来实现垂直居中了，就不多说了。其中display:flex是万能的，大部分场景都可以直接使用，但还是有一些特殊场景不能用：元素需要文本截断。为了兼容4.XAnd??roid浏览器，必须使用其他方法（通常是transform）。子元素需要多行布局。4.XAnd??roid不支持flex-wrap，不能多行布局
