css绘制星星闪烁,CSS3 闪烁的星星

CSS

语言：

CSSSCSS

确定

body {

background: black;

}

.shine {

background-image: url(/uploads/150601/shine.png);

background-repeat: no-repeat;

background-position: center;

width: 155px;

height: 155px;

position: absolute;

animation: opacity-change 1s ease-in-out infinite;

-webkit-animation: opacity-change 1s ease-in-out infinite;

-moz-animation: opacity-change 1s ease-in-out infinite;

-o-animation: opacity-change 1s ease-in-out infinite;

}

.shine2 {

animation: opacity-change 1.75s ease-in-out infinite;

-webkit-animation: opacity-change 1.75s ease-in-out infinite;

-moz-animation: opacity-change 1.75s ease-in-out infinite;

-o-animation: opacity-change 1.75s ease-in-out infinite;

}

@keyframes opacity-change {

0% {

opacity: 0;

}

50% {

opacity: 1;

}

100% {

opacity: 0;

}

}

@-webkit-keyframes opacity-change {

0% {

opacity: 0;

}

50% {

opacity: 1;

}

100% {

opacity: 0;

}

}

@-moz-keyframes opacity-change {

0% {

opacity: 0;

}

50% {

opacity: 1;

}

100% {

opacity: 0;

}

}

@-o-keyframes opacity-change {

0% {

opacity: 0;

}

50% {

opacity: 1;

}

100% {

opacity: 0;

}

}