文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >我在使用'shimmer‘CSS动画时遇到了问题

问我在使用'shimmer‘CSS动画时遇到了问题
EN

Stack Overflow用户
提问于 2016-12-08 03:26:49
回答 2查看 812关注 0票数 0

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

基本上，我希望正方形具有'shimmer‘CSS效果，但当我将标签设置为span而不是div时，动画会变慢。我真的希望正方形与它旁边的文字排在一起。

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

谢谢!

​

代码语言：javascript
运行
复制
.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;
}
代码语言：javascript
运行
复制
<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>

​

html
css
animation
EN

回答 2

Stack Overflow用户

发布于 2016-12-08 03:44:36

您可以使用div，只需将.shimmer的display属性设置为inline-block即可。您还可以更改*-animation-duration以使动画更快或更慢：

​

代码语言：javascript
运行
复制
.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;
}
代码语言：javascript
运行
复制
<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>

​

票数 0
EN

Stack Overflow用户

发布于 2016-12-08 05:17:45

div和span之间的区别在于div的默认显示样式设置为block。Span display设置为inline。当你使用div时，它占用了所有的行长度，你的渐变从左到右以1秒为单位。绿色的方块好像在闪烁。使用span时，span元素的宽度与其绿色正方形一样宽。所以梯度在1s内可能是20px。你可以看得很清楚。

我对关键帧的修复：

代码语言：javascript
运行
复制
  0% {
    background-position: 0 top;
  }
  100% {
    background-position: 200px top;
  }

只是告诉梯度在1秒内从左边开始200px。

​

代码语言：javascript
运行
复制
.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;
}
代码语言：javascript
运行
复制
<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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/41025730

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档