按钮上的Flash输入文本框背景单击

时间:2017-02-14 00:35:37

标签: css css3

我有一个输入文本框和一个按钮元素。我希望文本框背景颜色淡入淡出,只需单击一下按钮即可淡出。

HTML

<input type="text">
<button>Click</button>

CSS

input{
   transition: background-color 0.1s ease-in-out 0s;
}
input:target{
    background-color: red;
}

我无法弄清楚如何在按钮点击时触发动画。

这是所需效果的GIF

http://i.imgur.com/3CNllvP.gif

编辑最初我问过在没有javascript的情况下完成此操作,但似乎无法实现。

2 个答案:

答案 0 :(得分:2)

在点击时切换一个类,并使用与该类关联的animation来执行闪光效果。

不确定为什么这在我的评论中不起作用,但这是一个代码笔 - http://codepen.io/anon/pen/BpMpYe

var button = document.getElementById('button'),
    input = document.getElementById('input'),
    flashClass = 'flash';

button.addEventListener('click',function() {
  input.classList.add(flashClass);
});

input.addEventListener('animationend',function() {
  this.classList.remove(flashClass);
});
.flash {
  animation: flash .15s;
}

@keyframes flash {
  50% {
    background: green;
  }
  100% {
    background: transparent;
  }
}
<input id="input" type="text">
<button id="button">Click</button>

答案 1 :(得分:1)

请在JSFiddle:https://jsfiddle.net/9j826bcb/5/

上尝试这个工作示例

我在这里使用了CSS3动画。

@keyframes highlight {
  50%  {background-color: green;}
  100% { background-color: white; }
}

input {
  outline: 0;
}

input.active {
  background-color: white;
  animation-name: highlight;
  animation-duration: .1s;
}

input.final {
  border:1px solid green;
}

input.final::selection {
  background: green;
}

input.final::-moz-selection {
  background: green; 
}

另外,请注意,您必须将jQuery包含在项目源中,然后触发“点击”。动作:

$('button').on('click', function() {
  setTimeout(function() {
    $('input').addClass('active');
  }, 100);

  $('input').removeClass('active').addClass('final').trigger('focus').select();
});