html - CSS 边框动画适用于整个 Div 内容

Question

我有一个带边框的 div，里面有表单。我决定为边界设置动画，这样它就会跳动。我的代码:

<div class="main">
<div class="border">

-Text Here-

</div>
</div>

我的 CSS:

@keyframes pulse {
  0% { opacity: 0;  animation-timing-function: ease-in;}
  20% { opacity: .2; animation-timing-function: ease-in;}
  40% { opacity: .4; animation-timing-function: ease-in;}
  45% { opacity: .8; animation-timing-function: ease-in;}
  50%% { opacity: 1; animation-timing-function: ease-in;}
  50%% { opacity: 1; animation-timing-function: ease-out;}
  55% { opacity: .8; animation-timing-function: ease-out;}
  60% { opacity: .4; animation-timing-function: ease-out;}
  80% { opacity: .2; animation-timing-function: ease-out;}
  100% { opacity: 0; animation-timing-function: ease-out;}
}

.border {
  border-radius: 25px;
  border: 8px solid #2C3E50;
  animation-name: pulse;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}  

.main{
  padding: 50px;
  width: 500px;
  height: 500px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

问题是动画适用于 div + 边框的全部内容，我希望它只适用于边框而不是其中的内容。我知道这可能很容易解决，但我不擅长 CSS。

此外，当用户单击 div 内的任意位置时我将如何启动动画，即使在 div 外部单击时也继续播放。提前致谢。

Answer 1

不要使用会影响整个 div 的 opacity，而是使用 border-color。 Fiddle .

@keyframes pulse {
        0%   { border-color: rgba(0, 255, 255, 1); }
        50%  { border-color: rgba(0, 255, 255, 0); }
        100% { border-color: rgba(0, 255, 255, 1); }
}

.border {
  border-radius: 25px;
  border: 8px solid #2C3E50;
  animation: pulse 2s infinite;
}  

如果你想在点击特定的 div 时打开和关闭，你可以使用如下函数切换类:

function changeclass() {
   var blah = document.getElementById("border")
   if (blah.className=="border"){
       blah.className = "";
   }
   else{
       blah.className="border";
   }
} 

您的 html 将是:

<div class="main">
<div id="border" onclick="changeclass()">
-Text Here- 
</div>
</div>

如果你想在点击内部时打开，然后在页面上的任何地方点击时关闭，然后像这样向文档添加一个事件监听器:

document.addEventListener('click', function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;   
        if (target.className == "border"){
            target.className = "";
        }
        else{
            document.getElementById("border").className = "border";
        }
}, false);

您的 html 将是:

<div class="main">
<div id="border">
-Text Here-
</div>
</div>

不透明度是 rgba 中的第 4 个位置，因此使用 0.0-1.0 作为值。越少越透明。