使用After:Circle在另一个圆后面的CSS效果

参考：

当您滚动上面链接中的任何一个圆圈图标时，它会以曲线的形式淡出（我相信这是弹出的圆圈后面的另一个白色圆圈）。我不想要那种滚动效果，但我想要在圆附近有一条简单的曲线

我相信我们可以在课后使用

css

来完成这项工作。我试图创建一个
.circle
类，并将
放在
后面，增加10px的边距，但它不起作用

任何人都可以检查我的代码，或建议如何实现这一点

jsfiddle：

CSS

这种效果是由
框阴影造成的，除此之外没有其他原因

他们在该页面上使用伪元素来实现效果

重要提示确保包含
内容：“和，我个人，
显示：块到css中的伪元素

这是我为达到效果而添加的css

.circle {
    background:#000;
    color:#FFF !important;
    text-align:center;
    -moz-border-radius:75px;
    -webkit-border-radius:75px;
    border-radius:75px;
    width:100px;
    height:100px;
    border:5px SOLID #fff;
}

.circle:hover {
    box-shadow: 2px 3px 0 black;
}

这是一把小提琴：


以下是如何使用伪元素实现相同的动画和效果

.circle {
    background:#000;
    color:#FFF !important;
    text-align:center;
    -moz-border-radius:75px;
    -webkit-border-radius:75px;
    border-radius:75px;
    width:100px;
    height:100px;
    position: relative;
}

.circle:before {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -55px;
    margin-top: -55px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    z-index: -1;
    box-shadow: 3px 5px 0 black;
    opacity: 0;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);

}

.circle:hover:before {
    opacity: 1;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
}

小提琴：
没问题！我正在为你复制准确的效果，请给我一点时间。：]@user1718343我加入了一个新的fiddle链接/css，看看如何实现动画效果。Josh，你太棒了，专家：）谢谢你的奖励。。我非常感谢你的帮助，我希望我有那么多的知识，我会做到这一点，但在至少两个小时：）通过阅读和寻求帮助。。伟人。。非常感谢..哈哈，谢谢你，伙计！我总是很乐意帮忙，祝你的项目好运！使用伪元素时的一个有用提示，请确保它始终位于伪元素的css中，
content:”和我总是添加
显示：块到元素。再次感谢Josh。。我试图在stackoverflow上找到“AddFriend:”），但运气不好。。英雄联盟
.circle {
    background:#000;
    color:#FFF !important;
    text-align:center;
    -moz-border-radius:75px;
    -webkit-border-radius:75px;
    border-radius:75px;
    width:100px;
    height:100px;
    position: relative;
}

.circle:before {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -55px;
    margin-top: -55px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    z-index: -1;
    box-shadow: 3px 5px 0 black;
    opacity: 0;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);

}

.circle:hover:before {
    opacity: 1;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
}