我遇到了“微光”的问题。 CSS动画

时间：2016-12-07 19:26:49

标签： html css animation

这是我的小提琴：https://jsfiddle.net/5r19aban/1/

基本上，我希望这个广场能够拥有“微光”。 CSS效果，但是当我使标签跨度而不是div时，动画会变慢。我真的希望广场与它旁边的文字一致。

有人可以帮我解决这个问题吗？我不能使用div，因为我之后不想换行！

谢谢！

＆＃13;
＆＃13; 
.shimmer{
    /* styling stuff */
    font-size:36px;
    color: rgba(255,255,255,0.1);
}
.shimmer {
  /* the shimmer magic */
  background: -webkit-gradient(linear,left top,right top,from(#008000),to(#008000),color-stop(.5,#fff));
  background: -moz-gradient(linear,left top,right top,from(#008000),to(#008000),color-stop(.5,#fff));
  background: gradient(linear,left top,right top,from(#008000),to(#008000),color-stop(.5,#fff));
  -webkit-background-size: 25px 100%;
  -moz-background-size: 25px 100%;
  background-size: 25px 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  -webkit-animation-name: shimmer;
  -moz-animation-name: shimmer;
  -webkit-animation-name: shimmer;
  animation-name: shimmer;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-color: #006400;
}

@-moz-keyframes shimmer {
  0% {
    background-position: top left;
  }

  100% {
    background-position: top right;
  }
}

@-webkit-keyframes shimmer {
  0% {
    background-position: top left;
  }

  100% {
    background-position: top right;
  }
}

@-o-keyframes shimmer {
  0% {
    background-position: top left;
  }

  100% {
    background-position: top right;
  }
}

@-ms-keyframes shimmer {
  0% {
    background-position: top left;
  }

  100% {
    background-position: top right;
  }
}

@keyframes shimmer {
  0% {
    background-position: top left;
  }

  100% {
    background-position: top right;
  }
}
mark.green {
color:#006400;
font-size:36px;
background: none;
}

mark.yellow {
color:#e6e600;
font-size:36px;
background: none;
}

mark.red {
color:#ff0000;
font-size:36px;
background: none;
}
＆＃13; 
<span class="shimmer">∎</span> ILS <br>
<span class="shimmer">∎</span> PAC <br>
<span class="shimmer">∎</span>  SIP2 <br>
<span class="shimmer">∎</span>  Cloud Library <br><br>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

您可以使用div，只需将.shimmer的{​​{1}}媒体资源设为display即可。您还可以更改inline-block以使动画更快或更慢：

*-animation-duration
.shimmer {
  /* styling stuff */
  font-size: 36px;
  color: rgba(255, 255, 255, 0.1);
  display: inline-block;
}
.shimmer {
  /* the shimmer magic */
  background: -webkit-gradient(linear, left top, right top, from(#008000), to(#008000), color-stop(.5, #fff));
  background: -moz-gradient(linear, left top, right top, from(#008000), to(#008000), color-stop(.5, #fff));
  background: gradient(linear, left top, right top, from(#008000), to(#008000), color-stop(.5, #fff));
  -webkit-background-size: 25px 100%;
  -moz-background-size: 25px 100%;
  background-size: 25px 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  -webkit-animation-name: shimmer;
  -moz-animation-name: shimmer;
  -webkit-animation-name: shimmer;
  animation-name: shimmer;
  -webkit-animation-duration: .5s;
  -moz-animation-duration: .5s;
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-color: #006400;
}
@-moz-keyframes shimmer {
  0% {
    background-position: top left;
  }
  100% {
    background-position: top right;
  }
}
@-webkit-keyframes shimmer {
  0% {
    background-position: top left;
  }
  100% {
    background-position: top right;
  }
}
@-o-keyframes shimmer {
  0% {
    background-position: top left;
  }
  100% {
    background-position: top right;
  }
}
@-ms-keyframes shimmer {
  0% {
    background-position: top left;
  }
  100% {
    background-position: top right;
  }
}
@keyframes shimmer {
  0% {
    background-position: top left;
  }
  100% {
    background-position: top right;
  }
}
mark.green {
  color: #006400;
  font-size: 36px;
  background: none;
}
mark.yellow {
  color: #e6e600;
  font-size: 36px;
  background: none;
}
mark.red {
  color: #ff0000;
  font-size: 36px;
  background: none;
}

答案 1 :(得分：0)

div和span之间的区别在于div将默认显示样式设置为block。跨度显示设置为内联。 当你使用div时，它占用了所有的行长度，你的渐变从左到右依次为1。绿色广场有点眨眼。 使用span时，span元素的宽度与绿色方块的宽度相同。所以渐变跟随这可能是20px in 1s。你可以非常清楚地看到它。

我对关键帧的修复：

  0% {
    background-position: 0 top;
  }
  100% {
    background-position: 200px top;
  }

告诉梯度从1s左起200px。

.shimmer{
    /* styling stuff */
    font-size:36px;
    color: rgba(255,255,255,0.1);
}
.shimmer {
  /* the shimmer magic */
  background: -webkit-gradient(linear,left top,right top,from(#008000),to(#008000),color-stop(.5,#fff));
  background: -moz-gradient(linear,left top,right top,from(#008000),to(#008000),color-stop(.5,#fff));
  background: gradient(linear,left top,right top,from(#008000),to(#008000),color-stop(.5,#fff));
  -webkit-background-size: 25px 100%;
  -moz-background-size: 25px 100%;
  background-size: 25px 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  -webkit-animation-name: shimmer;
  -moz-animation-name: shimmer;
  -webkit-animation-name: shimmer;
  animation-name: shimmer;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-color: #006400;
}

@keyframes shimmer {
  0% {
    background-position: 0 top;
  }

  100% {
    background-position: 200px top;
  }
}

mark.green {
color:#006400;
font-size:36px;
background: none;
}

mark.yellow {
color:#e6e600;
font-size:36px;
background: none;
}

mark.red {
color:#ff0000;
font-size:36px;
background: none;
}
<span class="shimmer">∎</span> ILS <br>
<span class="shimmer">∎</span> PAC <br>
<span class="shimmer">∎</span>  SIP2 <br>
<span class="shimmer">∎</span>  Cloud Library <br><br>

相关问题
最新问题