Question

我试图创建打印机扫描的纸张的前/后效果（在页面上垂直移动的明亮光线）。

我得到了正确的过渡动画，鼠标移动和鼠标移动，我让光线在页面上移动，但我无法让它们同步。

＆＃13;

div.beforeandafter{ /* main container */
    background: white;
    border: 1px solid gray;
    display: block;
    width: 600px; /* width of largest image width */
    height: 400px; /* height of largest image height */
    overflow: hidden;
    position: relative; /* important */
}
div.before, div.after{ /* before and after DIVs within main container */
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    overflow: hidden;
    transition: all 1s ease-in-out; /* CSS transition. */
    z-index: 100;
}
 
div.after{
    z-index: 1; /* z-index of after div should be smaller than before's */
}
 
div.beforeandafter:hover div.before{ /* onmouseover main container */
    width: 0; /* change "before" div width to 0 to hide it */
}

.scan_light {
  will-change: transform;
  animation: xAxis 5.5s infinite cubic-bezier(0.02, 0.01, 0.21, 1);
  position: absolute;
  bottom: 0px;
  left: 0px;
}

.scan_light:after {
  content: '';
  display: block;
  will-change: transform;
  width: 20px;
  height: 400px;
  background: radial-gradient(
      rgba(100,145,42,.1) -200%, rgba(163,240,63,.4) 35%, rgba(100,145,42,.3) 60%, rgba(189,91,87,0) 90%);
  border-radius: 20px;
}


@keyframes xAxis {
  50% {
    animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
    transform: translateX(600px);
  }
}

＆＃13;

<div class="beforeandafter">
    <div class="before">
      <div class="scan_light"></div>
    <img src="http://i.imgur.com/AcguNYH.png" />
    </div>
 
    <div class="after">
    <img src="http://i.imgur.com/nJS8vhv.png" />
    </div>
 
</div>

＆＃13;

谢谢，以下是笔以防万一： http://codepen.io/anon/pen/JRvXVE

如何在css中为图像转换创建移动轨迹？

0 个答案: