我有要制作动画的文字.例如,不是在悬停,而是从白色到红色不断变化,然后再次变回白色.
这是我目前的CSS代码：
#countText{
color: #eeeeee;
font-family: "League Gothic",Impact,sans-serif;
line-height: 0.9em;
letter-spacing: 0.02em;
text-transform: uppercase;
text-shadow: 0px 0px 6px ;
font-size: 210px;
}
解决方法
使用关键帧和动画属性
HTML
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit. Qui ad quos autem beatae nulla in.</p>
CSS
p{
-webkit-animation: color-change 1s infinite;
-moz-animation: color-change 1s infinite;
-o-animation: color-change 1s infinite;
-ms-animation: color-change 1s infinite;
animation: color-change 1s infinite;
}
@-webkit-keyframes color-change {
0% { color: red; }
50% { color: blue; }
100% { color: red; }
}
@-moz-keyframes color-change {
0% { color: red; }
50% { color: blue; }
100% { color: red; }
}
@-ms-keyframes color-change {
0% { color: red; }
50% { color: blue; }
100% { color: red; }
}
@-o-keyframes color-change {
0% { color: red; }
50% { color: blue; }
100% { color: red; }
}
@keyframes color-change {
0% { color: red; }
50% { color: blue; }
100% { color: red; }
}
