有谁知道如何进行 css 转换？

Question

我正在绞尽脑汁想弄清楚如何使用 css 过渡或动画制作此网站的导航栏：http://tabu.realitatea.net/ .

有人知道怎么做吗？甚至给我一个起点？

Answer 1

做起来很有趣，看看吧。 https://jsfiddle.net/6brsm2zt/

JS

var slider = $('#slider');

$('div').on('mouseenter','a',function(){
  var box = $(this);
  var p = box.position();
  slider.animate({
    width: box.outerWidth(),
    left: p.left,
  },250);
})

$('div').on('mouseleave','a',function(){
  slider.stop();
})

$('div').on('mouseleave',function(){
  $('#slider').animate({
    width: 0,
    left: 0,
  },200);
})

基本思路是在左边有一个零宽度 div，我们称它为滑块。当您将鼠标悬停在某个项目上时，您将滑块的宽度和左侧位置设置为等于该项目的宽度和左侧位置。动画持续时间很短，大约三分之一秒，给人一种反应灵敏的感觉。

当您将鼠标完全移出栏时，只需将滑块的宽度和左侧位置设置为 0，持续时间较短，比如 200 毫秒，它就会缩小到一侧。

一个棘手的部分是来回挥动鼠标。最初，div 会为每个项目播放过渡，让我等待滑块最终来到我的鼠标。我通过在鼠标离开某个项目时取消动画来解决这个问题。由于项目之间的鼠标事件顺序是 mouseenter -> mouseleave -> mouseenter，我已经准备好了 mouseenter 的过渡。现在滑块将无情地追逐你的鼠标 :D.

有谁知道如何进行 css 转换？

does anyone know how to do this css transition?

css

css-transitions