Question

当鼠标结束时，我想改变一个单词中每个字母的颜色。

我使用转换执行此操作，但我希望此更改从左到右顺利进行，但我不知道为什么轻松定时功能不起作用。我希望以div元素移动的方式改变字母的颜色。

本网站的第一个是我想要的： http://tympanus.net/Development/TextStylesHoverEffects/

<style>
    p {
        transition: all 0.5s ease-in;
    }

    div {
        width: 100px;
        height: 100px;
        background: red;
        position: relative;
        -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
        -webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */
        animation: mymove 5s infinite;
        animation-timing-function: linear;
    }

    .a:hover{
        color: cyan;
    }

    @-webkit-keyframes mymove {
        from {
            left: 0px;
        }

        to {
            left: 200px;
        }
    }

    @keyframes mymove {
        from {
            left: 0px;
        }

        to {
            left: 200px;
        }
    }
</style>

<body>
    <p class="a">HelloGolnaz</p>

    <div></div>
</body>

很抱歉，这是一个简单的问题，谢谢。

Answer 1

您可以使用两个div来创建此类效果：

＆＃13;

.default,
.hover {
  font-size: 18px;
  font-weight: bold;
  color: #787878;
}
.hover {
  overflow: hidden;
  width: 0;
  position: absolute;
  left: 0;
  top: 0;
  color: #050;
  transition: width .5s ease-in-out;
  white-space: nowrap;
}
.wrapper {
  position: relative;
}
.wrapper:hover .hover {
  width: 100%;
}

＆＃13;

<div class="wrapper">
  <div class="default">SOME WORD HERE</div>
  <div class="hover">SOME WORD HERE</div>
</div>

＆＃13;

Answer 2

首先我想说@justinas's answer是一个正确答案，但我只想稍微修改一下他的答案，以便在CSS动画中使用steps()函数而不是CSS过渡，这样就可以了看起来它正在逐字填写。

请注意，要模拟它，步数应与字母数相同

jsFiddle

＆＃13;

.default,
.hover {
  font-size: 18px;
  font-weight: bold;
  color: #787878;
  cursor:pointer;
}
.hover {
  overflow: hidden;
  width: 0;
  position: absolute;
  left: 0;
  top: 0;
  color: navy;
  white-space: nowrap;
}
.wrapper {
  position: relative;
  display: inline-block;
}
.wrapper:hover .hover {
  width: 100%;
  animation: stagger 2s steps(14);
}
@keyframes stagger {
  from {width: 0;}
  to {width: 100%;}
}

＆＃13;

<div class="wrapper">
  <div class="default">SOME WORD HERE</div>
  <div class="hover">SOME WORD HERE</div>
</div>

＆＃13;

在悬停时一个字母中逐字母更改字体颜色

2 个答案: