Question

我试图在比例和旋转中获得div动画的背景图像，并且使用div的伪:: before元素并在该元素上具有背景图像来半实现。问题是，我似乎无法将原始div中的文本呈现在动画背景前面，而且我还有一个奇怪的问题，即图形被裁剪为最终div大小的尺寸。

很难解释，但您可以在demonstration jsfiddle here!

中更容易地看到

这是我的HTML：

.ToList()

这是我的css：

var contact = dataContext.Contacts
                    .Include(c => c.Addresses)
                        .ThenInclude(a => a.AddressType)
                    .Where(c => c.ContactId == contactId)
                    .Select(c => new Contact()
                    {
                        ContactId = c.ContactId,
                        Title = c.Title,
                        FirstName = c.FirstName,
                        Surname = c.Surname,
                        Addresses = c.Addresses.Where(a => a.IsPrimary).ToList()
                    })
                    .SingleOrDefault();

我想解决的多个问题是：

1。主要问题防止裁剪背景图形。图像是螺旋/圆形，我希望看到完整的螺旋直到它到达其父级的边缘。所以，最终它确实会被裁掉到达容器div边界，但不是在缩放时起来。这甚至可能吗？我尝试了各种组合溢出属性，但我必须在#box上有位置：relative 格。

2. 最终的旋转度是否必须完成点？我只想将图像从开始转到大约40度完成，但我不想在结束时突然跳起来因此，为什么我开始在320度旋转并完成 360度，所以最后没有突然跳跃。虽然这不是在这里工作。由于某种原因，它最终跳到全面。

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

如果一个问题的问题点太多，请道歉。 1号是我现在的主要问题。感谢能够帮助我解决这些问题的任何人。

Answer 1

这是解决方案

裁剪问题：

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

标题问题：

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

跳跃问题

设置animation-fill-mode: forwards

<强> Updated Fiddle

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

1 个答案: