Question

我发现CSS过渡效果很好，可以将鼠标悬停在上面，但只能将鼠标悬停在上面。 CSS有没有办法使这种情况在负载时不会悬停？

color: #FF0000;
display: inline-block;
background-color: #fff;
background-position: 0 100%;
padding-left: 10px;
padding-right: 10px;
-webkit-transition: background-position 1s ease-in 1s;
-moz-transition: background-position 1s ease-in 1s;
transition: background-position 1s ease-in 1s;

Answer 1

仅在使用特定资源的确切时刻之前，无法单独使用CSS来延迟动画/过渡效果的执行/应用。但是，可以使用JavaScript来完成此操作，但这仍然很棘手，因为没有load / onload事件用于背景图像加载（afaik）。

但是您可以利用浏览器的缓存机制：如果资源在页面中多次使用，则资源加载不会超过一次（除非在非常特殊的情况下，这不是默认情况，因此请不要在此处应用））。

因此解决方案是将元素的背景图片用作src的{{1}}，并在该<img>的{{1}}事件内触发动画。

概念证明：

onload

<img>

关键部分是：

URL 完全相同相同
body { margin: 0; min-height: 100vh; background: #ccc url('https://s22849.pcdn.co/wp-content/uploads/2016/10/placeholder-large-1.png') no-repeat center 0; transition: background-position 1s cubic-bezier(.4,0,.2,1); } body.loaded { background-position: center center; } .placeholder { height: 0; }的高度为<script type="application/javascript"> function moveBackground() { document.body.classList.add('loaded'); }</script> <img src="https://s22849.pcdn.co/wp-content/uploads/2016/10/placeholder-large-1.png" onload="moveBackground()" class="placeholder" />（因此不会显示）。

一种更干净的方法是 ，根本不用将<img>添加到DOM 。

在更改0的{{1}}属性时，即使尚未将其添加到文档对象模型中，浏览器也会加载它。一旦浏览器准备好渲染<img>事件，src仍将在该<img>上触发（这意味着立即缓存已缓存的图像）。

因此，您所需要做的就是创建一个onload，将其<img>设置为元素的当前<img>（剥去周围的src），并在其{{ 1}}事件触发动画。在我们的例子中，这是通过向元素添加backgroundImage类来完成的。

url()

onload

如果您无法在项目中实现上述功能，请提供更多代码（我将为您展示如何针对特定情况进行操作）。

您可以测试，动画总是在图像加载后执行。（在隐身窗口或禁用缓存的情况下进行测试）。

一个更好的测试方法是使用一个损坏的URL（当元素具有loaded类时，它会变得很明显-我为其添加了红色边框）。由于找不到资源，因此永远不要应用const element = document.body, src = window.getComputedStyle(element).backgroundImage.slice(4, -1).replace(/"/g, ""); if (src && src.length) { const img = document.createElement('img'); img.onload = () => element.classList.add('loaded'); img.src = src; }类，也不应执行动画。

最后，在4秒钟后，让我们在元素上放置一个有效的body { margin: 0; min-height: 100vh; background: #ccc url('https://s22849.pcdn.co/wp-content/uploads/2016/10/placeholder-large-1.png') no-repeat center 0; transition: background-position 1s cubic-bezier(.4, 0, .2, 1); } body.loaded { background-position: center center; }，再次运行例程，看看背景动画是否正确：

loaded

loaded

Answer 2

如果您使用的是CSS3关键帧，这将起作用，例如：

#banner-message {
  padding: 20px;
  width: 300px;
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg');
  background-color: #9ff;
  animation: animate-background linear 15s infinite;
}

@keyframes animate-background {
	from { background-position: 0px 0px; } 
	to { background-position: 300px 0px; }
}

<div id="banner-message">
  <p>Hello World</p>
</div>

注意我们如何在动画背景规则中调整css属性。然后，我们只是在背景容器的CSS规则中调用它。

您基本上可以使用此方法来调整任何CSS3样式。

加载时CSS背景颜色过渡/滑移

2 个答案: