javascript - 使用 jQuery 为悬停时的 SVG 颜色和缩放设置动画

Question

我有一个我制作的图标，我正在尝试在悬停时更改颜色，并通过其当前位置左上角的原点将白色方形缩放 50%。

到目前为止，我可以在悬停进/出时更改正方形的颜色和比例，但我无法全神贯注地为其设置动画。 friend 们，有什么帮助吗？

My CodePen

Answer 1

我添加了这个 css3 transition，来设置缩放和背景变化的过渡时间:

.logo-square, .logo-bg{
  transition: 0.7s;
}

并使用此 jQuery 缩放框:(因为您使用的是 jQuery。注意:您可以使用 :hover 选择器在纯 CSS 中执行此操作)

$('.logo-square').css({
    '-webkit-transform': 'scale(0.6)',
    '-moz-transform': 'scale(0.6)',
    '-o-transform': 'scale(0.6)'
});

和(还原)

$('.logo-square').css({
    '-webkit-transform': 'scale(1)',
    '-moz-transform': 'scale(1)',
    '-o-transform': 'scale(1)'
});

使用 .css 而不是 .attr()

SAMPLE DEMO

更新:您可以使用纯 CSS 解决问题，使用 :hover 选择器

像这样:

.logo-square, .logo-bg{
  transition: 0.7s;
}

.bm-logo:hover > .logo-square{
   -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    -o-transform: scale(0.6);
}

.bm-logo:hover > .logo-bg, .bm-logo:hover > .logo-square{
  fill: #b565a7; 
}

SAMPLE DEMO - USING PURE CSS