如何让图片在网页上从下往上移动

Question

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

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

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

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

/克里斯蒂娜

Answer 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;
    }
}

N.B. 我用

设计了 <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;}

如何让图片在网页上从下往上移动

How to make image to move from bottom to top on webpage

javascript

css

image

joomla

transition