html - CSS 使用关键帧更改内容

Question

我想创建一个按钮，它在悬停时旋转 1 秒，并在动画期间更改其内容。我正在使用 FontAwesome并想要一个在悬停时变成“x”按钮的删除按钮。 Here is a fiddle .

理想情况下，动画在取消悬停时也会向后运行。

那么如何在动画期间更改伪元素的内容呢？

这是我的关键帧动画:

@-webkit-keyframes {
    0% {
        content:'\f056';
        -webkit-transform:rotate(0deg);
    }
    50% {
        content:'\f057';
        -webkit-transform:rotate(360deg);
    }
    100% {
        -webkit-transform:rotate(720deg);
    }
}

Answer 1

一点FIDDLE希望对您有所帮助。

CSS

.outside {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: red;
    border: 10px solid blue;
    color: white;
    text-align: center;
    line-height: 30px;
    transition: all 3s ease;
    transition-property: transform;
}
.outside:hover {
    transform: rotate(1080deg);
}

JS

$('.outside').hover(
    function()
      {
       $('.outside').html('X');
       },
    function()
      {
       $('.outside').html('D');
      }
                    );