图像在浏览器刷新时从左侧滑入/滑出[关闭]

Question

实际上我正在尝试创建动画横幅广告，就像这样......

https://adwords.google.com/aw_displayads/creatives/ExternalPreview?hl=en_US&ad=216127501651&adGroup=50971776412&ocid=141653320&isObfuscatedOcid=false&showMulPreview=true&showVariations=true&creativeType=19&pk=null&sig=ACiVB_ywiD3ua55vbxNzKFKx8nZYtGWJPw

请指导我如何做到这一点，我有 PSD，需要将它们转换为动画横幅广告 HTML。 并确保广告符合 google adwords 并具有有效链接。

Answer 1

我设法调出页面。很可能因为您的“问题”含糊不清而被否决了。

我不确定是否有关于这个特定主题的指南，但我会告诉你如何创建类似的效果。

让我们首先讨论页面上的元素。

• 一张图片
• 一些文字，“你的社会工作......”
• 了解更多按钮
• 从左/右进入的蓝框

这里的物品不多。很可能它们都包含在一个 div 中。在那个 div 中，我们可以假设有以下内容：

• 背景图片
• 蓝色框的 6 个子 Divs
• 文本“您的社会工作...”的另一个子 div
• “了解更多”按钮的另一个子 div（这不是真正的按钮）

整个 div 本身就是一个链接，所以这很容易。这应该需要大约 5 分钟来复制，但这是我们正在查看的整体结构：

<a href="www.somelink.com">
    <div>
        <div></div> // 6 blue boxes
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>

        <div><p>Your social work...</p></div> // text

        <div>Learn More</div> // Fake button
    </div>
</a>

本质上，这是您的 HTML 结构。您只需将过渡/动画添加到子元素即可获得您在示例页面上看到的效果。您将使用过渡延迟和动画延迟。