Heim >Web-Frontend >js-Tutorial >css3元素简单的闪烁效果实现(html5 jquery)_javascript技巧

css3元素简单的闪烁效果实现(html5 jquery)_javascript技巧

WBOY
WBOYOriginal
2016-05-16 17:06:321112Durchsuche

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中添加闪烁动画

也可以在css样式里添加如下:
复制代码 代码如下:

    #element{

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


注:动画名称为twinkling  时间为1s  动画次数为无限次  动画效果 ease-in-out

简单吧!其实用css3做动画效果,比用flash,javascript要方便简单多了!希望浏览器赶快都支持css3 Animation .目前webkit内核的浏览器都支持(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