带有After的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

这种影响是由a引起的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;
}

这是一个小提琴: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);
}

小提琴:DEMO