代码之家  ›  专栏  ›  技术社区  ›  GROVER. sms

让元素在不同时间闪耀

animation css html
  •  3
  • GROVER. sms  · 技术社区  · 6 年前

    我创建了一个 CSS 为具有指定类的所有元素设置“发光”效果动画的动画。

    光泽本身工作得很完美,但是,由于它们都同时闪亮,因此看起来相当不错 不自然的 。

    我一直在集思广益,用不同的方法来改变每种元素的发光时间,但我似乎无法集中精力,而且我尝试过的任何事情都不是有效的,就是完全不起作用。 

        .loading-element{
        position: relative;
        background: #e0e0e0;
    }
    .loading-element::after{ /* this is the animated pseudo-element */
    	content: "";
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to right, rgba(255,255,255,0) 0%,
        			rgba(255,255,255,0.8) 50%,
        			rgba(247,247,247,0) 99%,
        			rgba(247,247,247,0) 100%);
        transform: translateX(100%);
        animation: shine 1s infinite 3s;
    }
    .index-load_track-item{
        width: 426px;
        height: 117px;
        margin: 30px 0;
    }
    .index-load-track_outer-artwork, .index-load-track_outer-waveform{
    	float: left;
    }
    .index-load-track_outer-artwork{
        width: 117px;
        height: 117px;
        margin-right: 9px;
    }
    .index-load-track_outer-artwork .loading-element{
    	width: 100%;
    	height: 100%;
    }
    .index-load-track_outer-waveform{
        width: 300px;
        height: 60px;
    }
    .index-load-track_outer-waveform .loading-element{
    	width: 100%;
    	height: 100%;
    }
    
    /* animation */
    @keyframes shine{
    	0%{ transform:translateX(-100%); }
    	100%{ transform:translateX(100%); }
    }
        <div class="index-load_track-item">
      <div class="index-load-track_outer-artwork">
    		<div class="loading-element"></div>
    	</div>
    	<div class="index-load-track_outer-waveform">
    		<div class="loading-element"></div>
    	</div>
    </div>
    <div class="index-load_track-item">
      <div class="index-load-track_outer-artwork">
    		<div class="loading-element"></div>
    	</div>
    	<div class="index-load-track_outer-waveform">
    		<div class="loading-element"></div>
    	</div>
    </div>
    1 回复  |  直到 6 年前
        1
  •  2
  •   Takit Isy Surendra    6 年前

    如果您可以使用一些jQuery,我建议您这样做:
    (我添加了一些带有注释的CSS代码,以避免不必要的行为) 

    // On load, add random delays and durations to each of the ".loading-element"s
$('.loading-element').each(function(e) {
  $(this).css({
    "animation-delay": (-10 * Math.random()) + "s",
    "animation-duration": (1 + 2 * Math.random()) + "s"
  });
});
    .loading-element {
  position: relative;
  background: #e0e0e0;
  /* Added below to avoid the shine being outside
  and the scroll bars to appear as in your snippet */
  overflow: hidden;
}

.loading-element::after {
  /* this is the animated pseudo-element */
  content: "";
  position: absolute;
  top: 0;
  filter: blur(5px); /* Added, just to try with it */
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(247, 247, 247, 0) 99%, rgba(247, 247, 247, 0) 100%);
  transform: translateX(100%);
  /* animation: shine 1s infinite 3s; 
  now decomposed as below: */
  animation-name: shine;
  animation-duration: inherit;
  animation-iteration-count: infinite;
  animation-delay: inherit;
}

.index-load_track-item {
  width: 426px;
  height: 117px;
  margin: 30px 0;
}

.index-load-track_outer-artwork,
.index-load-track_outer-waveform {
  float: left;
}

.index-load-track_outer-artwork {
  width: 117px;
  height: 117px;
  margin-right: 9px;
}

.index-load-track_outer-artwork .loading-element {
  width: 100%;
  height: 100%;
}

.index-load-track_outer-waveform {
  width: 300px;
  height: 60px;
}

.index-load-track_outer-waveform .loading-element {
  width: 100%;
  height: 100%;
}


/* animation */

@keyframes shine {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="index-load_track-item">
  <div class="index-load-track_outer-artwork">
    <div class="loading-element"></div>
  </div>
  <div class="index-load-track_outer-waveform">
    <div class="loading-element"></div>
  </div>
</div>
<div class="index-load_track-item">
  <div class="index-load-track_outer-artwork">
    <div class="loading-element"></div>
  </div>
  <div class="index-load-track_outer-waveform">
    <div class="loading-element"></div>
  </div>
</div>

    –‹ –‹ –‹

    这也可以使用CSS变量来完成!
    如果你能使用它,依我拙见,这是一种更好、更简单的方法。 

    // On load, add random delays and durations to each of the ".loading-element"s
$('.loading-element').each(function(e) {
  $(this).css({
    "--shine-delay": (-10 * Math.random()) + "s",
    "--shine-duration": (1 + 2 * Math.random()) + "s"
  });
});
    .loading-element {
  position: relative;
  background: #e0e0e0;
  /* Added below to avoid the shine being outside
  and the scroll bars to appear as in your snippet */
  overflow: hidden;
}

.loading-element::after {
  /* this is the animated pseudo-element */
  content: "";
  position: absolute;
  /* top and bottom modified so that blur doesn't add empty bars */
  top: -10px;
  bottom: -10px;
  filter: blur(8px); /* Added, just to try with it */
  width: 100%;
  background: linear-gradient(to right,
    rgba(255, 255, 255, 0.0) 0%,
    rgba(255, 255, 255, 0.0) 10%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0.0) 90%,
    rgba(255, 255, 255, 0.0) 100%
  );
  transform: translateX(100%);
  animation: shine var(--shine-duration) infinite var(--shine-delay); /* <3 */
}

.index-load_track-item {
  width: 426px;
  height: 117px;
  margin: 30px 0;
}

.index-load-track_outer-artwork,
.index-load-track_outer-waveform {
  float: left;
}

.index-load-track_outer-artwork {
  width: 117px;
  height: 117px;
  margin-right: 9px;
}

.index-load-track_outer-artwork .loading-element {
  width: 100%;
  height: 100%;
}

.index-load-track_outer-waveform {
  width: 300px;
  height: 60px;
}

.index-load-track_outer-waveform .loading-element {
  width: 100%;
  height: 100%;
}


/* animation */

@keyframes shine {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="index-load_track-item">
  <div class="index-load-track_outer-artwork">
    <div class="loading-element"></div>
  </div>
  <div class="index-load-track_outer-waveform">
    <div class="loading-element"></div>
  </div>
</div>
<div class="index-load_track-item">
  <div class="index-load-track_outer-artwork">
    <div class="loading-element"></div>
  </div>
  <div class="index-load-track_outer-waveform">
    <div class="loading-element"></div>
  </div>
</div>

    我希望这有帮助。

    推荐文章
    Ahmed Zaidan  ·  快速ui转换无法按预期工作
    1 年前
    Carly  ·  在页面加载时滑入div,然后单击以滑入和滑出(jQuery)
    1 年前
    Armand  ·  为什么我的图像与另一个图像相交时不会被删除
    1 年前
    Frakcool  ·  满足条件时,SwiftUI动画背景颜色更改
    2 年前
    Ancross  ·  为什么我的小CSS动画不会触发?
    2 年前
    C.Bernabei  ·  灯丝动画混合
    2 年前
    Tom  ·  移动球体动画
    2 年前
    Tom  ·  设置两个圆的动画
    2 年前
    Neo78  ·  CSS动画将返回其原始位置,但不应该
    2 年前
    Wikson  ·  我想在滚动时启动JS函数
    2 年前
    关于  
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号