我正在寻找一个简单的粉碎一些文本的效果。唯一的问题是,当我沿 Y 轴缩放时,它从顶部和底部挤压,留下一个奇怪的 float 挤压元素。
@-webkit-keyframes crush_head {
from {
-webkit-transform:scaleY(1); /* Safari and Chrome */
}
to {
-webkit-transform:scaleY(0.5); /* Safari and Chrome */
}
}
我想把这只小狗压下去,就像它的头上有重物一样。不只是来自双方。知道如何达到预期的效果吗?
附件是我目前如何执行此操作的 fiddle 。 http://jsfiddle.net/54A9M/
最佳答案
您正在寻找的属性是transform-origin-y:
-webkit-transform-origin-y: 77%;
.crush {
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
vertical-align: top;
border-top: 1px solid black;
-webkit-animation-fill-mode: forwards;
-webkit-animation-name: crush_head;
-webkit-animation-duration:3s;
-webkit-animation-timing-function:ease-in;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin-y: 77%;
}
通常的值是“bottom”,但它会压到字母下方的最低点(实际上,压到文本的真正底部)。
我在尝试错误的基础上将其设置为 77%。
关于css - 动画变换比例的最佳方式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19263690/