循环使用CSS3更改文本颜色的动画 [英] Looping Animation of text color change using CSS3
本文介绍了循环使用CSS3更改文本颜色的动画的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有文字,我想动画。
这是我的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>
< 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; }
}
I have text that I want to animate. Not on hover, for example but continually changing slowly from white to red and then back to white again.
Here is my CSS code so far:
#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;
}
解决方案
Use keyframes
and animaiton
property
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; }
}
这篇关于循环使用CSS3更改文本颜色的动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文