html 状态灯,HTML5 闪烁的警灯

状态灯,HTML5 闪烁的警灯"/>

html 状态灯,HTML5 闪烁的警灯

CSS

语言：

CSSSCSS

确定

* {

box-sizing: border-box;

}

html,

body {

width: 100%;

height: 100%;

}

body {

background: #000;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

margin: 0;

padding: 0;

}

#target {

width: 550px;

height: 500px;

position: relative;

}

.block {

width: 50px;

height: 50px;

position: absolute;

-webkit-perspective: 5000px;

perspective: 5000px;

color: #f08;

-webkit-animation: blocks 1s linear infinite;

animation: blocks 1s linear infinite;

}

.block:nth-child(2n) {

-webkit-animation-delay: .25s;

animation-delay: .25s;

}

.block:nth-child(3n) {

-webkit-animation-delay: .5s;

animation-delay: .5s;

}

.block__side {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: currentColor;

}

.block[data-x="1"] {

left: 33.33333px;

bottom: 16.66667px;

z-index: 49;

}

.block[data-height="1"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(50px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(50px);

}

.block[data-height="1"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 25px) rotateX(90deg) scaleY(1);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 25px) rotateX(90deg) scaleY(1);

}

.block[data-height="1"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 25px) rotateX(90deg) scaleY(1);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 25px) rotateX(90deg) scaleY(1);

}

.block[data-x="2"] {

left: 66.66667px;

bottom: 33.33333px;

z-index: 48;

}

.block[data-height="2"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(100px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(100px);

}

.block[data-height="2"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 50px) rotateX(90deg) scaleY(2);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 50px) rotateX(90deg) scaleY(2);

}

.block[data-height="2"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 50px) rotateX(90deg) scaleY(2);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 50px) rotateX(90deg) scaleY(2);

}

.block[data-x="3"] {

left: 100px;

bottom: 50px;

z-index: 47;

}

.block[data-height="3"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(150px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(150px);

}

.block[data-height="3"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 75px) rotateX(90deg) scaleY(3);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 75px) rotateX(90deg) scaleY(3);

}

.block[data-height="3"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 75px) rotateX(90deg) scaleY(3);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 75px) rotateX(90deg) scaleY(3);

}

.block[data-x="4"] {

left: 133.33333px;

bottom: 66.66667px;

z-index: 46;

}

.block[data-height="4"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(200px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(200px);

}

.block[data-height="4"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 100px) rotateX(90deg) scaleY(4);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 100px) rotateX(90deg) scaleY(4);

}

.block[data-height="4"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 100px) rotateX(90deg) scaleY(4);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 100px) rotateX(90deg) scaleY(4);

}

.block[data-x="5"] {

left: 166.66667px;

bottom: 83.33333px;

z-index: 45;

}

.block[data-height="5"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(250px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(250px);

}

.block[data-height="5"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 125px) rotateX(90deg) scaleY(5);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 125px) rotateX(90deg) scaleY(5);

}

.block[data-height="5"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 125px) rotateX(90deg) scaleY(5);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 125px) rotateX(90deg) scaleY(5);

}

.block[data-x="6"] {

left: 200px;

bottom: 100px;

z-index: 44;

}

.block[data-height="6"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(300px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(300px);

}

.block[data-height="6"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 150px) rotateX(90deg) scaleY(6);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 150px) rotateX(90deg) scaleY(6);

}

.block[data-height="6"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 150px) rotateX(90deg) scaleY(6);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 150px) rotateX(90deg) scaleY(6);

}

.block[data-x="7"] {

left: 233.33333px;

bottom: 116.66667px;

z-index: 43;

}

.block[data-height="7"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(350px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(350px);

}

.block[data-height="7"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 175px) rotateX(90deg) scaleY(7);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 175px) rotateX(90deg) scaleY(7);

}

.block[data-height="7"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 175px) rotateX(90deg) scaleY(7);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 175px) rotateX(90deg) scaleY(7);

}

.block[data-x="8"] {

left: 266.66667px;

bottom: 133.33333px;

z-index: 42;

}

.block[data-height="8"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(400px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(400px);

}

.block[data-height="8"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 200px) rotateX(90deg) scaleY(8);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 200px) rotateX(90deg) scaleY(8);

}

.block[data-height="8"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 200px) rotateX(90deg) scaleY(8);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 200px) rotateX(90deg) scaleY(8);

}

.block[data-x="9"] {

left: 300px;

bottom: 150px;

z-index: 41;

}

.block[data-height="9"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(450px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(450px);

}

.block[data-height="9"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 225px) rotateX(90deg) scaleY(9);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 225px) rotateX(90deg) scaleY(9);

}

.block[data-height="9"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 225px) rotateX(90deg) scaleY(9);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 225px) rotateX(90deg) scaleY(9);

}

.block[data-x="10"] {

left: 333.33333px;

bottom: 166.66667px;

z-index: 40;

}

.block[data-height="10"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(500px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(500px);

}

.block[data-height="10"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 250px) rotateX(90deg) scaleY(10);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 250px) rotateX(90deg) scaleY(10);

}

.block[data-height="10"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 250px) rotateX(90deg) scaleY(10);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 250px) rotateX(90deg) scaleY(10);

}

.block[data-x="11"] {

left: 366.66667px;

bottom: 183.33333px;

z-index: 39;

}

.block[data-height="11"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(550px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(550px);

}

.block[data-height="11"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 275px) rotateX(90deg) scaleY(11);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 275px) rotateX(90deg) scaleY(11);

}

.block[data-height="11"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 275px) rotateX(90deg) scaleY(11);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 275px) rotateX(90deg) scaleY(11);

}

.block[data-x="12"] {

left: 400px;

bottom: 200px;

z-index: 38;

}

.block[data-height="12"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(600px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(600px);

}

.block[data-height="12"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 300px) rotateX(90deg) scaleY(12);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 300px) rotateX(90deg) scaleY(12);

}

.block[data-height="12"] .block__side:nth-child(3) {

-webkit-transform: