主要要点 transition: all 3s;//过渡时间 transform: rotate(360deg);旋转度数 transform-origin: center center;//旋转中心 ~~~ .box{ width: 150px; height: 150px; position: relative; overflow: hidden; margin: 300px; background: pink; } .cover{ height: 0; width: 0; background: rebeccapurple; opacity: 0.6; position: absolute; left:0; top: 0; transition: all 3s; transform: rotate(360deg); transform-origin: center center;//旋转中心 } .box:hover .cover{ width: 150px; height: 150px; transform: rotate(0); } ~~~ ~~~ <div class="box"> <div class="cover"></div> </div> ~~~