右侧是长方形和半圆结合光标放上去在规定时间内完成动画

/*
border-top-right-radius: 40px;
border-bottom-right-radius: 40px;
高度的一半就可以让右边变成一个半圆
*/

.right-show {
width: 200px;
height: 80px;
border-top-right-radius: 40px;
border-bottom-right-radius: 40px;
background: pink;
transition: all 0.6s; /* 过渡写到本身上谁做过渡动画，写到谁身上*/
}

.right-show:hover {
width: 240px;
}