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

Posted 2023-03-08

【中文标题】图像在浏览器刷新时从左侧滑入/滑出[关闭]

【英文标题】：Image slide in/out from left with time on browser refresh [closed]

【发布时间】：2018-07-28 10:28:37

【问题描述】：

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

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 并具有有效链接。

【问题讨论】：

链接失效。

它的工作@George Daniel

尝试注销并查看该链接是否适合您。或者尝试其他浏览器。它不起作用。

无需登录此 URL，我还检查了不同的浏览器和隐身模式。它的工作。

@Georage 为什么投反对票？ :( 链接在所有浏览器中都适用于我。

【参考方案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 结构。您只需将过渡/动画添加到子元素即可获得您在示例页面上看到的效果。您将使用过渡延迟和动画延迟。

【讨论】：

我只是在寻找与给定 URL 相同的动画。这是我的结构...

在代码上使用快捷键Ctrl+K来格式化。