: Circle behind another circle 之后的 CSS 效果

Question

引用: http://tympanus.net/Development/IconHoverEffects/#set-7

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

我相信我们可以用 css after 类来做到这一点。我尝试创建一个 .circle 类，并将 after 的边距增加 10px，但它不起作用。

任何人都可以检查我的代码，或者建议如何实现这个吗？

jsfiddle:http://jsfiddle.net/dBQ5s/

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

.circle:after {
    background:green;
    -moz-border-radius:75px;
    -webkit-border-radius:75px;
    border-radius:75px;
    width:120px;
    height:120px;
    margin-left:20px;
    margin-top:20px;
}

Answer 1

该效果是由 box-shadow 引起的，仅此而已。 :]

他们在该页面上使用伪元素来达到效果!

重要提示 确保包含 content: ""; 并且，就我个人而言，display: block; 到他们的 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;
}

这是一个 fiddle :DEMO

---

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

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

fiddle :DEMO