这是我的小提琴:https://jsfiddle.net/5r19aban/1/
基本上,我希望正方形具有'shimmer‘CSS效果,但当我将标签设置为span而不是div时,动画会变慢。我真的希望正方形与它旁边的文字排在一起。
有人能帮我解决这个问题吗?我不能使用div,因为我不想在之后换行!
谢谢!
.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;
}
<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>
发布于 2016-12-08 03:44:36
您可以使用div
,只需将.shimmer
的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;
}
<div class="shimmer">∎</div>ILS
<br>
<div class="shimmer">∎</div>PAC
<br>
<div class="shimmer">∎</div>SIP2
<br>
<div class="shimmer">∎</div>Cloud Library
<br>
<br>
发布于 2016-12-08 05:17:45
div和span之间的区别在于div的默认显示样式设置为block。Span display设置为inline。当你使用div时,它占用了所有的行长度,你的渐变从左到右以1秒为单位。绿色的方块好像在闪烁。使用span时,span元素的宽度与其绿色正方形一样宽。所以梯度在1s内可能是20px。你可以看得很清楚。
我对关键帧的修复:
0% {
background-position: 0 top;
}
100% {
background-position: 200px top;
}
只是告诉梯度在1秒内从左边开始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>
https://stackoverflow.com/questions/41025730
复制相似问题