शुद्ध सीएसएस: लिंक रंगों को एनिमेट करने के 4 तरीके

विधि # 1: पृष्ठभूमि-क्लिप का उपयोग: पाठ

<a href="#">Link Hover</a>

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  font-weight: 800;
  color: royalblue;
  overflow: hidden;
}

a {
  /*  ,    */
  background: linear-gradient(to right, midnightblue, midnightblue 50%, royalblue 50%);
}

a {
  /*  ,    */
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-position: 100%;
}

a {
  /*  ,    */
  transition: background-position 275ms ease;
}
a:hover {
  background-position: 0 100%;
}

विधि # 2: चौड़ाई / ऊंचाई लगाने

<a href="#" data-content="Link Hover">Link Hover</a>

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  color: royalblue;
  font-weight: 800;
  text-decoration: underline;
  overflow: hidden;
}

a::before {
  position: absolute;
  content: attr(data-content); /*    */
  top: 0;
  left: 0;
  color: midnightblue;
  text-decoration: underline;
  overflow: hidden;
  transition: width 275ms ease;
}

a::before {
  /*  ,    */
  width: 0;
  white-space: nowrap;
}

a:hover::before {
  width: 100%;
}

विधि 3: क्लिप-पथ का उपयोग कर

<a href="#" data-content="Link Hover">Link Hover</a>

a::before {
  position: absolute;
  content: attr(data-content);
  color: midnightblue;
  text-decoration: underline;
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  transition: clip-path 275ms ease;
}

clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);

• 0 0 = ऊपरी बाएँ कोने में
• 0 0 = ऊपरी दाहिना कोना
• 0 100% = दायां कोना
• 0 100% = नीचे का बायाँ कोना

a:hover::before {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

विधि # 4: परिवर्तन का उपयोग कर

<a href="#"><span data-content="Link Hover" aria-hidden="true"></span>Link Hover</a>

span {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  transform: translateX(-100%);
  transition: transform 275ms ease;
}

span::before { 
  display: inline-block;
  content: attr(data-content);
  color: midnightblue;
  transform: translateX(100%);
  transition: transform 275ms ease;
  text-decoration: underline;
}

a:hover span::before {
  transform: translateX(0);
}

सारांश