Question

我发现这个问题之前已经出现过，但它对我帮助不大。

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

我在其他帖子中找到了一些我可能会改变的代码，以满足我的需求。但是在哪里放这个代码？我有一个Joomla网站。我不是一个程序员，只是自己做了网站并且学了很长时间。

我甚至不知道这是否可行： - ）

/ Christina

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:声明并替换< / p>

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

有类似的东西：

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

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

1 个答案: