我想像that一样创建动画。然而,它看起来不应该如此。这是我code的小提琴。请帮忙。
.effect-1 {
position: relative;
height: 100px;
width: 100px;
margin: 100px;
border-radius: 50%;
display: block;
text-align: center;
line-height: 100px;
background-color: black;
}
.effect-1::after {
position: absolute;
top: -10px;
left: -10px;
height: 100%;
width: 100%;
padding: 10px;
border-radius: 50%;
box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.8);
transform: scale(0.7, 0.7);
transition: all 0.2s;
}
答案 0 :(得分:1)
嗯 - 不确定为什么你没有从sample page复制CSS代码。它立即起作用:https://jsfiddle.net/063djx57/1/
重要的是, override public var collisionBoundsType: UIDynamicItemCollisionBoundsType {
return .Elliptical
}
答案 1 :(得分:1)
我建议在悬停时更改缩放变换属性,而不是以像素为单位更改高度/宽度(因为这会影响布局流程),而变换会为对象正确创建自定义图层:
.effect {
position: relative;
height: 100px;
width: 100px;
line-height: 100px;
border-radius: 50%;
display: block;
text-align: center;
background-color: black;
color: white;
font-size: 2em;
text-decoration: none;
margin: 1em;
}
.effect::before {
content: '';
position: absolute;
top:0; bottom: 0; left: 0; right: 0;
margin: auto;
height: 100%; width: 100%;
border:5px solid black;
border-radius: inherit;
box-sizing: border-box;
transform: scale(0.5);
transition: .3s;
}
.effect:hover::before {
transform: scale(1.2);
}

<a href="#" class="btn effect">M</a>
&#13;
此外,应将过渡属性添加到静态而不是悬停状态以获得最佳结果。