偶然看到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
