我正在制作一个菜单,它看起来像这个http://exclusivelyhistailoring.com/。请注意,当鼠标悬停在链接上时,文本会向右移动并改变颜色。
未悬停状态
悬停状态
目前我的进展如下:
有什么想法吗?
![enter image description here](https://istack.dev59.com/y40oW.webp)
![enter image description here](https://istack.dev59.com/D9PEK.webp)
.text-glow {
font-size:4em;
color: #FFFFFF;
font-family:Arial!important;
-webkit-stroke-width: 6.3px;
-webkit-stroke-color: #FFFFFF;
-webkit-fill-color: #FFFFFF;
text-shadow: 1px 0px 20px white;
-webkit-transition: width 0.9s;
/*Safari & Chrome*/
transition: width 0.9s;
-moz-transition: width 0.9s;
/* Firefox 4 */
-o-transition: width 0.9s;
/* Opera */
}
.text-glow:hover, .text-glow:focus .text-glow:active {
color: transparent;
text-shadow: 0 0 5px #000;
}
有什么想法吗?