使用css做一个简单的车轮滚滚效果

学了css之后发现很多效果只要几行代码就能实现，这个车轮滚滚的效果也不例外。
首先设置个大盒子，设置他的宽度（随意多少，但是肯定要比车轮的宽度大），高度与车轮保持一致即可。跟我一起来做个简单的车轮滚滚吧。

.box { width: 1400px; height: 301px; border: 2px solid #000; } 然后使用:hover给图片添加移动旋转效果 .box:hover img{ /* 移动图片 旋转图片 */ transform: translateX(1100px) rotate(1turn); } 最后设置一个过渡，让其显示效果 .box img{ transition: all 2s; } 完整代码如下：