मैं होवर पर नीचे या ऊपर से नीचे तक टेक्स्ट रंग बदलने की कोशिश कर रहा हूं।

.box {
    width: 200px; height: 100px;
    background-size: 100% 200%;
    background-image: linear-gradient(to bottom, red 50%, green 50%);
    -webkit-transition: background-position 1s;
    -moz-transition: background-position 1s;
    transition: background-position 1s;
}

.box:hover {
    background-position: 0 -100%;
}
<div class="box">Text</div>

उपरोक्त कोड टेक्स्ट के बजाय बॉक्स को रंग बदलता है। मैं बॉक्स के बजाय टेक्स्ट का रंग बनाने के लिए क्या कर सकता हूं।

-1
user9248590 29 अप्रैल 2018, 23:00

2 जवाब

सबसे बढ़िया उत्तर

आपको बैकग्राउंड क्लिप का उपयोग करना होगा:

.box {
  width: 200px;
  height: 100px;
  background-size: 100% 200%;
  background-image: linear-gradient(to bottom, red 50%, green 50%);
  -webkit-transition: background-position 3s;
  -moz-transition: background-position 3s;
  transition: background-position 3s;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  font-size: 50pt;
}

.box:hover {
  background-position: 0 -100%;
}
<div class="box">Text</div>

नोट: प्रभाव को अच्छी तरह से देखने के लिए मैंने फ़ॉन्ट आकार और समय को बढ़ाकर 3 सेकंड कर दिया है।

1
Praveen Kumar Purushothaman 29 अप्रैल 2018, 23:04

आप पृष्ठभूमि के साथ एक ओवरले (before छद्म तत्व) का उपयोग करके प्रभाव प्राप्त कर सकते हैं, और mix-blend-mode: screen:

.box {
  position: relative;
  width: 200px;
  height: 100px;
  font-size: 5em;
  background: white;
}

.box::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 100% 200%;
  background-image: linear-gradient(to bottom, red 50%, green 50%);
  transition: background-position 1s;
  content: '';
  pointer-events: none;
  mix-blend-mode: screen;
}

.box:hover::before {
  background-position: 0 -100%;
}
<div class="box">Text</div>
1
Ori Drori 29 अप्रैल 2018, 23:20