【笔记】css实现鼠标移入 菜单图标变叉叉

实现效果：

原：

移入：

-----------------代码如下-----------------

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);}