防止伪::before元素中的动画背景图片被裁剪

Question

我正在尝试使 div 的背景图像在缩放和旋转方面具有动画效果，并且 semi-achieved 使用 div 的伪 ::before 元素，并且在该元素上具有背景图像。问题是我似乎无法让原始 div 中的文本出现在动画背景的前面，而且我还遇到了奇怪的问题，即图形被裁剪到最终 [=] 的尺寸47=] 大小。

这很难解释，但你可以在我的demonstration jsfiddle here!

中更容易地看到

这是我的 html:

<body>
<div id="box">
<h1>I want this title to stay in the foreground</h1>   
</div>
</body>

这是我的 css:

body {
background-color:#333;
}

#box {
z-index:2;
width:700px;
height:200px;
border:3px solid #e7f26d;
position:relative;
text-align:center;
color:#000;
}

#box * {
z-index:2;
}

#box::before {
content:"";
z-index:1;
position:absolute;
top:0;bottom:0;left:0;right:0;
background-image:url('https://www.picpng.com/image/view/110525');
background-image:no-repeat;
background-position:center;
-webkit-animation:grow-rotate 4s linear normal;
}

@-webkit-keyframes grow-rotate { 
0% {transform: rotate(320deg) scale(0);}
100% {transform: rotate(360deg) scale(0.2);} 
}

我试图解决的多个问题是：

1.主要问题 防止裁剪背景图形。该图像是一个 spiral/circular，我想看到完整的螺旋，直到它到达它的边缘parent。所以，最终它确实会被裁剪到达容器 div 边界，但在缩放时未到达向上。这可能吗？我尝试了各种组合溢出属性，但我必须在 #box 上有 position:relative div.

2.最后的旋转度数是否一定要结束观点？我只想将图像从头到尾旋转大约 40 度完成，但我不想在结束时突然跳到开始点，因此为什么我从 320 度开始旋转并在 360deg，所以最后没有突然跳跃。虽然这不是在这里工作 either.For 某些原因导致它在最后跳到全尺寸。

3. 将 h1 标题文本保留在背景图形前面

如果一个问题的问题点太多，我们深表歉意。 1 号是我现在的主要问题。感谢任何能帮我解决这个问题的人。

Answer 1

这是解决方案

裁剪问题：

尝试使用 top 和 bottom 负值使 :before 元素成为正方形并使用 background-size:contain（它将消除裁剪问题）

标题问题：

将 z-index:-1 设置为 :before 伪 class。

跳跃问题

设置你的animation-fill-mode: forwards

Updated Fiddle

防止伪::before元素中的动画背景图片被裁剪

Prevent animated background image in pseudo ::before element from being cropped

jquery

html

css

animate.css