实现效果:
原:
移入:
-----------------代码如下-----------------
html部分:
<div class="rotateChange"><div></div><div></div><div></div></div>
css部分:
.rotateChange{border: 1px solid #42b983;width: 50px;height: 50px;padding: 10px;position: relative;}.rotateChange>div{width: 50px;height: 5px;background-color: #42b983;position: absolute;transition: all .2s linear;}.rotateChange>div:nth-of-type(1){top:17px}.rotateChange>div:nth-of-type(2){top:33px}.rotateChange>div:nth-of-type(3){top:50px}.rotateChange:hover{border: 1px solid #eb596c;}.rotateChange:hover div:nth-of-type(1){top:33px;background-color: #eb596c;transform: rotate(45deg);}.rotateChange:hover div:nth-of-type(2){background-color: #eb596c;transform: scaleX(0);}.rotateChange:hover div:nth-of-type(3){top:33px;background-color: #eb596c;transform: rotate(-45deg);}