[分享]css3卷轴展开效果

CSS3卷轴展开效果是一种非常酷炫的网页设计效果，可以让网页内容以卷轴的形式逐步展现，让用户有一种翻书的感觉。下面我们来介绍一下实现这个效果的方法。/ 1. 首先定义好卷轴的样式 / .scroll ...

CSS3卷轴展开效果是一种非常酷炫的网页设计效果，可以让网页内容以卷轴的形式逐步展现，让用户有一种翻书的感觉。下面我们来介绍一下实现这个效果的方法。

/* 1. 首先定义好卷轴的样式 */
.scroll {
  width: ***px;
  height: 400px;
  overflow: hidden;
  position: relative;
  border: 1px solid #ccc;
}

.scroll:before {
  content: '';
  width: 400px;
  height: 100%;
  background: url('scroll.png') right no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.scroll:after {
  content: '';
  width: 400px;
  height: 100%;
  background: url('scroll.png') left no-repeat;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}

/* 2. 接着定义卷轴展开的动画效果 */
@keyframes rollIn {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}

/* 3. 最后给卷轴内部的内容添加对应的样式 */
.scroll-inner {
  position: relative;
  z-index: 2;
  padding: 40px;
  animation: rollIn 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

/* 4. 在HTML中使用以上代码 */
<div class="scroll">
  <div class="scroll-inner">
    <p>这里是卷轴内部的内容</p>
    <p>这里是卷轴内部的内容</p>
    <p>这里是卷轴内部的内容</p>
    <p>这里是卷轴内部的内容</p>
  </div>
</div> 

以上就是CSS3卷轴展开效果的实现方法，你可以根据自己的需求进行一些调整和修改，打造出属于自己的独特效果。