我通过Unicode有一个齿轮图标,我正在尝试使其在focus
和hover
事件上旋转。
@keyframes spin
{
0 {transform: rotate(0deg);}
100% {transform: rotate(359deg);}
}
a[title*='important']::after {content: '\2699';}
a[title*='important']:hover::after
{
animation: spin 5s infinite;
outline: #00f solid 2px;
}
<a href="#" title="important">link</a>
我添加了蓝色的outline
以确认我在选择正确。为什么CSS生成的内容不具有动画效果,我该如何解决?
我做了一些测试,发现了一些非常具有讽刺意味的结果!
有关使“懒惰的”浏览器正常工作的建议?
更新
bijal使用display: inline-block;
的答案设法使齿轮动起来动起来,而不是简单地旋转。
如果您将background-color
应用于伪元素,并且注意到宽度比您预期的要宽(例如20px齿轮为50像素宽度),请使用text-indent: 0;
。如果您对代码执行其他操作,请进入开发人员工具并开始取消选中已应用的属性/值对,直到问题解决为止。
答案 0 :(得分:2)
您可以使用它,尝试应用显示:内联阻止它将起作用。
a[title*='important']:hover::after{
display: inline-block;
animation: spin 5s infinite;
outline: #00f solid 2px;
}
答案 1 :(得分:1)
我做了一些修改并创建了一支笔,请检查