Question

请查看演示：https://jsfiddle.net/6rtnL7a7/

.line{
  height:2px;
  width: 200px;
  background:red;
  cursor: pointer;
  position:relative;
     &:hover:after {
      content: '';
      display:block;
      position: absolute;
      top:0;
      left:0;
      width: 0px;
      height:2px;
      background:blue;
      animation-duration: 1s;
      animation-name: example;
      animation-fill-mode: forwards;
  }
  &:after {
      content: '';
      display:block;
      position: absolute;
      top:0;
      left:0;
      width: 0px;
      height:2px;
      background:blue;
      animation-duration: 1s;
      animation-name: back;
      animation-fill-mode: forwards;
  }

}



@keyframes example {
    from {
      width: 0;
     }
    to {
      width: 100%;
    }
}

@keyframes back {
    from {
      width: 200px;
    }
    to {
      width: 0;
    }
}

很抱歉这个混乱。

动画效果很好，但如果线条变为这样的箭头 https://jsfiddle.net/916er24k/宽度方法不起作用，因为animiation从0到200宽度开始，是否有另一种方法可以做？

颜色变化从0％到100％？

Answer 1

当你说宽度时，你的意思是页面宽度？你考虑过媒体查询吗？

尝试将.line宽度更改为百分比，例如75％。然后，随着浏览器窗口的增大或缩小，颜色会根据媒体查询而变化。

body {
  padding:4rem;
}

.line{
  height:2px;
  width: 75%;
  background:red;
  cursor: pointer;
  position:relative;
     &:hover:after {
      content: '';
      display:block;
      position: absolute;
      top:0;
      left:0;
      width: 0px;
      height:2px;
      background:blue;
      animation-duration: 1s;
      animation-name: example;
      animation-fill-mode: forwards;
  }
  &:after {
      content: '';
      display:block;
      position: absolute;
      top:0;
      left:0;
      width: 0px;
      height:2px;
      background:blue;
      animation-duration: 1s;
      animation-name: back;
      animation-fill-mode: forwards;
  }

}

@keyframes example {
    from {
      width: 0;
     }
    to {
      width: 100%;
    }
}

@keyframes back {
    from {
      width: 200px;
    }
    to {
      width: 0;
    }
}

@media only screen and (max-width: 400px) {
  .line {
    background:red;
  }
}

@media only screen and (max-width: 600px) {
  .line {
    background:yellow;
  }
}

@media only screen and (max-width: 800px) {
  .line {
    background:blue;
  }
}

https://jsfiddle.net/wallyglenn/d6d6jegm/

Answer 2

当IE理解它时，

roles可以在未来中使用。我因为CSS3标签而回答这个问题

＆＃13;

mix-blend-mode

＆＃13;

div {
  display: table;
  background: linear-gradient(to right, green, green) no-repeat red;
  background-size: 0;
  transition: 1.5s;
}
div:hover {
  background-size: 100%;
}
.arrow {
  width: 300px;
  position: relative;
  margin: 1em;
  border-bottom: solid 2px;
  box-shadow: 0 0 0 1.1em white;
  mix-blend-mode: screen;
}
.arrow::before {
  position: absolute;
  top: -3px;
  right: 0px;
  content: '';
  display: block;
  width: 17px;
  height: 0;
  border-top: 2px solid;
  transform: rotate(23deg);
}
.arrow::after {
  position: absolute;
  top: 3px;
  right: 0px;
  content: '';
  display: block;
  width: 17px;
  height: 0;
  border-top: 2px solid;
  transform: rotate(-23deg);
}

＆＃13;

如果是IE，它还没有工作。

SVG应该是做这项工作的事情

Answer 3

尝试这样的事情：

.line{
  height:2px;
  width: 200px;
  background: linear-gradient(#fff, #999) no-repeat border-box, linear-gradient(#eee, #777) no-repeat border-box;
  background-size: 100% 100%, 100% 100%;
  background-position: 0 0, 100% 0;
  background-origin: padding-box, padding-box;
  cursor: pointer;
  position:relative;
  &:hover {
        background-size: 0 100%, 100% 100%;
        transition: all 1s;
  }

}

css3是否可以根据宽度改变颜色？

3 个答案: