Question

我发现按钮的效果很好，我想在我的一个网站上实现这一点。有谁知道我在哪里可以找到（免费）jquery文件来实现这种效果？这是你看到的第一个效果，边框以圆形扩展：）

http://tympanus.net/Development/IconHoverEffects/

Answer 1

关于鼓室的这个例子是使用CSS3过渡而不是jquery插件，所以你没有找到解决问题的好方法，最好直接看看如何使用CSS3过渡动画它。

.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;
}

我添加了以下规则：在伪元素之后，显示外部圆圈！有关信息，图标本身使用：before伪元素，使用标志性字体，例如font-awesome

Answer 2

这个例子不使用jquery，它是所有的CSS（就像鼓室上的大多数东西一样）。

您需要删除CSS并将其应用于您自己的ID /类。或者你可以使用他们的CSS文件＆amp;使用与他们使用的相同的类，但可能存在可能与您网站上的其他样式冲突的内容。

圆形按钮悬停效果

2 个答案: