css点击盒子后右移

在网页中实现点击盒子后向右移动功能，可以通过CSS来实现。

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: transform 0.5s ease;
}
.box:hover {
  transform: translateX(50px);
}
 

上述代码中，我们首先定义了一个class名为“box”的盒子，宽高分别为100px，背景颜色为蓝色，同时设置了一个过渡效果“transform 0.5s ease”。然后，在:hover伪类中，我们通过“transform: translateX(50px)”实现了当鼠标悬停在盒子上时，盒子向右移动50px的效果。

这种方法使用CSS3的transform属性来实现盒子的移动，通过:hover伪类实现鼠标悬停的事件触发，从而可以很方便的实现网页中的动态效果。