Hinzufügen von Glanz-Effekt zu einer Tabellenzeile

Ich versuche, einen Glanz-Effekt auf eine Tabellenzeile im Anschluss an dieser Geige hinzuzufügen: http://jsfiddle.net/nqQc7/511/Hinzufügen von Glanz-Effekt zu einer Tabellenzeile

.gold:after { 
    animation: shine 1.5s infinite linear alternate; 
    content: ""; 
    position: absolute; 
    top: -110%; 
    left: -210%; 
    width: 200%; 
    height: 200%; 
    opacity: 0; 
    transform: rotate(30deg); 

    background: rgba(255, 255, 255, 0.13); 
    background: linear-gradient(
    to right, 
    rgba(255, 255, 255, 0.13) 0%, 
    rgba(255, 255, 255, 0.13) 77%, 
    rgba(255, 255, 255, 0.5) 92%, 
    rgba(255, 255, 255, 0.0) 100% 
); 
} 

.gold:active:after { 
    opacity: 0; 
} 

@keyframes shine{ 
    to { 
    opacity: 1; 
    top: -30%; 
    left: -30%; 
    transition-property: left, top, opacity; 
    transition-duration: 0.7s, 0.7s, 0.15s; 
    transition-timing-function: ease; 
    } 
}

Aber ich kann nicht scheinen, richtig zu machen, wird der Effekt überfüllt die Tabelle: https://jsfiddle.net/uokvjaxx/2/

ich habe die Klasse nur eine Tabellenzeile und der Effekt geht durch die gesamte Tabelle:

<table style="width:100%"> 
    <tr> 
    <th>Firstname</th> 
    <th>Lastname</th> 
    <th>Age</th> 
    </tr> 
    <tr class="gold"> 
    <td>Jill</td> 
    <td>Smith</td> 
    <td>50</td> 
    </tr> 
    <tr> 
    <td>Eve</td> 
    <td>Jackson</td> 
    <td>94</td> 
    </tr> 
</table>

gibt es einen Weg, um die Wirkung zu begrenzen, nur auf die Tabelle ro w ohne die Darstellung der Zeile zu beeinflussen?

Quelle

2017-11-16 Ricardo Rodríguez Sepúlveda

Zwei erste Vorschläge: Schwere Styling von Tabellenelementen kann problematisch sein. Setzen Sie stattdessen strukturelles Markup in die Tabellenzellen und stylen Sie das. Dann müssen absolut positionierte Elemente von einem anderen Element enthalten sein, das nicht statisch positioniert ist. Das sieht man an der ersten Geige. – isherwood

Vielleicht wird so etwas Ihnen näher bringen, wo Sie wollen. Passen Sie sie an Ihre Anforderungen an und vergessen Sie keine Vendor Prefixes, wenn Sie verschiedene Browser unterstützen müssen.

.gold { 
 
\t background: linear-gradient(-45deg, #fff087, #eccf02, #fff087); 
 
\t background-size: 50% 100%; 
 
\t animation: linear-gradient 10s linear infinite; 
 
} 
 

 
@keyframes linear-gradient { 
 
\t 0% { 
 
\t \t background-position: 0% 50% 
 
\t } 
 

 
\t 100% { 
 
\t \t background-position: 400% 400% 
 
\t } 
 
}

<table style="width:100%"> 
 
\t <tr> 
 
\t \t <th>Firstname</th> 
 
\t \t <th>Lastname</th> 
 
\t \t <th>Age</th> 
 
\t </tr> 
 
\t <tr class="gold"> 
 
\t \t <td>Jill</td> 
 
\t \t <td>Smith</td> 
 
\t \t <td>50</td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td>Eve</td> 
 
\t \t <td>Jackson</td> 
 
\t \t <td>94</td> 
 
\t </tr> 
 
</table>

Quelle

2017-11-16 17:35:03

Es ist eine bessere und einfache Lösung. – bhansa

Hinzufügen von Glanz-Effekt zu einer Tabellenzeile

Antwort

Verwandte Themen