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');
      }
                    );

CSS使用关键帧更改内容

1 个答案: