如何使图像在网页上从下到上移动答案

【问题标题】：How to make image to move from bottom to top on webpage如何使图像在网页上从下到上移动
【发布时间】：2015-03-06 21:20:05
【问题描述】：

我看到这个问题以前提出过，但对我没有太大帮助。

在我的网页上，我想要一个图像，一个小气球，从右下角慢慢向上移动，并停在我的徽标旁边的某个地方，只需一次。 http://www.butik.meisolle.com/

我在其他帖子中发现了一些代码，我也许可以对其进行更改以符合我的需要。但是把这段代码放在哪里呢？我有一个 Joomla 网站。我不是程序员，只是自己做的网站，过程有点长。

我什至不知道这是否可能:-)

/克里斯蒂娜

【问题讨论】：

能否链接到之前对你没有帮助的问题，并给出你想要的代码示例。查看 Joomla 文档应该会告诉您在哪里放置定制的 CSS / Javascript。尝试一些基本的 joomla 教程。
嗨 Ruskin 是的，我想我可以更改他得到的代码 stackoverflow.com/questions/13878451/…

标签： javascript css image joomla transition

【解决方案1】：

您希望热气球在页面加载后立即升起吗？

您应该可以使用 css animation 和 @keyframes 做到这一点：

HTML：

<div class="hotairballoon"></div>

CSS

.hotairballoon {
position:absolute;
top: 0;
left: 200px;
width: 100px;
height: 100px;
border-radius: 50%;
background: rgba(255,0,0,1);
animation: propel-balloon 10s linear;
}

@keyframes propel-balloon {

    0% {
    position:absolute;
    top: 500px;
    left: 1000px;
    }

    25% {
    position:absolute;
    top: 400px;
    left: 1000px;
    }

    50% {
    position:absolute;
    top: 250px;
    left: 900px;
    }

    75% {
    position:absolute;
    top: 100px;
    left: 400px;
    }

    100% {
    position:absolute;
    top: 0;
    left: 200px;
    }
}

注意我已经为 <div> 设置了样式

width: 100px;
height: 100px;
border-radius: 50%;
background: rgba(255,0,0,1);

为了举例，但您需要用正确的图像尺寸替换 width: 和 height: 值，删除 border-radius: 声明并替换

background: rgba(255,0,0,1);

类似：

background: url('/path/to/hot-air-balloon-image.png') 0 0 no-repeat;}

【讨论】：

嗨 Rounin 是的，您访问我的网站时只有一次 :)，但是将这段代码放在哪里？在我的css文件中？附言。我可以看到有人给了我一个减号，因为我没有对此进行研究。我真的已经这样做了，这不公平 :-( 我只是不知道如何编写这段代码，因为我说过我不是程序员，只是一个愚蠢的新手。
我认为你应该忽略 StackOverflow 上的任何问题，@sky - 我不相信有这样一个“坏”问题。不用担心不是程序员！自 1997 年以来我一直在编写网站，我不会将自己称为程序员。是的，CSS 只是在 CSS 文件中！
您好，我从模板设置中添加了代码。但现在我得到了一个空白的网站。有什么想法可能会出错吗？我将宽度更改为我的图像设置。和背景 url 到 url('/images/hotairballoon.png')
如果您现在有一个空白网站，则您的 .css 文件中可能存在语法错误，或者您的样式冲突。为避免任何样式冲突，请将上述样式（至少暂时）放在样式表的最后。然后搜索您的 .css 文件以查找语法错误。