css3元素简单的闪烁效果（html5 jquery）

高洛峰

Libérer： 2016-11-24 10:11:53

original

1341 Les gens l'ont consulté

css3 Animation:

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

Copier après la connexion

Jquery ：

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

Copier après la connexion

也可以在css样式里添加如下：

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

Copier après la connexion

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

简单吧！其实用css3做动画效果，比用flash，javascript要方便简单多了！希望浏览器赶快都支持css3 Animation .目前webkit内核的浏览器都支持（safrai,chrome）

Étiquettes associées：

css3

source：php.cn

Article précédent：css overflow属性 Article suivant：利用css sprites减少图片请求

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur