html - 单击链接时滚动到并突出显示 Div

Question

我试图突出显示包含联系表单的 div，以便用户知道去哪里联系。我的链接将是这样的

<a href="#form" class="contacthighlight">Contact Us</a>

上课，因为这将在两个地方的网站上使用。

现在#form的当前背景是#f5f5f5，所以我想做的是闪烁一个随机颜色，比如#ff0000，然后慢慢淡出到#f5f5f5

Answer 1

dabblet.com 上的演示

目标伪类应用于您滚动到的元素。将此添加到您的CSS：

CSS：

#form {
    background-color: #f5f5f5;
}

#form {
    background-color: #f5f5f5;
}

#form:target {
    animation: target-fade 1s 1;
}

@keyframes target-fade {
    0% { background-color: #ff0000; }
    100% { background-color: #f5f5f5; }
}

HTML 标记：

<a href="#form"> link to target #form</a>
<form id="form">
    …
</form>

PS： 根据caniuse.com CSS 属性：动画和关键帧需要供应商前缀，例如：

.box_animation:hover {
  -webkit-animation: myanim 1s infinite; /* value is demo only */
     -moz-animation: myanim 1s infinite;
       -o-animation: myanim 1s infinite;
          animation: myanim 1s infinite;
}

@-webkit-keyframes myanim {…}
@-moz-keyframes myanim {…}
@-o-keyframes myanim {…}
@keyframes myanim {…}

PPS： dabblet使用无前缀JS 库粘贴所有必要的前缀。稍后如果没有这个库，你可以在css3please上看到所有你需要的前缀语法

Answer 2

您可以使用 Ariel Flesler 的ScrollTo jQuery 插件来滚动动画。

为了用动画改变颜色，你可以使用jQuery Color Animation Plugin

例子

$('selector').scrollTo( '520px', 800 )
.animate({backgroundColor:'#ff0000'}, {duration:5000,queue:false});

编辑

如果你想淡出它，你可以使用切换功能。

   $('selector').scrollTo( '520px', 800 )
   .toggle(function() {
   $(this).animate({ 
     {backgroundColor:'#ff0000'}, {duration:5000,queue:false});
   },
   function() {
   $(this).animate({
     {backgroundColor:'#f5f5f5'}, {duration:5000,queue:false});
   });