圆形按钮悬停效果

米歇尔·斯坦达特（Michiel Standaert）

我发现按钮效果不错，我想在我的一个网站上实现这一点。有谁知道我在哪里可以找到（免费）jQuery文件来实现这种效果？这是您看到的第一个效果，其中边框扩展为圆形:)

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

防风罩

tympanus上的该示例使用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;
}

我添加了用于：after伪元素之后的规则，该规则显示外部圆！有关信息，图标本身使用：before伪元素，并带有诸如font-awesome之类的图标字体

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。