javascript - 我怎样才能让边框无限期地切换颜色？

Question

我正在尝试在该文本下方制作边框，当用户在页面上时，这种边框会自动带有较浅和较深的灰色。我尝试在我的 CSS 中使用 webkit 动画，但我对此没有太多经验，而且它似乎没有用。这是我的代码:

代码:

$(document).ready(function() {

  var exceptions = ["Bulls", "rhymes,", "spin", "blinding", "pinched", "oxygen", "tendrils", "exact", "agreement", "combination", "swallow", "smiles",
    "mirror", "treehouse", "project", "dwindling", "laughing", "fall", "stupor", "breaking", "skin", "untimely"
  ];

  $("p").each(function() { //for all paragraphs

    var txt = $(this).text() //get text, split it up, add spans where necessary, put it back together
      .split(" ")
      .map(function(x) {
        return exceptions.includes(x.toLowerCase()) ? x : "<span class='hover'>" + x + "</span>"
      }).join(" ");
    $(this).html(txt); //set the text to our newly manipulated text

  }).on("mouseover", ".hover", function() {

    $(this).addClass("hovering"); //set opacity to 100%

  }).on("mouseout", ".hovering", function() {
    $(this).attr("class", ""); //set opacity to 0%, remove "hover" events

  });
});

img {
  width: 3%;
  height: 3% opacity: 0.5;
}

.hover {
  opacity: 0;
}

.hovering {
  opacity: 1;
}

span {
  transition: opacity 0.5s;
  opacity: 0;
}

p {
  cursor: default;
  line-height: 200%;
  border-bottom: solid;
  border-color: rgb(50, 50, 50);
  color: white;
}

@-webkit-keyframes p {
  0% {
    border-color: red;
  }
  50% {
    border-color: blue;
  }
  100% {
    border-color: green;
  }
}

.story {
  -webkit-animation: p 10s infinite alternate;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="arrow.png">

<br>

<div class=s tory>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

https://jsfiddle.net/3oshp7v0/#&togetherjs=5SSB2yJSF6

Answer 1

CSS 规则.style 上没有设置border。动画仅适用于它们所在元素的属性。您必须在 p 元素(实际上有边框)上设置动画，或向 .story 元素添加边框。

p { /* p is the element that have the border, .story doesn't have it */
  cursor: default;
  line-height: 200%;
  border-bottom: solid;
  border-color: rgb(50, 50, 50);
  color: white;
}

@-webkit-keyframes p {
  0% { border-color: red; }
  50% { border-color: blue; }
  100% { border-color: green; }
}

p { /* set the animation on p which is the element that have the border */
  -webkit-animation: p 10s infinite alternate;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="story">
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>