Question

我需要创建框阴影的“脉冲”动画。我知道诀窍：之后，但它不适用于输入，因为它是自闭元素。这是我的代码示例。如果可能的话我想在css / less中解决它并尝试不使用js。我忘了补充一点，我有一些包装结构，我不能改变它。结构就像 “form＆gt; div＆gt; input”。如果输入被聚焦，我需要添加该动画。

.elem {
  border: 2px solid black;
  width: 150px;
  height: 50px;
  margin: 30px;
  line-heiht: 50px;
  font-size: 42px;
}

@keyframes pulseGreenShadow {
  from {
    box-shadow: 3px 3px 5px green
  }
  to {
    box-shadow: 1px 1px 0px green
  }
}

.elem:focus {
  animation: pulseGreenShadow 1s ease-in-out infinite alternate-reverse;
}

<input class="elem">

http://jsfiddle.net/SkylinR/cowzb1hg/227/

提前获得任何帮助

Answer 1

看看这对你有好处：

＆＃13;

input {
	border: 1px solid lightgray;
	height: 40px;
	padding: 0 10px;
	width: 200px;
}

input:focus {
	animation: glow 800ms ease-out infinite alternate;
	outline: none;
}


@keyframes glow {
    0% {
		box-shadow: 0 0 5px rgba(0,255,0,.2);
    }	
    100% {
		box-shadow: 0 0 20px rgba(0,255,0,.8);
    }
}

＆＃13;

<input type="text">

＆＃13;

Answer 2

我有一些问题的解决方案。我已经添加了盒子阴影等div和动画不是盒子阴影，但是不透明度:)它工作正常（如果我将包装形式，那么我仍然无法检测对输入的焦点，这是一个问题）

＆＃13;

.parent{
  width: 150px; 
  height: 50px;
  margin: 30px;
  position: relative;
}
.elem{
  border: 2px solid black;
  width: 150px; 
  height: 50px;
  line-heiht: 50px;
  font-size: 42px;
}
@keyframes pulseGreenShadow {
    from {opacity: 0}
    to {opacity: 1}
}
.elem:focus +.pulse-shadow:after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;  
  width: 150px; 
  height: 50px;
  opacity: 1;
  box-shadow: 5px 5px 10px green;
  animation: pulseGreenShadow 1s ease-in-out infinite alternate-reverse;
  border: 2px solid green;
  outline: 0;
}

＆＃13;

    <div class="parent">
      <input class="elem"> 
      <div class="pulse-shadow"></div>
    </div>

＆＃13;

输入中框阴影的平滑动画

2 个答案: