Question

我正在尝试在该文本下面创建边框，当用户在页面上时，会自动显示更浅和更深灰色的脉冲。我尝试在我的CSS中使用webkit动画，但我没有太多的经验，它似乎没有工作。这是我的代码：

代码：

<a onclick="myFrame.style.opacity=1-myFrame.style.opacity">
    Click here to toggle it
</a><br />
<iframe id="myFrame" src="" style="opacity: 0"></iframe>
<link rel="prefetch" href="http://jquery.com/"
      onload="myFrame.src=this.href" media="bogus" />

$(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;
}

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

Answer 1

CSS规则border上没有设置.style。动画仅适用于它们所在元素的属性。您必须在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>

Answer 2

我更新了你的小提琴，让它无限眨眼。 https://jsfiddle.net/3oshp7v0/3/ 我已将您的代码更改为：

    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;
}

.blink_me p{
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;

    -moz-animation-name: blinker;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;

    animation-name: blinker;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@-moz-keyframes blinker {  
    0% { opacity: 1.0; border-color:red;}
    50% { opacity: 0.0; border-color:blue;}
    100% { opacity: 1.0; border-color:green;}
}

@-webkit-keyframes blinker {  
    0% { opacity: 1.0; border-color:red;}
    50% { opacity: 0.0; border-color:blue;}
    100% { opacity: 1.0; border-color:green;}
}

@keyframes blinker {  
    0% { opacity: 1.0; border:red}
    50% { opacity: 0.0; border-color:blue}
    100% { opacity: 1.0; border-color:green}
}

可以将类blink_me p应用于鼠标悬停，只有在鼠标悬停时才会闪烁。

请参阅。另请注意，要使动画在跨浏览器中正常工作，您必须定义特定于浏览器的CSS。提供的一个不适用于Internet Explorer。为此，你必须用javascript编写。

https://www.kapadiya.net/snippets/how-to-make-blinking-flashing-text-with-css3-and-jquery/

Answer 3

这是典型的css-hack。尝试伪元素：

p{
    position: relative;
}
p:before{
    content: '';
    position: absolute;
    bottom: -1px;
    width: 100%;
    height: 1px;
    animation: bdColor 1s ease-out infinite alternate; 
}
@keyframes bdColor{ 
    0% { background-color: red; }
    50% { background-color: blue; }
    100% { background-color: green; } 
}

如何让边框无限期地切换颜色？

3 个答案: