css3制作梯形,CSS3 用TABLE表格做成的梯形动效

CSS

语言：

CSSSCSS

确定

*,

*::before,

*::after {

box-sizing: border-box;

}

body {

font-family: 'Open Sans', sans-serif;

margin: 0;

padding: 0;

background-color: #333;

font-size: 66.5%;

}

@-moz-keyframes anim {

0% {

width: 100%;

}

50% {

width: 0%;

}

100% {

width: 100%;

}

}

@-webkit-keyframes anim {

0% {

width: 100%;

}

50% {

width: 0%;

}

100% {

width: 100%;

}

}

@keyframes anim {

0% {

width: 100%;

}

50% {

width: 0%;

}

100% {

width: 100%;

}

}

.demo-container {

display: flex;

flex-flow: column nowrap;

justify-content: center;

align-items: center;

height: 95vh;

}

table {

position: relative;

width: 100%;

-webkit-animation: anim 2s linear infinite;

-moz-animation: anim 2s linear infinite;

animation: anim 2s linear infinite;

}

table:nth-of-type(1) {

animation-delay: 900ms;

}

table:nth-of-type(1):nth-of-type(even) tbody tr td {

background-color: #F26419;

}

table:nth-of-type(1):nth-of-type(odd) tbody tr td {

background-color: #ccc;

}

table:nth-of-type(2) {

animation-delay: 800ms;

}

table:nth-of-type(2):nth-of-type(even) tbody tr td {

background-color: #F26419;

}

table:nth-of-type(2):nth-of-type(odd) tbody tr td {

background-color: #ccc;

}

table:nth-of-type(3) {

animation-delay: 700ms;

}

table:nth-of-type(3):nth-of-type(even) tbody tr td {

background-color: #F26419;

}

table:nth-of-type(3):nth-of-type(odd) tbody tr td {

background-color: #ccc;

}

table:nth-of-type(4) {

animation-delay: 600ms;

}

table:nth-of-type(4):nth-of-type(even) tbody tr td {

background-color: #F26419;

}

table:nth-of-type(4):nth-of-type(odd) tbody tr td {

background-color: #ccc;

}

table:nth-of-type(5) {

animation-delay: 500ms;

}

table:nth-of-type(5):nth-of-type(even) tbody tr td {

background-color: #F26419;

}

table:nth-of-type(5):nth-of-type(odd) tbody tr td {

background-color: #ccc;

}

table:nth-of-type(6) {

animation-delay: 400ms;

}

table:nth-of-type(6):nth-of-type(even) tbody tr td {

background-color: #F26419;

}

table:nth-of-type(6):nth-of-type(odd) tbody tr td {

background-color: #ccc;

}

table:nth-of-type(7) {

animation-delay: 300ms;

}

table:nth-of-type(7):nth-of-type(even) tbody tr td {

background-color: #F26419;

}

table:nth-of-type(7):nth-of-type(odd) tbody tr td {

background-color: #ccc;

}

table:nth-of-type(8) {

animation-delay: 200ms;

}

table:nth-of-type(8):nth-of-type(even) tbody tr td {

background-color: #F26419;

}

table:nth-of-type(8):nth-of-type(odd) tbody tr td {

background-color: #ccc;

}

table:nth-of-type(9) {

animation-delay: 100ms;

}

table:nth-of-type(9):nth-of-type(even) tbody tr td {

background-color: #F26419;

}

table:nth-of-type(9):nth-of-type(odd) tbody tr td {

background-color: #ccc;

}

table:nth-of-type(10) {

animation-delay: 0ms;

}

table:nth-of-type(10):nth-of-type(even) tbody tr td {

background-color: #F26419;

}

table:nth-of-type(10):nth-of-type(odd) tbody tr td {

background-color: #ccc;

}

table:nth-of-type(11) {

animation-delay: -100ms;

}

table:nth-of-type(11):nth-of-type(even) tbody tr td {

background-color: #F26419;

}

table:nth-of-type(11):nth-of-type(odd) tbody tr td {

background-color: #ccc;

}

table:nth-of-type(12) {

animation-delay: -200ms;

}

table:nth-of-type(12):nth-of-type(even) tbody tr td {

background-color: #F26419;

}

table:nth-of-type(12):nth-of-type(odd) tbody tr td {

background-color: #ccc;

}

table:nth-of-type(13) {

animation-delay: -300ms;

}

table:nth-of-type(13):nth-of-type(even) tbody tr td {

background-color: #F26419;

}

table:nth-of-type(13):nth-of-type(odd) tbody tr td {

background-color: #ccc;

}

table:nth-of-type(14) {

animation-delay: -400ms;

}

table:nth-of-type(14):nth-of-type(even) tbody tr td {

background-color: #F26419;

}

table:nth-of-type(14):nth-of-type(odd) tbody tr td {

background-color: #ccc;

}

table:nth-of-type(15) {

animation-delay: -500ms;

}

table:nth-of-type(15):nth-of-type(even) tbody tr td {

background-color: #F26419;

}

table:nth-of-type(15):nth-of-type(odd) tbody tr td {

background-color: #ccc;

}

table:nth-of-type(16) {

animation-delay: -600ms;

}

table:nth-of-type(16):nth-of-type(even) tbody tr td {

background-color: #F26419;

}

table:nth-of-type(16):nth-of-type(odd) tbody tr td {

background-color: #ccc;

}

table:nth-of-type(17) {

animation-delay: -700ms;

}

table:nth-of-type(17):nth-of-type(even) tbody tr td {

background-color: #F26419;

}

table:nth-of-type(17):nth-of-type(odd) tbody tr td {

background-color: #ccc;

}

table:nth-of-type(18) {

animation-delay: -800ms;

}

table:nth-of-type(18):nth-of-type(even) tbody tr td {

background-color: #F26419;

}

table:nth-of-type(18):nth-of-type(odd) tbody tr td {

background-color: #ccc;

}

table:nth-of-type(19) {

animation-delay: -900ms;

}

table:nth-of-type(19):nth-of-type(even) tbody tr td {

background-color: #F26419;

}

table:nth-of-type(19):nth-of-type(odd) tbody tr td {

background-color: #ccc;

}

table:nth-of-type(20) {

animation-delay: -1000ms;

}

table:nth-of-type(20):nth-of-type(even) tbody tr td {

background-color: #F26419;

}

table:nth-of-type(20):nth-of-type(odd) tbody tr td {

background-color: #ccc;

}

table:nth-of-type(21) {

animation-delay: -1100ms;

}

table:nth-of-type(21):nth-of-type(even) tbody tr td {

background-color: #F26419;

}

table:nth-of-type(21):nth-of-type(odd) tbody tr td {

background-color: #ccc;

}

table:nth-of-type(22) {

animation-delay: -1200ms;

}

table:nth-of-type(22):nth-of-type(even) tbody tr td {

background-color: #F26419;

}

table:nth-of-type(22):nth-of-type(odd) tbody tr td {

background-color: #ccc;

}

table:nth-of-type(23) {

animation-delay: -1300ms;

}

table:nth-of-type(23):nth-of-type(even) tbody tr td {

background-color: #F26419;

}

table:nth-of-type(23):nth-of-type(odd) tbody tr td {

background-color: #ccc;

}

table:nth-of-type(24) {

animation-delay: -1400ms;

}

table:nth-of-type(24):nth-of-type(even) tbody tr td {

background-color: #F26419;

}

table:nth-of-type(24):nth-of-type(odd) tbody tr td {

background-color: #ccc;

}

table:nth-of-type(25) {

animation-delay: -1500ms;

}

table:nth-of-type(25):nth-of-type(even) tbody tr td {

background-color: #F26419;

}

table:nth-of-type(25):nth-of-type(odd) tbody tr td {

background-color: #ccc;

}

table:nth-of-type(26) {

animation-delay: -1600ms;

}

table:nth-of-type(26):nth-of-type(even) tbody tr td {

background-color: #F26419;

}

table:nth-of-type(26):nth-of-type(odd) tbody tr td {

background-color: #ccc;

}

table:nth-of-type(27) {

animation-delay: -1700ms;

}

table:nth-of-type(27):nth-of-type(even) tbody tr td {

background-color: #F26419;

}

table:nth-of-type(27):nth-of-type(odd) tbody tr td {

background-color: #ccc;

}

table:nth-of-type(28) {

animation-delay: -1800ms;

}

table:nth-of-type(28):nth-of-type(even) tbody tr td {

background-color: #F26419;

}

table:nth-of-type(28):nth-of-type(odd) tbody tr td {

background-color: #ccc;

}

table:nth-of-type(29) {

animation-delay: -1900ms;

}

table:nth-of-type(29):nth-of-type(even) tbody tr td {

background-color: #F26419;

}

table:nth-of-type(29):nth-of-type(odd) tbody tr td {

background-color: #ccc;

}

table:nth-of-type(30) {

animation-delay: -2000ms;

}

table:nth-of-type(30):nth-of-type(even) tbody tr td {

background-color: #F26419;

}

table:nth-of-type(30):nth-of-type(odd) tbody tr td {

background-color: #ccc;

}

table:nth-of-type(31) {

animation-delay: -2100ms;

}

table:nth-of-type(31):nth-of-type(even) tbody tr td {

background-color: #F26419;

}

table:nth-of-type(31):nth-of-type(odd) tbody tr td {

background-color: #ccc;

}

table:nth-of-type(32) {

animation-delay: -2200ms;

}

table:nth-of-type(32):nth-of-type(even) tbody tr td {

background-color: #F26419;

}

table:nth-of-type(32):nth-of-type(odd) tbody tr td {

background-color: #ccc;

}

table:nth-of-type(33) {

animation-delay: -2300ms;

}

table:nth-of-type(33):nth-of-type(even) tbody tr td {

background-color: #F26419;

}

table:nth-of-type(33):nth-of-type(odd) tbody tr td {

background-color: #ccc;

}

table:nth-of-type(34) {

animation-delay: -2400ms;

}

table:nth-of-type(34):nth-of-type(even) tbody tr td {

background-color: #F26419;

}

table:nth-of-type(34):nth-of-type(odd) tbody tr td {

background-color: #ccc;

}

table:nth-of-type(35) {

animation-delay: -2500ms;

}

table:nth-of-type(35):nth-of-type(even) tbody tr td {

background-color: #F26419;

}

table:nth-of-type(35):nth-of-type(odd) tbody tr td {

background-color: #ccc;

}

table:nth-of-type(36) {

animation-delay: -2600ms;

}

table:nth-of-type(36):nth-of-type(even) tbody tr td {

background-color: #F26419;

}

table:nth-of-type(36):nth-of-type(odd) tbody tr td {

background-color: #ccc;

}

table:nth-of-type(37) {

animation-delay: -2700ms;

}

table:nth-of-type(37):nth-of-type(even) tbody tr td {

background-color: #F26419;

}

table:nth-of-type(37):nth-of-type(odd) tbody tr td {

background-color: #ccc;

}

table:nth-of-type(38) {

animation-delay: -2800ms;

}

table:nth-of-type(38):nth-of-type(even) tbody tr td {

background-color: #F26419;

}

table:nth-of-type(38):nth-of-type(odd) tbody tr td {

background-color: #ccc;

}

table:nth-of-type(39) {

animation-delay: -2900ms;

}

table:nth-of-type(39):nth-of-type(even) tbody tr td {

background-color: #F26419;

}

table:nth-of-type(39):nth-of-type(odd) tbody tr td {

background-color: #ccc;

}

table:nth-of-type(40) {

animation-delay: -3000ms;

}

table:nth-of-type(40):nth-of-type(even) tbody tr td {

background-color: #F26419;

}

table:nth-of-type(40):nth-of-type(odd) tbody tr td {

background-color: #ccc;

}

table:nth-of-type(41) {

animation-delay: -3100ms;

}

table:nth-of-type(41):nth-of-type(even) tbody tr td {

background-color: #F26419;

}

table:nth-of-type(41):nth-of-type(odd) tbody tr td {

background-color: #ccc;

}

table:nth-of-type(42) {

animation-delay: -3200ms;

}

table:nth-of-type(42):nth-of-type(even) tbody tr td {

background-color: #F26419;

}

table:nth-of-type(42):nth-of-type(odd) tbody tr td {

background-color: #ccc;

}

table:nth-of-type(43) {

animation-delay: -3300ms;

}

table:nth-of-type(43):nth-of-type(even) tbody tr td {

background-color: #F26419;

}

table:nth-of-type(43):nth-of-type(odd) tbody tr td {

background-color: #ccc;

}

table:nth-of-type(44) {

animation-delay: -3400ms;

}

table:nth-of-type(44):nth-of-type(even) tbody tr td {

background-color: #F26419;

}

table:nth-of-type(44):nth-of-type(odd) tbody tr td {

background-color: #ccc;

}

table:nth-of-type(45) {

animation-delay: -3500ms;

}

table:nth-of-type(45):nth-of-type(even) tbody tr td {

background-color: #F26419;

}

table:nth-of-type(45):nth-of-type(odd) tbody tr td {

background-color: #ccc;

}

table:nth-of-type(46) {

animation-delay: -3600ms;

}

table:nth-of-type(46):nth-of-type(even) tbody tr td {

background-color: #F26419;

}

table:nth-of-type(46):nth-of-type(odd) tbody tr td {

background-color: #ccc;

}

table:nth-of-type(47) {

animation-delay: -3700ms;

}

table:nth-of-type(47):nth-of-type(even) tbody tr td {

background-color: #F26419;

}

table:nth-of-type(47):nth-of-type(odd) tbody tr td {

background-color: #ccc;

}

table:nth-of-type(48) {

animation-delay: -3800ms;

}

table:nth-of-type(48):nth-of-type(even) tbody tr td {

background-color: #F26419;

}

table:nth-of-type(48):nth-of-type(odd) tbody tr td {

background-color: #ccc;

}

table tbody tr td {

height: 2em;

border-radius: 2em;

}