3

是否可以在给定一串文本“Hello World”的情况下制作脉动文本效果，每隔几秒钟它会从绿色变为蓝色，然后从蓝色变为绿色，从绿色变为蓝色，从蓝色变为绿色，而无需一行 javascript？（是否有任何 SCSS 或 SASS 快捷方式？）

4

3 回答 3

10

这是您想要的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; }
}

阅读：http ://tjvantoll.com/2012/02/20/CSS3-Color-Animations/了解更多信息

于 2013-06-14T18:03:56.000 回答
4

是的：

@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 */
于 2013-06-14T18:01:13.963 回答
0

尝试这个 ：

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>

演示

于 2013-06-14T18:15:51.350 回答