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

高洛峰

Lepaskan： 2016-11-24 10:11:53

asal

1339 orang telah melayarinya

css3 Animation:

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

Salin selepas log masuk

Jquery ：

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

Salin selepas log masuk

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

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

Salin selepas log masuk

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

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

Label berkaitan：

css3

sumber：php.cn

Artikel sebelumnya：css overflow属性 Artikel seterusnya：利用css sprites减少图片请求

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang