CSS转换源问题

我正在处理浮动的鬼影here。CSS转换源问题

我遇到的问题是transform-origin属性。现在，阴影（底部的椭圆）似乎从左侧向右侧扩展，然后再向这个方向缩小。 I 希望的行为是为了影子从中间扩大和缩小 - 因此变形起源：50％50％;。

下面是相关的代码，但它有助于看看Codepen：

.container { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-left: -64.5px; 
    margin-top: -85.5px; 
} 

.shadow { 
    margin-left: 22px; 
    animation: shrink 3s ease-out infinite; 
    transform-origin: center center; 
    ellipse { 
    transform-origin: center center; 
    } 
} 

@keyframes shrink { 
    0% { 
    width: 20%; 
    } 
    50% { 
    width: 27%; 
    } 
    100% { 
    width: 20%; 
    } 
}

如果任何人有任何想法，太感谢你了！出于某种原因真的在挣扎着。

来源

2013-12-18 Helen

好的，我为你解决了一个问题。

我所做的是利用保证金和宽度为动画，以保持它为中心。我还给了p标签，其中包含svg阴影阴影的设置宽度以保持阴影居中。

这里是我编辑的CSS，

.shadowFrame { 
width: 130px; 
} 
.shadow { 
    animation: shrink 3s ease-out infinite; 
    transform-origin: center center; 
    ellipse { 
    transform-origin: center center; 
    } 
} 

@keyframes shrink { 
    0% { 
    width: 90%; 
    margin: 0 5%; 
    } 
    50% { 
    width: 60%; 
    margin: 0 20%; 
    } 
    100% { 
    width: 90%; 
    margin: 0 5%; 
    } 
}

这里是live link。

来源

2013-12-18 01:43:22

很漂亮！有点神秘，为什么转换起源不起作用，但这真的很不错！非常感谢！ – Helen

我很高兴你喜欢它，你可以根据自己的喜好调整阴影的大小。如果这回答了您的问题，您可以将其标记为接受的答案，祝您好运。：]由于宽度从小到大，它不能满足您的期望。阴影从p标记中放下'22px'。当它在宽度上增长时，它所依靠的点不会改变，而只是向左增长，因为它的左边点是固定的。 –

您还应该添加空白：0 auto;在.shadow类上，然后从关键帧中删除边距。 –

CSS转换源问题

回答

相关问题