1

就像现在一样，边界只是出现了。我想让圆形边框从顶部开始绘制。不确定我是否可以纯粹使用 CSS 或是否需要一些 jquery 来做到这一点。谢谢！这也是我的代码笔 https://codepen.io/jamesrichardsdesign/pen/eQzjQY

.glyphicon {
    position: relative;
    content:"\e259";
    top:50%;
    left: 50%;
    font-size: 2vw;
    cursor: pointer;
    padding: 10px;
}

.glyphicon:hover {
    opacity: 0.5;
    transition: 0.3s;
}

.glyphicon:hover {
    border-style: solid;
    border-width: thin;
    border-radius: 100px;
    transition: 0.8s;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

<i class="glyphicon glyphicon-menu-down"></i>

4

1 回答 1

0

此处没有可以使用 CSS 应用的边框动画，但您所描述的内容听起来非常适合 SVG 绘制路径。考虑使用带有图标和边框的 SVG 图标，而不是使用网络字体。这样，您可以使用 CSS 在悬停事件上绘制圆的路径。

见：https ://css-tricks.com/svg-line-animation-works/

于 2018-11-10T00:39:15.213 回答