使用CSS在鼠标悬停时改变/微调文本位置

Question

我正在制作一个菜单，它看起来像这个http://exclusivelyhistailoring.com/。请注意，当鼠标悬停在链接上时，文本会向右移动并改变颜色。 未悬停状态 悬停状态 目前我的进展如下：

.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;
}

有什么想法吗？

- user3322081

Answer 1

那是一个Flash文件，因此要使用CSS创建类似的东西，您需要text-indent属性或padding-left，无论哪个都可以。 我从头开始制作了下面的演示。 演示

html, body {
    height: 100%;
    background: #FF9000;
}

ul {
    margin: 20px;
    font-family: Arial;
    font-size: 15px;
    font-weight: bold;
}

ul li {
    margin-bottom: 5px;
    text-shadow: 0 0 10px #fff;
    color #000;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
}

ul li:hover {
    color: #fff;
    text-indent: 15px;
}

a {
    color: inherit;
    text-decoration: none;
}

- Mr. Alien

---

太聪明了！！谢谢谢谢。我没想到文本缩进哈哈，糟糕。 - user3322081