Question

我正在尝试了解网站like this one如何能够移动其图像并使用代码创建动画。

我有基本的HTML / CSS知识，通过查看他们的code，我发现他们的像素不断变化。下面的图片显然没有显示出来，但是我想知道他们如何做到这一点，以便其翻译像素不断变化？它在某处涉及一个javascript文件吗？如果是这样，那它在哪里？

Answer 1

方法1：

使用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";

Answer 2

我正在尝试学习像这样的网站如何能够移动其图像并使用代码创建动画。

通常，动画主要由CSS驱动。事实证明，与使用JavaScript创建的动画相比，CSS的性能要高得多，并且它们也更易于实现，因此将CSS用于动画是一种最佳实践。

我想知道他们是如何做到的，以便其翻译像素不断变化？

正如回答者Caleb H.所述，您可以使用关键帧来实现Stripe使用纯CSS所做的效果。您应该read more about CSS animations here。

如果仔细看一下Stripe的代码，您会发现元素使用translate CSS函数将元素从屏幕外向右（X轴2800px）移到屏幕外。左（X轴上为-200px）。

绝对可以使用keyframes实现！这是一个简单的示例，该示例会将框稍微移出屏幕向左移到非常右侧的某个位置。运行下面的代码片段以查看工作示例。

    Schema::create('categories', function (Blueprint $table) {
        $table->increments('id');
        $table->string('name');
        $table->timestamps();
        $table->engine = 'InnoDB';
    });

    Schema::create('images', function (Blueprint $table) {
        $table->increments('id');
        $table->string('name');
        $table->integer('user_id')->unsigned();
        $table->foreign('user_id')
            ->references('id')
            ->on('users')
            ->onDelete('cascade');
        $table->integer('category_id')->nullable()->default(null)->unsigned();
        $table->foreign('category_id')
            ->references('id')
            ->on('categories')
            ->onDelete('cascade');
        $table->string('image_file_name');
        $table->timestamps();
        $table->engine = 'InnoDB';
    });

@keyframes stripeScroll1 {
  0% {
    transform: translateX(-100px); 
  }

  100% {
    transform: translateX(2000px); 
  }
}

@keyframes stripeScroll2 {
  0% {
    transform: translateX(0px); 
  }

  100% {
    transform: translateX(2100px); 
  }
}

.box-1 {
  background-color: blue;
  
  animation-duration: 60s;
  animation-name: stripeScroll1;
  animation-iteration-count: infinite;
}

.box-2 {
  background-color: pink;
  
  animation-duration: 60s;
  animation-name: stripeScroll2;
  animation-iteration-count: infinite;
}

.box-1, .box-2 {
  width: 50px;
  height: 50px;
  margin: 20px;
}

它在某处涉及一个javascript文件吗？如果是这样，那它在哪里？

Stripe似乎正在使用JavaScript来快速调整CSS位置（毫无疑问，使用诸如React或Angular之类的JavaScript框架），这就是为什么您看到数字不断变化的原因，但是不幸的是，您将无法阅读JavaScript代码在大多数现代网站（如Stripe's）上进行编码，因为它们在打包生产时会经历minification。

尽管如此，关键帧还是实现初学者友好的方法。

如何使用代码

2 个答案: