时间戳

首页 > 解决方案 > 如何使用 CSS / jquery 对由用户输入触发的突出显示的文本进行非常短的放大缩小效果？

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

问题描述

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

背景：在一个网站上，我有一个搜索输入框。当用户输入符号时，结果会自动显示（无需按回车键）。在这个结果中，我们用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>标签</b>高亮的 CSS 代码：

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

标签： jquerycss

解决方案

这是一个最小的例子。阅读有关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 的 using 解决方案transform:scale不适用于我的标记，因为您不能将其应用于内联元素。如果您出于某种原因更喜欢它，只需将动画元素更改为blockor 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>

推荐阅读