如何使用由用户输入触发的 CSS / jquery 对突出显示的文本进行非常短的放大缩小效果?

Question

我正在寻找一种方法，如何使用CSS和jquery对突出显示的文本进行非常短的放大缩小效果。

背景：在一个网站上，我有一个搜索输入框。当用户输入符号时，结果会自动显示(无需按 Enter 键(。在这个结果中，我们用 CSS 样式</b><b>标签标记字符串的找到部分：

Example:
Search input: {empty}     Result: code
Search input: c           Result: <b>c</b>ode
Search input: co          Result: <b>co</b>de

基本上，我希望在用户输入符号时实现短暂的放大缩小效果，以便有视觉反馈。

我有一个每次执行的函数，用户在搜索框中输入一个符号。唯一缺少的部分是可以在此类函数中执行的动画的 CSS/jquery。

用于<b>标记的 CSS 代码</b>突出显示：

.title.horizontal-line b {
background-color:#FCFE9A;
border-radius: 5px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

Answer 1

下面是一个最小的例子。阅读有关 css 动画的更多信息。

$('input').on('input change',function() {
$('.output').html(`<b>${$('input').val()}</b>de`);
})

b {
animation-duration: 0.5s;
animation-name: grow;
}
@keyframes grow {
0%   {font-size: 100%;}
50%  {font-size: 150%;}
100% {font-size: 100%;}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
enter some text:<input type="text"/>
<div class="output"></div>

@Abinthaha使用transform:scale的解决方案不适用于我的标记，因为您无法将其应用于内联元素。如果您出于某种原因更喜欢它，只需将动画元素更改为block或inline-block：

$('input').on('input change',function() {
$('.output').html(`<b>${$('input').val()}</b>de`);
})

b {
animation-duration: 0.5s;
animation-name: grow;
display:inline-block;
}
@keyframes grow {
0%   {transform: scale(1.0, 1.0);}
50%  {transform: scale(1.2, 1.2);}
100% {transform: scale(1.0, 1.0);}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
enter some text:<input type="text"/>
<div class="output"></div>

Answer 2

您可以使用 CSS3 动画使其工作，如下所示：

.title.horizontal-line b {
background-color:#FCFE9A;
border-radius: 5px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
animation-name: zoom;
animation-duration: 4s;
}
@keyframes zoom {
0%   {transform: scale(1.0, 1.0);}
50%  {transform: scale(1.1, 1.1);}
100% {transform: scale(1.0, 1.0);}
}

如您所说，这将添加具有放大和缩小效果的动画。现在，此值设置为 4 秒。这意味着，它将在前两秒放大，在接下来的 2 秒缩小。 要缩短延迟，请缩短时间。 如果要多次重复相同的操作，则有一个名为animation-iteration-count。其值可以从1, 2, 3, .., infinity.