-5

箭头 随着颜色依次加深而显示的动画,不断循环的

4个回答

0

已采纳

demo
差不多就这效果把,文字填充背景,背景渐变。

p {
  font-size: 120px;
  line-height: 120px;
  display: block;
  width: 551px;
  overflow: hidden;
  text-align: center;
  color: #fff;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg,#4e4e4e,#03a9f4,#4e4e4e);
  -webkit-background-clip: text;   
  background-size: 200% 100%;
  animation: myrote 1s infinite alternate;
}
@keyframes myrote {
  from {
    background-position:50% 0 ;
  }

  to {
    background-position:100% 0 ;
  }
}
0

先来一个抛砖引玉。

我这个和之前做过的和一个轮播图感觉是类似的。这里先写思路,有时间再贴代码。

主要思路也是使用 animation 的循环。假设动画时间是 6 秒。单独给每个箭头都设置一个 6s 的 animation 动画效果。但,每一个箭头只允许在这 6s 的专属时间片里面有一个动画效果,比如这里的 6 个箭头,第一个箭头在 0-1 秒内有颜色高亮的动画,其余时间没有动画效果,第一个箭头在 1-2 秒内有颜色高亮的动画,其余时间没有动画效果,如此类推。。看来的效果就是:第一秒:第一个箭头颜色高亮;第二秒:第二个箭头颜色高亮,6s 一个循环,看起就是题主想要的结果。

但这样做的话感觉比较复杂化问题了。Dalao们有啥好的方法?

0

我觉得是不是可以放个GIF。。(捂脸跑

0

链接描述

用到了font-awesome,图形选择楼主可以根据自己的需求自行选择,主要用到了animation和animation-delay
注意兼容性问题,代码没有将兼容性代码写全

撰写答案