表格單元格帶有閃爍的邊框

Question

我正在制作一個用戶界面，需要在其中突出顯示表格中的單元格。 我已經將着色用於其他用途，因此需要使用邊框。 我創建了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在這里可用

Answer 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

編輯

也使這個有趣。旋轉型邊框。 演示 ...由於所有額外元素，實在太爛了。

Answer 2

您可以使用邊框圖像，漸變甚至是多個框陰影來繪制邊框。

懸停時的動畫或過渡也可以使它們動起來。

帶有漸變的示例： 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;
    }
}

Answer 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/ 。 單擊表格單元格以開始。