<分区>
要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的，因为它们往往会吸引自以为是的答案和垃圾邮件。相反，describe the problem以及迄今为止为解决该问题所做的工作。
关闭 9 年前。
<分区>
要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的，因为它们往往会吸引自以为是的答案和垃圾邮件。相反，describe the problem以及迄今为止为解决该问题所做的工作。
关闭 9 年前。
我发现了一个很好的按钮效果，我想在我的一个网站上实现它。有谁知道我在哪里可以找到一个(免费的)jquery 文件来实现这个效果？这是您看到的第一个效果，边框以圆形扩展:)
最佳答案
这个关于鼓室的例子使用的是 CSS3 过渡而不是 jquery 插件，所以你没有找到解决问题的好方法，最好看看如何直接使用 CSS3 过渡来制作动画。
编辑:CSS3 tutorial with w3schools
编辑:Another tutorial of CSS-tricks
.icon {
background: rgb(0, 0, 0);
color: rgb(255, 255, 255);
transition: background 0.2s, color 0.2s;
-moz-transition: background 0.2s, color 0.2s;
-webkit-transition: background 0.2s, color 0.2s;
}
.icon:hover {
background: rgb(255, 255, 255);
color: rgb(0, 0, 0);
}
.icon:after {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
content: '';
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
top: -7px;
left: -7px;
padding: 7px;
box-shadow: 0 0 0 4px #fff;
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
-webkit-transform: scale(.8);
-moz-transition: -moz-transform 0.2s, opacity 0.2s;
-moz-transform: scale(.8);
-ms-transform: scale(.8);
transition: transform 0.2s, opacity 0.2s;
transform: scale(.8);
opacity: 0;
}
.icon:hover:after {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
我添加了用于 :after 伪元素的规则，显示外圈!有关信息，图标本身使用 :before 伪元素，带有标志性字体，例如 font-awesome
关于jquery - 圆形按钮悬停效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23029759/