css3 возможно цвет изменение в зависимости ширина?

Пожалуйста, проверьте демо: https://jsfiddle.net/6rtnL7a7/css3 возможно цвет изменение в зависимости ширина?

.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/ метод ширины не будет работать, поскольку анимация начинается с ширины ширины от 0 до 200, существует ли альтернативный способ?

что-то вроде изменения цвета от 0% до 100%?

источник

2017-02-15 olo

Вы имеете в виду выцветший красный бар в синий? –

можно использовать фон (одноцветный градиент), фон-повтор и размер фона или положение. не могли бы вы уточнить вопрос. ваша демонстрация, похоже, работает. –

Это может быть возможно с помощью градиентов и ограничения «шагов» в вашей анимации. –

mix-blend-mode может использоваться в FUTUR, когда 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 должно быть тем, что нужно делать

источник

2017-02-15 00:47:26

Когда вы говорите ширину, вы имеете в виду ширину страницы? Вы считали медиа-запросы?

Попробуйте изменить ширину линии в процентах, например 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/

источник

2017-02-15 00:22:33 gwally

Я думаю, что он спрашивает, может ли элемент иметь два цвета. Я не уверен, что это правильный ответ. –

Он изменил свой вопрос после того, как я ответил. Медиа-запросы позволят ему изменить цвет. Он мог легко иметь один наконечник стрелки, а другой - другой. – gwally

Попробуйте что-то вроде этого:

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

}

источник

2017-02-15 00:38:11

css3 возможно цвет изменение в зависимости ширина?

ответ

Смежные вопросы