怎么改变输入文本时改变文本框光标闪烁的效果，变成阴影闪烁？
搞了半天也不会上传目标效果图，就类似于neo4j中的搜索框的闪烁效果，有大神帮忙解答一下吗qaq
这样的效果？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
:root{
--color: #333;
}
#inputDiv {
margin: 50px;
border: 1px solid #333;
width: 204px;
height: 30px;
/* 荧光 */
animation: san 4s linear infinite;
}
#input {
background-color: transparent;
border: none;
height: 29px;
width: 200px;
}
@keyframes san{
0%, 100%{
box-shadow: 0 0 5px var(--color), 0 0 15px var(--color), 0 0 25px var(--color), 0 0 50px var(--color);
}
50%{
box-shadow: none;
}
}
</style>
</head>
<body>
<div id="inputDiv">
<input type="text" id="input" oninput="change()">
</div>
<script type="text/javascript">
// 监听 给我变
function change() {
let inputValue = document.getElementById('input').value;
let root = document.documentElement;
console.log(inputValue)
if (inputValue) {
root.style.setProperty('--color', '#f00');
if (inputValue.indexOf('变') != -1)
root.style.setProperty('--color', '#00f');
} else {
root.style.setProperty('--color', '#333');
}
}
</script>
</body>
</html>