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

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

mix-blend-mode可能在未来的危机时使用IE会明白。我回答这个问题，因为CSS3标签

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); 
 
}

hover the arrow . 
 
<div> 
 
    <div class=arrow></div> 
 
</div>

IF IE，它尚不能工作的。

SVG应该是做这个工作的东西

Answer 2

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

尝试将您的.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 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; 
    } 

}