Как сделать плавное отображение тени текста при наведении

Question

При наведении курсором на ссылку должна плавно появиться тень. Не могу сделать процесс плавным. Долго гуглил но не смог найти.

Answer 1

Вот так чуть чуть вроде красиво

.inner {
  cursor: pointer;
}

span {
  font-size: 60px;
  font-family: sans-serif;
  transition: 1s;
  font-weight: 600;
}

.inner:hover span {
  text-shadow: 0 0 3px #000;
  color: #fff;
}

span:nth-child(1) {
  transition-delay: 0.1s;
}

span:nth-child(2) {
  transition-delay: 0.2s;
}

span:nth-child(3) {
  transition-delay: 0.3s;
}

span:nth-child(4) {
  transition-delay: 0.4s;
}

span:nth-child(5) {
  transition-delay: 0.5s;
}

span:nth-child(6) {
  transition-delay: 0.6s;
}

span:nth-child(7) {
  transition-delay: 0.7s;
}

span:nth-child(8) {
  transition-delay: 0.8s;
}

span:nth-child(9) {
  transition-delay: 0.9s;
}

span:nth-child(10) {
  transition-delay: 1s;
}

<div class="inner">
  <span>t</span>
  <span>e</span>
  <span>x</span>
  <span>t</span>
  <span>s</span>
  <span>h</span>
  <span>a</span>
  <span>d</span>
  <span>o</span>
  <span>w</span>
</div>

Answer 2

CSS решение

Для получения тени при наведении используется text-shadow

html {
  background: #A5D0C2;
}
h1 {
font: 700 10vw sans-serif;
  color: white;
  text-align: center;
  text-transform: uppercase;
  transition: all 0.8s;

}

h1:hover {
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0px 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);
}

<h1>Stackoverflow</h1>

SVG решение

Для получения тени используются svg фильтры: feGaussianBlur, feOffset,feMerge

Анимация тени реализуется с помощью анимации атрибута stdDeviation фильтра feGaussianBlur

html {
  background: #A8B8E9;
}
.container {
width:98vw;
height:100vh;
}
#txt1 {
font: 700 5vw sans-serif;
  fill: white;
  text-anchor: middle;
  text-transform: uppercase;
  filter:url(#dropshadow);
}

<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 500 500" style="border: 0px solid">
 
  <defs>
    <filter id="dropshadow" height="130%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="0 0">
        <animate attributeName="stdDeviation"
         values="0 0;8 8;0 0"
          begin="txt1.mouseover"
		  end="txt1.mouseout"
         dur="2s"
		 repeatCount="indefinite" />
       </feGaussianBlur>	  
      <feOffset dx="1" dy="1" result="offsetblur"/> 
      <feMerge> 
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/> 
      </feMerge>
    </filter>
  </defs> 
  <text id="txt1" x="50%" y="100" >Stackoverflow </text>
    
</svg>
</div>

БЛОГ НА HUSL

Как сделать плавное отображение тени текста при наведении

Ответы (2 шт):

CSS решение

SVG решение