我遇到的情况与此小提琴类似,在这里我有一个CSS3动画,该动画可缩放绝对位于另一个元素中心的元素。但是,发生动画时,动画会偏离中心,如示例中红色正方形相对于蓝色正方形所示。如何居中?我已经尝试过围绕该transform-origin属性进行一些配置,但这无法产生正确的结果。代码如下:@-webkit-keyframes ripple_large { 0% {-webkit-transform:scale(1);} 75% {-webkit-transform:scale(3); opacity:0.4;} 100% {-webkit-transform:scale(4); opacity:0;}}@keyframes ripple_large { 0% {transform:scale(1); } 75% {transform:scale(3); opacity:0.4;} 100% {transform:scale(4); opacity:0;}}.container { position: relative; display: inline-block; margin: 10vmax;}.cat { height: 20vmax;}.center-point { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 10px; width: 10px; background: blue;}.to-animate { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px solid red; height: 5vmax; width: 5vmax; transform-origin:center;}.one { -webkit-animation: ripple_large 2s linear 0s infinite; animation: ripple_large 2s linear 0s infinite;}.two { -webkit-animation: ripple_large 2s linear 1s infinite; animation: ripple_large 2s linear 1s infinite;}
- 2 回答
- 0 关注
- 758 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消