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

/*
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;
}

 

<div class="right-show"></div>