Question

我想要一个这样的结果：

将border-color的{{1}}从#mydiv淡化为.color1，将.color2淡化为.color2，.color3淡化为.color3然后.color4到.color4。

为什么以下代码不起作用？

.color1

亲爱的家伙，也让我知道如果使用$( "#mydiv" ).switchClass( "color1", "color2", 1000 ).switchClass( "color2", "color3", 1000 ).switchClass( "color3", "color4", 1000 ).switchClass( "color4", "color1", 1000 );更容易完成它。

Answer 1

此解决方案可能会对您有所帮助。

<div id="foo">
</div>

 div#foo {
    width: 100px;
    height: 100px;
    border: 3px red solid;
    position: relative;
    -webkit-animation: mymove 5s infinite;
    animation: mymove 5s infinite;
    /*if you want to play animation for once onlye then you can use forwards instade of infinite.*/
}
@-webkit-keyframes mymove {
    0% {
        border: 3px red solid
    }
    25% {
        border: 3px #000 solid
    }
    75% {
        border: 3px blue solid
    }
    100% {
        border: 3px green solid
    }
}
@keyframes mymove {
    0% {
        border: 3px red solid
    }
    25% {
        border: 3px #000 solid
    }
    75% {
        border: 3px blue solid
    }
    100% {
        border: 3px green solid
    }
}

Answer 2

是的，使用CSS动画会更容易。这个设置为每个动画无限运行@ 5s：

＆＃13;

div {
  width: 100px;
  height: 100px;
  padding: 5px;
  text-align: center;
  border: 2px solid red;
  -webkit-animation: myfirst 5s infinite;
  /* Chrome, Safari, Opera */
  animation: myfirst 5s infinite;
}
/* Chrome, Safari, Opera */

@-webkit-keyframes myfirst {
  0% {
    border-color: red;
  }
  25% {
    border-color: yellow;
  }
  50% {
    border-color: blue;
  }
  75% {
    border-color: green;
  }
  100% {
    border-color: red;
  }
}
/* Standard syntax */

@keyframes myfirst {
  0% {
    border-color: red;
  }
  25% {
    border-color: yellow;
  }
  50% {
    border-color: blue;
  }
  75% {
    border-color: green;
  }
  100% {
    border-color: red;
  }
}

＆＃13;

<div>Hello, check out my border that is ALWAYS changing color :)</div>

＆＃13;

希望这有帮助！

通过使用switchClass多次将类相互淡化

2 个答案: