是否有可能制作一个脉动文本效果,给定一个字符串“Hello World”,每隔几秒钟就从绿色缓慢过渡到蓝色,然后从蓝色缓慢过渡到绿色,绿色到蓝色,蓝色到绿色,而不需要任何一行JavaScript?(是否有任何SCSS或SASS快捷方式可用?)
是否有可能制作一个脉动文本效果,给定一个字符串“Hello World”,每隔几秒钟就从绿色缓慢过渡到蓝色,然后从蓝色缓慢过渡到绿色,绿色到蓝色,蓝色到绿色,而不需要任何一行JavaScript?(是否有任何SCSS或SASS快捷方式可用?)
这是您所需的CSS3代码:
.textClass {
-webkit-animation: color_change 1s infinite alternate;
-moz-animation: color_change 1s infinite alternate;
-ms-animation: color_change 1s infinite alternate;
-o-animation: color_change 1s infinite alternate;
animation: color_change 1s infinite alternate;
}
@-webkit-keyframes color_change {
from { color: blue; }
to { color: green; }
}
@-moz-keyframes color_change {
from { color: blue; }
to { color: green; }
}
@-ms-keyframes color_change {
from { color: blue; }
to { color: green; }
}
@-o-keyframes color_change {
from { color: blue; }
to { color: green; }
}
@keyframes color_change {
from { color: blue; }
to { color: green; }
}
<p class="textClass">Hello World</p>
阅读:http://tjvantoll.com/2012/02/20/CSS3-Color-Animations/ 了解更多信息。
-ms-
版本是不必要的,它只在早期的IE10预览版中必要。IE9不支持动画,而IE10支持无前缀的动画。另外,你可以在.textClass
中写入color: blue
并省略from
关键帧(它将从你在类中拥有的内容自动生成)。 - Ana好的:
@keyframes textColorChange {
0% {color: #0000ff;}
50% {color: #00ff00;}
100% {color: #0000ff;}
}
/* Use @-webkit-keyframes for Safari/Chrome */
#textElement {
animation: textColorChange 2s infinite;
}
/* Use -webkit-animation for Safari/Chrome */
CSS:
@-webkit-keyframes altrclr{
0%{
color:red;
}
50%{
color:green;
}
}
#a{
margin:40%;
font-size:20px;
color:red;
-webkit-animation: altrclr 3s infinite alternate;
-webkit-transform:scale(4);
}
Html
<div id='a'>
Hello World
</div>