Question

所以我们有这个按钮：

package com.example.fabricanddecor;

public class Category {

    private int id;
    private String categoryName;

    public Category()
    {}

    public Category(int id, String categoryName) {
        this.id = id;
        this.categoryName = categoryName;
    }

    public int getId() {
        return id;
    }

    public String getCategoryName() {
        return categoryName;
    }

    public void setId(int id) {
        this.id = id;
    }

    public void setCategoryName(String categoryName) {
        this.categoryName = categoryName;
    }
}

我想将图标旋转90度，所以它将是悬停时的向下箭头，而我遇到的问题是这些：

-使用css悬停并旋转时，问题是您必须将图标悬停，并且我希望箭头在悬停按钮时旋转90度，但我不知道是否可以在悬停按钮时使悬停在图标上按钮，即使将鼠标悬停在该图标上，它也会旋转到90度，但随后又返回到初始位置，我希望它在您将鼠标悬停在按钮上之前一直停留。

我已经尝试过使用javascript，它与mouseover和mouseout配合使用时效果很好，可以使用transform rotation 90deg添加和删除类，但是问题是我无法弄清楚如何使动画更快地发生，而使用javascript确实可以慢，我的意思是说，当鼠标悬停时，按钮会更改颜色，颜色也会更改，但是箭头仅在2-3秒后才会向下滚动。

所以我的问题是，您可以使用javascript控制动画的速度吗？将鼠标悬停在按钮上并使其停留在90度并且仅在悬停后才返回初始位置时，是否可以使用CSS做到这一点？

Answer 1

您可以使用

.btn:hover > i {
 display: inline-block;
 transition: 1.5s ease-in-out;
 transform: rotate(180deg);
}

如果要旋转i标签，则需要显示行内块。我也可能建议使用span标签而不是i标签来显示字体真棒图标，因为span的语义含义较少，其中i标签保留为斜体。您也可以根据需要通过编辑过渡代码来编辑速度并更改动画类型。

Answer 2

您不需要Java语言即可实现。使用:hover选择器，当用户将鼠标悬停在按钮上时，可以应用CSS属性。您可以在transition属性上设置更改ms / s的速度。

.btn:hover i {
   transition: all 300ms;
   transform: rotate(90deg);
}

旋转字体真棒图标

2 个答案: