Question

我是css转换属性的新手，但我正在努力学习并制作我的第一个动画。让我们说我做了我想要的，但有一个错误，但无法找到解决方法。

Jsfiddle的例子在评论中。

问题是当我悬停第一个div时，两个向下移动，当我悬停另一个时，它与另外两个div相同。只是想保持div固定。

我不确定我是否在制作动画或其他内容时出错了。

谢谢！

Answer 1

将float：left应用于.social-media a并删除display：inline-block。当动画发生时，内联块样式会将元素向上推。

  .social-media a
  {
   float:left;
  }

这是小提琴：https://jsfiddle.net/6a0zon6c/4/

编辑包装所有其他div的div（.social-media）没有特定的高度。因此，如果将鼠标悬停在一个元素上，图标将移至顶部，使包装div的大小更大，而另一个元素与新的大小对齐，给人以“下降”的印象。例如，如果您为.social-media div设置固定高度并执行溢出：隐藏在该div上，您也可以反击移动效果。浮动绕过这个效果，因为浮动元素实际上并不在DOM的正常流中，而是向侧面（左或右），因此忽略父div的高度变化。

Answer 2

您唯一需要做的就是使锚点浮动，以便它们正确定位：

var fs = require('fs');
var Client = require('ssh2').Client;

var conn = new Client();
conn.on('ready', function() {
  console.log('Client :: ready');
  conn.shell(function(err, stream) {
    if (err) throw err;
    stream.on('close', function() {
      console.log('Stream :: close');
      conn.end();
    });
    stream.pipe(process.stdout);
    stream.stderr.pipe(process.stderr);
    process.stdin.pipe(stream);
  });
}).connect({
  host: '192.168.178.39',
  port: 22,
  username: 'root',
  privateKey: fs.readFileSync('/home/' + process.env.USER + '/.myKeys/id_rsa')
});

在https://jsfiddle.net/6a0zon6c/3/

查看更新后的JSfiddle

CSS动画转换qustion

2 个答案: