Heim  >  Artikel  >  Web-Frontend  >  Einfacher Flash-Effekt von CSS3-Elementen (HTML5-JQuery)

Einfacher Flash-Effekt von CSS3-Elementen (HTML5-JQuery)

高洛峰
高洛峰Original
2016-11-24 10:11:531294Durchsuche

CSS3-Animation:

@-webkit-keyframes twinkling{    /*透明度由0到1*/ 
   0%{ 
      opacity:0; /*透明度为0*/ 
    } 
   100%{ 
      opacity:1; /*透明度为1*/ 
 
   } 
 }

Jquery:

   $(element).css({"-webkit-animation":"twinkling 1s infinite ease-in-out"}); //在对象element中添加闪烁动画

kann auch im CSS-Stil wie folgt hinzugefügt werden:

    #element{
 
          -webkit-animation: twinkling 1s infinite ease-in-out;
 
 
     }

Hinweis: Der Animationsname blinkt, die Zeit beträgt 1 Sekunde, die Anzahl der Animationen ist unbegrenzt, der Animationseffekt ist Easy-in-out

Ganz einfach! Tatsächlich ist die Verwendung von CSS3 zum Erstellen von Animationseffekten viel bequemer und einfacher als die Verwendung von Flash und Javascript! Ich hoffe, dass Browser bald CSS3-Animationen unterstützen. Derzeit Browser mit Webkit-Kernunterstützung (Safrai, Chrome)


Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:CSS-ÜberlaufeigenschaftNächster Artikel:CSS-Überlaufeigenschaft