Question

我正在努力制作一个涟漪动画。

这是班级：

.ripple {
    background: rgba(0,0,0,0.15);
    border-radius: 100%;
    width:100px;
    height:100px;
    animation: anim 0.5s ease-out;
    position: absolute;
    left:5%;
    top:5%;
    transform: scale(0);
    pointer-events: none;
}

这是动画：

@keyframes anim {
    to {
         transform: scale(2);
         opacity:0;
    }
}

这是html：

<div id="red">
    <div class="ripple"></div>
</div>

我一直在努力限制涟漪动画它不超过父母的宽度和高度节点

这是我的小提琴：

http://jsfiddle.net/wx25q5bo/1/

为了达到这个效果，我应该在代码中更改什么：

http://codepen.io/anon/pen/WbMEEp

提前致谢！

Answer 1

将overflow: hidden添加到您的父元素（#red）。并将position:absolute更改为position: relative。我猜您将需要使用JavaScript来确定下一步中的点击位置。

Answer 2

这应该适合你，让动画在#red悬停时发生。小提琴here

的CSS

#red {
  width: 100px;
  height: 100px;
  background: red;
  overflow:hidden;
  position: relative;
}

#red:hover .ripple {
  background: rgba(0,0,0,0.25);
  border-radius: 100%;
  width:100px;
  height:100px;
  transform: scale(0);
  margin: 0 auto;
 -moz-animation: anim 0.5s ease-out;
 -webkit-animation: anim 0.5s ease-out; 
}

如何将变换比例限制为CSS中父元素的宽度和高度？

2 个答案: