Question

尝试重新创建此https://www.apple.com/apple-card/动画，该动画会在您加载页面后开始（背景图像从上方逐渐减弱）。听起来真是愚蠢，但我实际上无法找到Apple在css或js中都不使用的渐变图片，也无法通过在Chrome中使用F12>网络>过滤IMG来找到渐变图片。尽管我确实相信此图片是从js加载的，因为如果在浏览器中禁用js，则会替换为另一张图片。

如果有人能将我指向正确的方向，图像位于何处以及如何制作从上方逐渐消失的动画，我将非常感激。

Answer 1

A） CSS可以进行模糊处理，如果您制作的图像很小，例如随机颜色只有5x4像素，则该图像在{{ 1}}和100%作为height的背景，并对其进行严重模糊处理，结果可能看起来相似。但是模糊并非在所有浏览器上都有效，因此您需要针对不支持的浏览器的后备解决方案。

B）也可以在width中定义线性渐变。从理论上讲，但我以前从未尝试过，我们可以使用DIV通过CSS动画/过渡制作多个渐变DIV，使色差最小，彼此叠加

下面的代码段需要进行更多的调整，因为它不能在所有可能的奇怪情况下都适用于浏览器，并且在代码段视图内也存在一些填充偏移，纯HTML格式中看不到该偏移量，因为在代码段中缺少body标记片段。但是，您要求获得一些指导。希望您可以优化此代码并与社区分享您的结果。据我所知，它确实可以在macOS Safari中使用。 Firefox和Chrome仍然直接跳到过渡的结尾。所以祝您调整愉快！

opacity

CSS

function startTransitions() {
  document.getElementById('gradient-top-left').style.opacity = "0.1";
  document.getElementById('gradient-top-right').style.opacity = "0.1";
  document.getElementById('gradient-bottom-left').style.opacity = "0.1";
  document.getElementById('gradient-bottom-right').style.opacity = "0.1";
  document.getElementById('colors').style.opacity = "1.0";
}

document.addEventListener('DOMContentLoaded', function() {
  startTransitions();
});

重新创建苹果卡渐变动画

1 个答案: