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

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

高洛峰
Freigeben: 2016-11-24 10:11:53
Original
1345 Leute haben es durchsucht

CSS3-Animation:

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

Jquery:

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

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

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

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)


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage