[分享]css3实现图片卷轴展开

CSS3可以实现很多有趣的动画效果，其中之一就是图片卷轴展开。这种效果可以将一张大图片按照卷轴的形式展开，并且可以通过用户的操作来控制展开的速度和方向。.roll { : relative; over...

CSS3可以实现很多有趣的动画效果，其中之一就是图片卷轴展开。这种效果可以将一张大图片按照卷轴的形式展开，并且可以通过用户的操作来控制展开的速度和方向。

.roll {
  position: relative;
  overflow: hidden;
  width: 400px;
  height: 200px;
}

.roll .inner {
  position: absolute;
  left: 0;
  top: 0;
  width: 200%;
  height: 100%;
  animation: roll 10s linear infinite; /* 控制卷轴展开的速度 */
}

.roll .inner img {
  width: 50%;
  height: 100%;
  float: left;
}

@keyframes roll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
} 

上面的代码实现了一个简单的图片卷轴展开效果。首先，我们创建一个容器，设置它的宽度和高度，并且将overflow属性设置为hidden，这样图片就只会在容器内展示。

接下来，在容器内创建一个inner元素，它的宽度是容器宽度的两倍，这样图片就可以按照卷轴的形式展开。我们设置它的动画时间为10秒，并且设置动画函数为linear和无限循环。

我们还需要为inner元素内的图片设置样式，让它们占据inner元素的一半宽度，并且浮动在左侧。

最后，我们通过@keyframes规则来控制图片卷轴展开的动画效果。它从translateX(0)开始，一直展开到translateX(-50%)为止。

通过这种方式，我们就可以轻松地实现一个简单的图片卷轴展开效果，而且可以通过调整动画的时间和方式来获得不同的效果。