javascript - 如何使用 :after pseudoclass and jquery? 为悬停按钮设置动画

Question

有人知道如何用jquery制作这些悬停效果吗？ https://tympanus.net/Development/CreativeButtons/

谢谢，我正在努力学习，我不需要购买或下载表格

我刚刚对其进行了分析，似乎有一个元素:

p 部分按钮(我发现 p 是一种更好的居中方式，非常好)

按钮的类:

.btn

基本悬停效果的普通伪类:

.btn:悬停

jquery 动画的 after 伪类:

.btn:之后

我不明白的是如何为 .btn:after using jquery 制作动画

这里我有一个我自己做的引用表，你可以尝试一下(CSS 并不干燥，因为它是一个引用表，将来我可以用它来查找要重用的特定对象、类或修改 https://codepen.io/Heavybrush/pen/bWgXpx

我尝试使用

$(".btn2").hover(
  function() {
    $(this).stop().animate({height: "80px"},300);
  },
  function() {
    $(this).stop().animate({height: "0"},300);
  }
);

用“.btn2:after”更改此设置，但不起作用

Answer 1

js/jq 似乎无法获取伪元素。所以你不能像普通元素一样为伪元素设置动画。

你应该在CSS中对伪元素进行动画处理，例如

.btn::after{
}

.btn:hover::after{
}

如果动画是动态生成的。你可以像这样创建它

var style = document.createElement('style');
style.innerText = '...animation style';
document.head.append(style);