4

このcssプロパティtext-decoration:blinkをcssコードで設定しました。残念ながら、Firefoxでしか機能していません。クロームでまばたき効果を表示する方法が必要です。あなたたちは答えを持っている必要があります。

4

3 に答える 3

10

答えはここにありました: http://www.john-smith.me/emulating--lt-blink-gt--using-webkit-css3-animation . この例では、クラス .blink は何かを点滅させます... Chrome には -webkit- が必要ですが、Firefox や Opera には必要ないため、2 回記述する必要があります。

<style>
/**
 * Emulating <blink> using WebKit CSS3 animation        
 *   This code is part of John Smith's blog
 *
 * Copyright 2010 by John Smith, All Rights Reserved
 *
 * @link   http://www.john-smith.me/emulating--lt-blink-gt--using-webkit-css3-animation
 * @date   18th October 2010 at 11:01 p.m.
 * @author John Smith
 */
@-webkit-keyframes blinker { from {opacity:1.0;} to {opacity:0.0;} }
        @keyframes blinker { from {opacity:1.0;} to {opacity:0.0;} }

.blink {
   text-decoration:blink;

  -webkit-animation-name:blinker;
          animation-name:blinker;  
  -webkit-animation-iteration-count:infinite;  
          animation-iteration-count:infinite;  
  -webkit-animation-timing-function:cubic-bezier(1.0,0,0,1.0);
          animation-timing-function:cubic-bezier(1.0,0,0,1.0);
  -webkit-animation-duration:1s; 
          animation-duration:1s; 
}
</style>

古いブラウザーの場合は、(必要に応じて) 古い点滅属性を保持する (または保持しない) ことができます。

私は -webkit- のみを (1 回) 使用することを好み、Opera と Firefox がそれを認識しているため、テキスト装飾を保持します。（他のアニメーションについては、選択の余地はありません。まばたきについては、すでに方法を知っています）。

しかし、それは私が二度書くのが好きではなく、怠け者だからです. アドバイスではありません。

于 2013-07-07T02:52:09.540 に答える
3

残念ながら、Chrome はこの属性の CSS 点滅値をサポートしていません。同じ効果を作成するには、jQuery を使用する必要があります。http://archive.plugins.jquery.com/project/blinkのようなもの

于 2012-07-08T16:10:44.263 に答える