如何将动画放入带有 css 的带边框的 html 元素中，但又没有其边框动画？答案

【问题标题】：How can I put animation onto my bordered html element with css but NOT have it's border animate as well?如何将动画放入带有 css 的带边框的 html 元素中，但又没有其边框动画？
【发布时间】：2022-01-01 13:35:23
【问题描述】：

如何使用 css 将动画放到带边框的 html 元素上，但又没有边框动画？现在发生的事情是整个动画。代码如下：

.pageName{
   width: 14.0vh;
   padding: 1.5vh 1.5vh 1.5vh 3.5vh;
   font-family: Monaco;
   font-weight: bold;
   font-size: 2.0vh;
   color: #006400;
    margin: auto;
    animation: blinker 5s linear infinite;
    border-width: 0.5vh;
    border-style: double;
    border-radius: 1.0vh;
}

@keyframes blinker {
  50% {
    opacity: .25;
  }
}

<div class="pageName">Title Page</div>

谢谢！

【问题讨论】：

标签： html css animation

【解决方案1】：

您可以将文本分离并移动到span 中，然后将动画应用到span。请参阅下面的 sn-p。

<html>

<head>

  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />

  <style>
    body {
      padding: 0;
      margin: 0;
      font-family: sans-serif;
    }

    .pageName {
     
      width: 14.0vh;
      padding: 1.5vh 1.5vh 1.5vh 3.5vh;
      border-width: 0.5vh;
      border-style: double;
      border-radius: 1.0vh;
      color: #006400;
      margin: auto;
    }

    .pageName span {
      animation: blinker 5s linear infinite;
      font-family: Monaco;
      font-weight: bold;
      font-size: 2.0vh;
      color: #006400;
    }

    @keyframes blinker {
      50% {
        opacity: .1;
      }
    }
  </style>
</head>

<body>

  <div class="pageName"><span>Title Page</span></div>

</body>

</html>

由于某些原因，在代码 sn-p 编辑器中，布局变得混乱，但如果您复制标记并在本地运行它，它应该看起来与您设计的一样。

【讨论】：

【解决方案2】：

尝试使用容器包装您拥有的 div，并仅使用动画定位内部 div

.container {
    width: 14.0vh;
    padding: 1.5vh 1.5vh 1.5vh 3.5vh;
    font-family: Monaco;
    font-weight: bold;
    font-size: 2.0vh;
    color: #006400;
     margin: auto;
     border-width: 0.5vh;
     border-style: double;
     border-radius: 1.0vh;
}

.pageName{
   
     animation: blinker 5s linear infinite;
     
 }
 
 @keyframes blinker {
   50% {
     opacity: .25;

   }
 }

<div class="container">
    <div class="pageName">Title Page</div>
  </div>

【讨论】：