使用ClipPath实现局部显示效果，鼠标悬停时动态展示曲线过渡

.card{

          clip-path: circle(5% at 10% 10%);

          transition: all ease-in-out .3s;

          background-color: red;

          width: 300px;

          height: 300px;

        }

            .card:hover{

                clip-path: circle(75%);

                border-radius: 20px;

                background: red;

            }