从左到右显示图像

Question

我正在尝试在css中创建一个动画，jquery可能会有所帮助，但它并没有给我想要的结果。

这是图片：

我在谈论黑手机动画。

动画任何一段html都很简单，我可以很好地处理它，但是这种图像显示很复杂，这就是我需要帮助的地方。

Answer 1

＆＃13;

＆＃13;

var i = 0;
var interval = setInterval(function() {
  $('.mask').css({left:-i+"%"});
  i++;
  if (i === 0) {
    clearInterval(interval);
  }
},10);

＆＃13;

.wrapper {
  width: 640px;
  height: 430px;
  position: relative;
}

.mask {
  position: absolute;
  top: 0;
  left: 0;
  background:white;
  width: 100%;
  height: 100%;
  z-index:1;
}

.img {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index:0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="mask">
  </div>
  <div class="img">
    <img src="https://beebom-redkapmedia.netdna-ssl.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg" />
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我相信这就是你想要的：

declare @T table (id int primary key, type varchar(10), startTime time not null, endTime time);
insert into @t values
       (1, 'Type1', '18:31', '18:34')
     , (2, 'Type2', '18:35', '18:50')
     , (3, 'Type2', '18:35', null)
     , (4, 'Type3', '3:35',  null);
declare @max int = 600;
declare @now time = getdate();
select @max as maxTime, @now as now; 

select tt.*
     , case when tt.diff < @max then 'yes' else 'no' end as madeIt
from ( select t.*
            , DATEDIFF(second, startTime, isnull(endTime, @now)) as diff
         from @T t
     ) tt

var i = 0;
var interval = setInterval(function() {
  $('.mask').width(i+"%");
  i++;
  if (i === 101) {
    clearInterval(interval);
  }
},10);

.mask {
  background:white;
  max-width: 640px;
  z-index:1;
  height: 426px;
  position: relative;
  overflow: hidden;
}

.img {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}