При наведении курсором на ссылку должна плавно появиться тень. Не могу сделать процесс плавным. Долго гуглил но не смог найти.
1
-
Вторая ссылка в google: webformyself.com/… – Inventor 23 мар '20 в 2:47
добавить комментарий
|
2 ответа
Вот так чуть чуть вроде красиво
.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>
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>