Question

是否可以在给定一串文字＆＃34; Hello World＆＃34;的情况下产生脉动文本效果，每隔几秒就会从绿色变为蓝色，然后从蓝色变为绿色，从绿色变为蓝色，从蓝色变为绿色没有一行javascript？（是否恰好有任何SCSS或SASS快捷方式？）

Answer 1

这是你想要的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/了解更多信息

Answer 2

是的：

@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 */

Answer 3

试试这个：

<强> 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>

<强> Demo

仅限Pulsate文本CSS3？

3 个答案: