Question

与现在一样，边框刚刚出现。我想从顶部开始绘制圆形边框。不知道我是否可以仅使用CSS来完成此操作，还是需要一些jquery。谢谢！这也是我的codepen 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>

Answer 1

这里没有可用于CSS的边框动画，但是您所描述的声音非常适合SVG绘制路径。代替使用Webfont，可以考虑使用带有图标和边框的SVG图标。这样，您可以使用CSS在悬停事件上绘制圆的路径。

请参阅：https://css-tricks.com/svg-line-animation-works/

我想为滚动箭头设置边框动画，使它自己绘制，而不仅仅是出现

1 个答案: