css 射线,CSS3 激光射线扫描

CSS

语言：

CSSSCSS

确定

html {

background: #222;

}

.laser-beam {

position: absolute;

left: 50%;

bottom: 0;

width: 3px;

height: 500%;

background: rgba(99, 195, 231, 0.6);

-webkit-box-shadow: 0px 0px 15px 0px #63c3e7;

-moz-box-shadow: 0px 0px 15px 0px #63c3e7;

box-shadow: 0px 0px 15px 0px #63c3e7;

-moz-transform-origin: 0 100%;

-ms-transform-origin: 0 100%;

-webkit-transform-origin: 0 100%;

transform-origin: 0 100%;

-webkit-animation: laser 7s infinite;

}

.laser-beam.red {

-webkit-animation: laser 7.5s infinite;

background: rgba(236, 19, 65, 0.6);

-webkit-box-shadow: 0px 0px 15px 0px #ec1341;

-moz-box-shadow: 0px 0px 15px 0px #ec1341;

box-shadow: 0px 0px 15px 0px #ec1341;

}

.laser-beam.purple {

-webkit-animation: laser 7.3s infinite;

background: rgba(204, 102, 255, 0.6);

-webkit-box-shadow: 0px 0px 15px 0px #c6f;

-moz-box-shadow: 0px 0px 15px 0px #c6f;

box-shadow: 0px 0px 15px 0px #c6f;

}

.laser-beam.green {

-webkit-animation: laser 7.7s infinite;

background: rgba(86, 212, 69, 0.6);

-webkit-box-shadow: 0px 0px 15px 0px #56d445;

-moz-box-shadow: 0px 0px 15px 0px #56d445;

box-shadow: 0px 0px 15px 0px #56d445;

}

@-webkit-keyframes laser {

0% {

-moz-transform: rotate(-75deg);

-ms-transform: rotate(-75deg);

-webkit-transform: rotate(-75deg);

transform: rotate(-75deg);

}

50% {

-moz-transform: rotate(75deg);

-ms-transform: rotate(75deg);

-webkit-transform: rotate(75deg);

transform: rotate(75deg);

}

100% {

-moz-transform: rotate(-75deg);

-ms-transform: rotate(-75deg);

-webkit-transform: rotate(-75deg);

transform: rotate(-75deg);

}

}