小编Scr*_*thy的帖子

是否有任何缺点(除了更混乱的代码)在页面上使用空元素只是为了造型目的？

例如,使用<div>具有不同纹理背景图像的一些空s来固定在页面内容之后.

显而易见的是,您在技术上模糊了结构层和表示层之间的分离.如果我对它的这方面没问题,我只是想知道这是否构成任何SEO,性能或其他问题.

任何指向任何一个方向的链接或证据都会很棒!谢谢!

我正在尝试学习如何创建类似于此动画的内容：https : //dribbble.com/shots/5311359-Diprella-Login

所以目前我遇到的问题是当我的案例中的“绿色”或“蓝色”扩展>移动>收缩时，我无法使用“宽度”获得相同的效果，因为它从右侧收缩，我希望它从左侧收缩移动后的一侧。

附上我的 CodePen：https ://codepen.io/MariusZMM/pen/jJWebK

使用的JS：

var start = anime.timeline({
  easing: 'easeInOutSine',
  autoplay: false
});

start
  .add({
    targets: '.square',
    width: 600,
    duration: 500
  })
  .add(
    {
      targets: '.square',
      translateX: 400,
      duration: 500
    },
    '-=100'
  )
  .add({
    targets: '.square',
    width: 400,
    duration: 500
  });

document.querySelector('.btn').onclick = function() {
  start.play();
  if (start.began) {
    start.reverse();
  }
};

我也尝试过使用 Padding 但我认为 AnimeJS 不喜欢值 0 0 0 300px