html文字闪光效果,css实现字体闪烁效果

偶然看到css里text-shadow属性和动画共同实现的字体闪烁的效果，很小清新，整理出来长知识

Document

.anm {

display: block;

width: 127px;

height: 38px;

animation: myfirst 5s linear 2s infinite alternate;

/* Firefox: */

-moz-animation: myfirst .8s linear .8s infinite alternate;

/* Safari and Chrome: */

-webkit-animation: myfirst .8s linear .8s infinite alternate;

/* Opera: */

-o-animation: myfirst .8s linear .8s infinite alternate;

}

.anm2 {

animation: myfirst2 5s linear 2s infinite alternate;

-moz-animation: myfirst2 .8s linear .8s infinite alternate;

-o-animation: myfirst2 .8s linear .8s infinite alternate;

}

@keyframes myfirst {

0% {

transform: translateY(10px);

}

50% {

text-shadow: 0px 0px 18px #00CCFF;

}

100% {

transform: translateX(10px);

}

}

@-webkit-keyframes myfirst {

0% {

transform: translateY(10px);

}

50% {

text-shadow: 0px 0px 18px #00CCFF;

}

100% {

transform: translateX(10px);

}

}

@-moz-keyframes myfirst {

0% {

transform: translateY(10px);

}

50% {

text-shadow: 0px 0px 18px #00CCFF;

}

100% {

transform: translateX(10px);

}

}

@-o-keyframes myfirst {

0% {

transform: translateY(10px);

}

50% {

text-shadow: 0px 0px 18px #00CCFF;

}

100% {

transform: translateX(10px);

}

}

@keyframes myfirst2 {

0% {

transform: translateY(-10px);

}

50% {

text-shadow: 0px 0px 18px #00CCFF;

}

100% {

transform: translateX(-10px);

}

}

@-webkit-keyframes myfirst2 {

0% {

transform: translateY(-10px);

}

50% {

text-shadow: 0px 0px 18px #00CCFF;

}

100% {

transform: translateX(-10px);

}

}

@-o-keyframes myfirst2 {

0% {

transform: translateY(-10px);

}

50% {

text-shadow: 0px 0px 18px #00CCFF;

}

100% {

transform: translateX(-10px);

}

}

@-moz-keyframes myfirst2 {

0% {

transform: translateY(-10px);

}

50% {

text-shadow: 0px 0px 18px #00CCFF;

}

100% {

transform: translateX(-10px);

}

}

abcd

efgh