带有闪烁边框的表格单元格

Posted 2023-03-06

【中文标题】带有闪烁边框的表格单元格

【英文标题】：Table cell with blinking borders

【发布时间】：2014-04-30 02:06:46

【问题描述】：

我正在制作一个需要突出显示表格中的单元格的用户界面。我已经为其他东西使用了着色，所以我需要使用边框。我创建了css来将边框更改为虚线，但这并没有突出显示。我想知道是否有任何方法可以为边框设置动画，以便它们闪烁或圆形（典型的虚线边框动画）。我尝试使用@keyframes 和动画，但失败得很惨。

我很乐意用 javascript 来做，但我不能使用 jQuery 或任何其他框架。

如果有人对突出显示单元格有任何其他建议，那也会有所帮助。

我使用的测试代码是这样的：

<table class="t">
    <tr>
        <td class="t">1</td>
        <td class="t top">2</td>
        <td class="t">3</td>
    </tr>
    <tr>
        <td class="t left">4</td>
        <td class="t middle">5</td>
        <td class="t right">6</td>
    </tr>
    <tr>
        <td class="t">7</td>
        <td class="t bottom">8</td>
        <td class="t">9</td>
    </tr>
</table>    

CSS：

table.t 
    border-collapse: collapse;
    border:1px;
    table-layout:fixed;


td.t 
    border: 1px solid black;
    width: 50px;


td.top 
    border-bottom: 1px dashed black;

td.left 
    border-right: 1px dashed black;

td.right 
    border-left: 1px dashed black;

td.bottom 
    border-top: 1px dashed black;

td.middle 
    border: 1px dashed black;

Jsfiddle 可用HERE

【问题讨论】：

这篇文章作为css3解决方案：***.com/questions/275931/…

@TilwinJoy，你的意思是通过 jquery 的 javascript 还是你指向一个特殊的答案？

@GCyrillus Vinay 对该帖子的确切回答..

@TilwinJoy，谢谢，答案太多了 :)

【参考方案1】：

不确定您要查找的确切内容，但这里有一个简单的关键帧，它应用了一个盒子阴影和一个改变透明度的关键帧……当然，您必须添加适当的供应商前缀。

CSS

td.selected 
    -webkit-animation: pulse-border 1s infinite;


// pulsing border
@-webkit-keyframes pulse-border 
    from, to  box-shadow: 0 0 0 0 black;
    50%  box-shadow: 0 0 0 4px black; 


// flash the cell contents if applied to cell
@-webkit-keyframes flash 
    from, to  opacity: 1 
    50%  opacity: 0  

DEMO

编辑

还为了好玩而制作了这个……旋转式边框。 DEMO...由于所有额外的元素，有点糟糕。

【讨论】：

只是为了提供替代方案jsfiddle.net/2822m/2 必须相应地设置环境样式

是的，不过我可能会使用透明而不是白色作为边框颜色。

有效点，这会更有意义，只是一个简单的例子。 :)

太棒了。如果有人有任何其他想法，我会稍微开放一下这个问题。但这应该有效。谢谢

@brbcoding 大声笑，为了好玩，我的渐变版本：codepen.io/anon/pen/rHxCg。顺便说一句， -webkit- 前缀使其非常严格

【参考方案2】：

您可以使用边框图像、渐变、甚至多个 box-shadow 来绘制边框。

悬停时的动画或过渡也可以为它们设置动画。

渐变示例：http://codepen.io/gc-nomade/pen/jdwgG 为了好玩，动画版http://codepen.io/anon/pen/rHxCg

或带有盒子阴影（抱歉浮华）：http://codepen.io/gcyrillus/pen/bGFLA

你也有轮廓和轮廓偏移http://jsfiddle.net/2822m/4/

table.t 
    border-collapse: collapse;
    border:1px;
    table-layout:fixed;

td.t 
    border:1px solid;
    width: 50px;

td.top 
    border-bottom: none;

td.left 
    border-right:none;

td.right 
    border-left: none;

td.bottom 
    border-top: none;

td.middle 
    border: 1px solid red;
    outline:1px dashed black;
    outline-offset:-1px;

动画很简单http://jsfiddle.net/2822m/5/

td.middle 
    border: 1px solid red;
    outline:1px dashed black;
    outline-offset:-1px;
    animation:blink 1s infinite;

@keyframes blink 
    50% 
        outline:1px dashed yellow;
    

【参考方案3】：

简单的 JavaScript 答案：

var blinkStatus = 'off',
    currentBlinkElement = null,
    blinkTimer,
    blinkSpeed = 500,
    stopBlinkButton = document.getElementById( 'stopBlinkButton' );

function blink( element )

    currentBlinkElement = element;
    if( blinkStatus == 'off' ) 
        currentBlinkElement.className = currentBlinkElement.className  + ' blink-on';
        blinkStatus = 'on';
     else 
        currentBlinkElement.className = currentBlinkElement.className.replace( ' blink-on', '' );
        blinkStatus = 'off';
    
    blinkTimer = setTimeout( function() blink( element ); , blinkSpeed );


function stopBlink()
   
    clearTimeout( blinkTimer );
    if( currentBlinkElement != null ) 
        currentBlinkElement.className = currentBlinkElement.className.replace( ' blink-on',  '' );
        currentBlinkElement = null;
    


document.onclick = function( e ) 
    var clickedElement;
    if(e == null) 
        clickedElement = event.srcElement;
     else 
        clickedElement = e.target;
    

    if( clickedElement.tagName == 'TD' ) 
        stopBlink();
        blink( clickedElement );
    
;

stopBlinkButton.onclick = function()
    stopBlink();
;

JSFiddle 工作示例：http://jsfiddle.net/2Vfu5/。单击表格单元格开始。