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

}