效果预览。在实现转场效果之前，需要了解一下css的clip-path属性。该属性是实现过渡的核心属性。clip-path属性可以通过剪切创建元素的可显示区域。区域内的部分显示，区域外的部分隐藏。也就是说，裁剪后的尺寸不会超过实际尺寸，超出部分会被隐藏，显示实际尺寸。clip-path的属性如下：|属性|说明||---|---||插图（）|四个参数，top,right,bottom,left，定义了一个嵌入矩形。||圈子（）|定义一个圆，语法：circle(x-axis(size)atx-axiscoordinatey-axiscoordinate);at之后是切割位置，第一个参数是left和right，第二个参数是up和down||椭圆（）;|定义一个椭圆（使用两个半径和一个中心位置）。语法：ellipse(x-offsety-offsetatx-coordinatey-coordinate)||多边形（）；|定义多边形（使用SVG填充规则和一组顶点）。四个参数，up,right,down,left，每个位置的第一个参数代表左右偏移量，第二个参数代表上下偏移量||小路（）;|定义任意形状（使用可选的SVG填充规则和SVG路径定义）。|详见文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path这里以circle()属性作为演示。Circle可以定义一个圆（使用半径和A圆心位置），第一个参数是半径，也就是大小，第二个参数是圆心位置，也就是x轴和y轴的坐标。了解了这些之后，就可以开始写转场动画了。首先定义原始显示元素vue.svg。当鼠标移入vue.svg元素时，会显示过渡动画vite.svg，过渡动画（vite.svg）覆盖原动画（vue.svg）。
