代码之家 › 专栏 › 技术社区 › catandmouse

鼠标离开时悬停动画抖动(使用CSS转换和变换)

css-transforms css-transitions svg css

catandmouse · 技术社区 · 6 年前

<svg viewBox="-5 -5 50 50">
    <circle cx="20" cy="20" r="20" />
    <path d="M20,31 C15.4189994,27.2225585 12.5023327,24.2225585 11.25,22 C10.2743515,20.6156479 10,19.6181623 10,18.1428571 C10,15.5113854 12.4883456,13 15,13 C17.3176009,13 18.9621484,13.8491346 20,15.5714286 C21.0382977,13.8491346 22.6828452,13 25,13 C27.5116544,13 30,15.5113854 30,18.1428571 C30,19.6181623 29.7256485,20.6156479 28.75,22 C27.497816,24.2225585 24.5811493,27.2225585 20,31 Z" />

circle {
    fill: #EEE;
    -webkit-transition: -webkit-transform .1s ease-in-out; 
    -moz-transition: -moz-transform .1s ease-in-out; 
}

path {
    fill: #CCC;
}

svg:hover circle {
    transform: scale(1.15);
    -ms-transform: scale(1.15);
    -webkit-transform: scale(1.15);
    transform-origin: center center;
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
}

https://codepen.io/aguerrero/pen/EeXJRx

1 回复 | 直到 6 年前

VXp Kadir BuÅ¡atliÄ 6 年前

移动 transform-origin 属性内部的一般规则 circle 要素 :hover :

circle {
  fill: #EEE;
  -webkit-transition: -webkit-transform .1s ease-in-out; 
  -moz-transition: -moz-transform .1s ease-in-out;
  transform-origin: center center;
  -webkit-transform-origin: center center;
  -ms-transform-origin: center center;
}

path {
  fill: #CCC;
}

svg:hover circle {
  transform: scale(1.15);
  -ms-transform: scale(1.15);
  -webkit-transform: scale(1.15);
}

<svg viewBox="-5 -5 50 50">
  <circle cx="20" cy="20" r="20" />
  <path d="M20,31 C15.4189994,27.2225585 12.5023327,24.2225585 11.25,22 C10.2743515,20.6156479 10,19.6181623 10,18.1428571 C10,15.5113854 12.4883456,13 15,13 C17.3176009,13 18.9621484,13.8491346 20,15.5714286 C21.0382977,13.8491346 22.6828452,13 25,13 C27.5116544,13 30,15.5113854 30,18.1428571 C30,19.6181623 29.7256485,20.6156479 28.75,22 C27.497816,24.2225585 24.5811493,27.2225585 20,31 Z" />
</svg>

推荐文章

Ancross · 为什么我的小CSS动画不会触发?

2 年前

Jorge · :before和:after伪元素以接收过渡效果

6 年前

Arsalan Khattak · 线性渐变过渡

6 年前

Albert qerimi · 将鼠标悬停在具有CSS变换比例的div上后添加动画

6 年前

Paul · 悬停时变换比例不缩放

6 年前

Willem van der Veen · CSS转换结合JS clickEvent

6 年前

Shanmugaraja_K · 在切换按钮中添加动画

6 年前

klode · 使用伪元素更改css转换类

6 年前

SmallTown NE · 为什么带转换的转换会导致整个页面重新绘制?

6 年前

Run · 如何使用动画限制每行的项目?

6 年前