Question

例如，如果您转到此link，它会暂时闪烁答案。

这是如何实现的？

这是一些bootstrap / css的事吗？

我试过谷歌搜索，但我不知道这个闪烁的高亮功能是什么。

Answer 1

您可以使用css animation实现此目的，请尝试以下操作

＆＃13;

div{
  width:100%;
  height:auto;
  animation:bg 2s ease-in;
  -webkit-animation:bg 2s ease-in;
  -moz-animation:bg 2s ease-in;
  -ms-animation:bg 2s ease-in;
  -o-animation:bg 2s ease-in;
}

@-webkit-keyframes bg{
  0%{
    background:rgba(255,165,0,1);
  }  
  20%{
        background:rgba(255,165,0,0.8);
  }
  50% 70%{
        background:rgba(255,165,0,0.5);
  }
  100%{
    background:rgba(255,165,0,0);
  }
}

@-moz-keyframes bg{
  0%{
    background:rgba(255,165,0,1);
  }  
  20%{
        background:rgba(255,165,0,0.8);
  }
  50% 70%{
        background:rgba(255,165,0,0.5);
  }
  100%{
    background:rgba(255,165,0,0);
  }
}

@-ms-keyframes bg{
  0%{
    background:rgba(255,165,0,1);
  }  
  20%{
        background:rgba(255,165,0,0.8);
  }
  50% 70%{
        background:rgba(255,165,0,0.5);
  }
  100%{
    background:rgba(255,165,0,0);
  }
}

@-o-keyframes bg{
  0%{
    background:rgba(255,165,0,1);
  }  
  20%{
        background:rgba(255,165,0,0.8);
  }
  50% 70%{
        background:rgba(255,165,0,0.5);
  }
  100%{
    background:rgba(255,165,0,0);
  }
}

＆＃13;

<div>
<p>
Dummy Content Dummy ContentDummy ContentDummy ContentDummy ContentDummy ContentDummy ContentDummy ContentDummy ContentDummy ContentDummy ContentDummy ContentDummy ContentDummy ContentDummy ContentDummy ContentDummy ContentDummy ContentDummy ContentDummy ContentDummy ContentDummy ContentDummy ContentDummy ContentDummy ContentDummy ContentDummy ContentDummy ContentDummy ContentDummy ContentDummy Content
</p>
</div>

＆＃13;

Answer 2

这可以通过css3动画来实现..

见这里的演示

＆＃13;

var answer=document.createElement('div');
answer.innerHTML='<div id="answer">\
 <h1>\
  My answer\
 </h1>\
</div>'
setTimeout(function(){document.body.appendChild(answer)},3000)

＆＃13;

@keyframes animate {
  from {
    background: transparent
  }
  50% {
    background: #f2e68e;
  }
  100% {
    background: transparent;
  }
}

@-webkit-keyframes animate {
  from {
    background: transparent;
  }
  50% {
    background: #f2e68e;
  }
  100% {
    background: transparent;
  }
}
@-o-keyframes animate {
  from {
    background: transparent;
  }
  50% {
    background: #f2e68e;
  }
  100% {
    background: transparent;
  }
}

#answer {
  animation-name: animate;
  animation-duration: 3s;
  animation-iteration-count: 1;
  -moz-animation-name: animate;
  -moz-animation-duration: 3s;
  -moz-animation-iteration-count: 1;
  -o-animation-name: animate;
  -o-animation-duration: 3s;
  -o-animation-iteration-count: 1;  
  -webkit-animation-name: animate;
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count: 1;
}

＆＃13;

<div>
Please wait I will inject this answer and hightlight it</div>

＆＃13;

Answer 3

这被称为黄色淡入淡出技术，对此已经存在一个问题：Yellow fade effect with JQuery这里还有一些关于此的更多信息：https://signalvnoise.com/archives/000558.php 要跳转到某个部分并突出显示它，您可以使用：target 有关此内容的更多信息，请访问：https://css-tricks.com/on-target/

Answer 4

这可以通过JavaScript实现。

var bgopacity = 1.0

var bgfade = function() {
  var comment = document.getElementById("comment");
  bgopacity -= 0.02
  comment.style.backgroundColor = "rgba(255, 242, 130, " + bgopacity + ")";
  if (bgopacity >= 0) {
    setTimeout(bgfade, 30);
  }
}

bgfade();

https://jsfiddle.net/Lpo92shj/

HTML / CSS如何暂时突出显示页面的一部分

4 个答案: