放大缩小单词 css

Question

我正在尝试制作一个可以放大缩小文字的 WordCloud。我正在使用 JavaScript 随机设置 CSS 来缩放单词，但是单词只是消失然后出现。

这是我的CSS代码：

svg text.zoom {
   /* Webkit for Chrome and Safari */
  -webkit-transform: scale(1, 1); /*This is the scale for the normal size of the image. */
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-in-out;

  /* Webkit for Mozila Firefox */
  -moz-transform: scale(1, 1);
  -moz-transition-duration: 0.5s;
  -moz-transition: ease-in-out;


  /* Webkit for IE( Version: 11, 10 ) */
  -ms-transform: scale(1, 1);
  -ms-transition-duration: 0.5s;
  -ms-transition-timing-function: ease-in-out;
}

有人可以帮忙吗？

Answer 1

看来您错过了标准转换属性。尝试添加以下 CSS 代码

svg text.zoom{
    transition: all 0.5s ease-in-out;
}

希望对您有所帮助

放大缩小单词 css

Zoom in out of Words css

html

javascript

css

zooming

css-transitions