时间戳

首页 > 解决方案 > 如何使用代码为网站上的图标/图像设置动画

javascript - 如何使用代码为网站上的图标/图像设置动画

问题描述

我正在尝试了解像这样的网站如何能够移动他们的图像并使用代码创建动画。

我有基本的 HTML/CSS 知识，通过查看他们的代码，我看到他们的像素不断变化。下图没有明显显示，但我想知道他们是如何做到的，以便他们的平移像素不断变化？它是否涉及某个地方的javascript文件？如果是这样，它在哪里？

标签： javascripthtmlcss

解决方案

方法一：

使用 CSS，您可以使用@keyframes关键字创建动画。

@keyframes myAnimationName {
    from {
        transform:translate(0px,0px);
    }
    to {
        transform:translate(100px,100px);
    }
}

img {
    animation: myAnimationName;
}

方法 2：使用 JavaScript

（一点点CSS）

img {
    position:absolute;
    transition:1s;
    left:0px;
    top:0px;
}

JS：

var img = document.getElementById("myImg");
img.style.left = "100px";
img.style.top = "100px";

推荐阅读