Javascript 如何使用代码在网站上设置图标/图像的动画

我试图学习网站如何能够移动他们的图像和创建代码动画

我有基本的HTML/CSS知识，通过观察它们，我看到它们的像素不断变化。下面的图片并没有很明显地显示这一点，但我想知道他们是如何做到这一点的，这样他们的平移像素就会不断变化？它是否涉及某个javascript文件？如果是，它位于哪里？

方法1：

使用CSS，您可以使用

@keyframes

关键字创建动画

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

img {
    animation: myAnimationName;
}

方法2：使用JavaScript

（一点CSS）

JS:

我试图了解像这样的网站是如何能够移动他们的图像和创建代码动画

通常，动画主要由CSS提供支持。事实证明，CSS比使用JavaScript创建的动画性能更好，而且实现起来也更简单，因此将CSS用于动画被认为是最佳实践

我想知道他们是如何做到的，这样他们的平移像素就会不断变化

正如回答者Caleb H.所提到的，您可以使用关键帧来实现Stripe使用纯CSS所做的效果。你应该

如果仔细查看Stripe的代码，您会注意到元素使用CSS函数将元素从屏幕外向右移动（X轴上为2800px）到屏幕外向左移动（-X轴上为200px）

这完全可以通过使用来实现！下面是一个简单的例子，将一个框稍微移到屏幕左侧，移到离屏幕很远的地方。运行下面的代码段以查看工作示例

@关键帧条带滚动1{
0% {
转换：translateX（-100px）；
}
100% {
转换：translateX（2000px）；
}
}
@关键帧条纹滚动2{
0% {
转换：translateX（0px）；
}
100% {
转换：translateX（2100px）；
}
}
.框-1{
背景颜色：蓝色；
动画持续时间：60秒；
动画名称：StripeSroll1；
动画迭代次数：无限；
}
.方框-2{
背景颜色：粉红色；
动画持续时间：60秒；
动画名称：StripeSroll2；
动画迭代次数：无限；
}
.box-1、.box-2{
宽度：50px；
高度：50px；
利润率：20px；
}

简单的动画

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

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