纯html加css象棋棋盘,纯CSS实现的国际象棋棋盘

CSS

语言：

CSSSCSS

确定

body {

background: #262626;

}

body:after {

position: absolute;

top: 50%;

left: 50%;

margin: -13em -13em;

width: 26em;

height: 26em;

box-shadow: 1px 1px 0.25em #000, 0 0 0 3.25em #262626;

content: '';

}

.grid {

position: absolute;

top: 50%;

left: 50%;

overflow: hidden;

margin: -13em -13em;

width: 29.25em;

height: 26em;

background: #232323;

animation: switch 6s steps(1) infinite;

}

@keyframes switch {

50% {

transform: translate(-3.25em);

-webkit-filter: invert(1);

filter: invert(1);

}

}

.tile {

position: absolute;

width: 3.25em;

height: 3.25em;

background: #dcdcdc;

animation: rot 3s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;

}

.tile:nth-child(1) {

top: 0em;

left: 3.25em;

animation-delay: 0s;

}

.tile:nth-child(2) {

top: 0em;

left: 9.75em;

animation-delay: 0s;

}

.tile:nth-child(3) {

top: 0em;

left: 16.25em;

animation-delay: 0s;

}

.tile:nth-child(4) {

top: 0em;

left: 22.75em;

animation-delay: 0s;

}

.tile:nth-child(5) {

top: 0em;

left: 29.25em;

animation-delay: 0s;

}

.tile:nth-child(6) {

top: 3.25em;

left: 0em;

animation-delay: 0.075s;

}

.tile:nth-child(7) {

top: 3.25em;

left: 6.5em;

animation-delay: 0.075s;

}

.tile:nth-child(8) {

top: 3.25em;

left: 13em;

animation-delay: 0.075s;

}

.tile:nth-child(9) {

top: 3.25em;

left: 19.5em;

animation-delay: 0.075s;

}

.tile:nth-child(10) {

top: 3.25em;

left: 26em;

animation-delay: 0.075s;

}

.tile:nth-child(11) {

top: 6.5em;

left: 3.25em;

animation-delay: 0.15s;

}

.tile:nth-child(12) {

top: 6.5em;

left: 9.75em;

animation-delay: 0.15s;

}

.tile:nth-child(13) {

top: 6.5em;

left: 16.25em;

animation-delay: 0.15s;

}

.tile:nth-child(14) {

top: 6.5em;

left: 22.75em;

animation-delay: 0.15s;

}

.tile:nth-child(15) {

top: 6.5em;

left: 29.25em;

animation-delay: 0.15s;

}

.tile:nth-child(16) {

top: 9.75em;

left: 0em;

animation-delay: 0.225s;

}

.tile:nth-child(17) {

top: 9.75em;

left: 6.5em;

animation-delay: 0.225s;

}

.tile:nth-child(18) {

top: 9.75em;

left: 13em;

animation-delay: 0.225s;

}

.tile:nth-child(19) {

top: 9.75em;

left: 19.5em;

animation-delay: 0.225s;

}

.tile:nth-child(20) {

top: 9.75em;

left: 26em;

animation-delay: 0.225s;

}

.tile:nth-child(21) {

top: 13em;

left: 3.25em;

animation-delay: 0.3s;

}

.tile:nth-child(22) {

top: 13em;

left: 9.75em;

animation-delay: 0.3s;

}

.tile:nth-child(23) {

top: 13em;

left: 16.25em;

animation-delay: 0.3s;

}

.tile:nth-child(24) {

top: 13em;

left: 22.75em;

animation-delay: 0.3s;

}

.tile:nth-child(25) {

top: 13em;

left: 29.25em;

animation-delay: 0.3s;

}

.tile:nth-child(26) {

top: 16.25em;

left: 0em;

animation-delay: 0.375s;

}

.tile:nth-child(27) {

top: 16.25em;

left: 6.5em;

animation-delay: 0.375s;

}

.tile:nth-child(28) {

top: 16.25em;

left: 13em;

animation-delay: 0.375s;

}

.tile:nth-child(29) {

top: 16.25em;

left: 19.5em;

animation-delay: 0.375s;

}

.tile:nth-child(30) {

top: 16.25em;

left: 26em;

animation-delay: 0.375s;

}

.tile:nth-child(31) {

top: 19.5em;

left: 3.25em;

animation-delay: 0.45s;

}

.tile:nth-child(32) {

top: 19.5em;

left: 9.75em;

animation-delay: 0.45s;

}

.tile:nth-child(33) {

top: 19.5em;

left: 16.25em;

animation-delay: 0.45s;

}

.tile:nth-child(34) {

top: 19.5em;

left: 22.75em;

animation-delay: 0.45s;

}

.tile:nth-child(35) {

top: 19.5em;

left: 29.25em;

animation-delay: 0.45s;

}

.tile:nth-child(36) {

top: 22.75em;

left: 0em;

animation-delay: 0.525s;

}

.tile:nth-child(37) {

top: 22.75em;

left: 6.5em;

animation-delay: 0.525s;

}

.tile:nth-child(38) {

top: 22.75em;

left: 13em;

animation-delay: 0.525s;

}

.tile:nth-child(39) {

top: 22.75em;

left: 19.5em;

animation-delay: 0.525s;

}

.tile:nth-child(40) {

top: 22.75em;

left: 26em;

animation-delay: 0.525s;

}

@keyframes rot {

20%, 100% {

transform: rotate(90deg);

}

}