css - 仅使用 CSS，有什么方法可以在命名 anchor 单击后将 "flash"元素吸引注意吗？

Question

我真的不是一个网络程序员。我正在努力修改购物车模板。我使用命名 anchor 让用户进入详细描述区域。这很好用，但它跳跃的方式有点让人迷失方向，我想提请大家注意标题。下面是包含命名 anchor 的 div。我最好想要闪烁#more_info_sheets(这是标题)或idTab1(这是内容和 anchor 目标)

<div id="bottom_more_info_block" class="mar_b2">
    <div id="more_info_block">
        <ul id="more_info_tabs" class="idTabs common_tabs li_fl clearfix">
            <li><a id="more_info_tab_more_info" href="#idTab1" class="selected">More info</a></li>
            <li><a href="#idTab5" class="idTabHrefShort">Comments(0)</a></li>
            <li><a href="#idTab311" id="st_easy_tab_1">Installation Instructions</a></li>
        </ul>
        <div id="more_info_sheets" class="sheets align_justify">
            <div id="idTab1" class="rte product_accordion open">
                [...subject content...]
            </div>
            <div style="display:none;">
                <div id="new_comment_form">
                    [...blahblah...]
                </div>
            </div>
            <div id="idTab5" class="product_accordion block_hidden_only_for_screen">
                [...blahblah...]
            </div>
            <div id="idTab311" class="product_accordion block_hidden_only_for_screen">
                [...blahblah...]
            </div>
        </div>
    </div>
</div>

到目前为止，我自己所做的就是在单击链接时将 #idTab1 内容更改为黄色背景。但现在我被困住了。首先，我不希望它保持突出显示。其次，即使它确实消失了，它也不完全是一个光滑的效果!第三，我真的宁愿在单击时闪烁标题，而不是 #idTab1 本身。

#idTab1:target {
background-color: yellow; }

我在网上找到了基于 javascript 的示例，这些示例似乎完全符合我的要求，但我似乎无法让 Javascript 与此购物车配合使用，所以我现在不想去那里。

Answer 1

来源:http://codepen.io/anon/pen/xfjrh

@import "compass/css3";

/**
 * Use the :target pseudo-element to apply
 * styles to the element with the same ID as  
 * the fragment identifier.
 * (e.g. `#target-section`)
 * 
 * The pseudo-element can also be used in
 * conjunction with another selector to 
 * define a variety of target styles.
 * (e.g. `#target-section:target)
 */

:target {
    -webkit-animation: target-fade 1s;
    -moz-animation: target-fade 1s;
    -o-animation: target-fade 1s;
    animation: target-fade 1s;
}


/**
 * Keyframe animation definition
 * 
 * 1. Insert a color of your choice here
 */

@-webkit-keyframes target-fade {
    from { background-color: red; } /* [1] */
    to { background-color: transparent; }
}

@-moz-keyframes target-fade {
    from { background-color: red; } /* [1] */
    to { background-color: transparent; }
}

@-o-keyframes target-fade {
    from { background-color: red; } /* [1] */
    to { background-color: transparent; }
}

@keyframes target-fade {
    from { background-color: red; } /* [1] */
    to { background-color: transparent; }
}




/* Demo-specific styles */
body {
  width: 500px;
  margin: 0 auto;
}