Question

参考： http://tympanus.net/Development/IconHoverEffects/#set-7

当您翻转上面链接中的任何圆圈图标时，它会在曲线中消失（我认为是弹出该圆圈后面的另一个白色圆圈）。我不想要翻转效果，但我希望在圆圈附近有一条简单的曲线。

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

任何人都可以查看我的代码，或建议如何实现这一目标吗？

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

这是一个小提琴：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

带有After的CSS效果：在另一个圆圈后面圈出

1 个答案: