在前端的设计中我们常常会用到伪类，伪类到底是什么呢？css伪类是用来添加一些选择器的特殊效果。如图：

其中，最常用的是：hover把鼠标放在类的上面所表现的状态，下面我给大家看一下。
代码：

<div class="wy"><h2>水平方向移动40px,垂直方向移动30px</h2></div>

.wy{width: 300px;height: 200px;background: #0051CF;
}
.wy:hover{width: 300px;height: 200px;background:#E1246A;transform: translate(40px,30px);
}

效果图：

把鼠标放上去后

效果就是这样了。