3

テキスト文字列「Hello World」を指定すると、数秒ごとに緑から青に、次に青から緑に、緑から青に、青から緑に、javascript を 1 行も使わずに変化する、脈動するテキスト効果を作成することは可能ですか? (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 に答える