CSS3实现闪烁动画效果的方法
发布时间：2015-02-09 16:15:41 作者：佚名 
我要评论
我要评论这篇文章主要为大家介绍了CSS3实现闪烁动画效果的方法,可实现属性名为className的元素呈现闪烁效果的功能,非常具有实用价值,需要的朋友可以参考下
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
本文实例讲述了CSS3实现闪烁动画效果的方法。分享给大家供大家参考。具体方法如下：
给class属性名为className的元素添加闪烁动画效果
复制代码
代码如下:.className{
-webkit-animation: twinkling 1s infinite ease-in-out
}
.animated{
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}
@-webkit-keyframes twinkling{
0%{
opacity: 0.5;
}
100%{
opacity: 1;
}
}
@keyframes twinkling{
0%{
opacity: 0.5;
}
100%{
opacity: 1;
}
}
-webkit-animation: twinkling 1s infinite ease-in-out
}
.animated{
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}
@-webkit-keyframes twinkling{
0%{
opacity: 0.5;
}
100%{
opacity: 1;
}
}
@keyframes twinkling{
0%{
opacity: 0.5;
}
100%{
opacity: 1;
}
}
希望本文所述对大家基于css的网页设计有所帮助。
相关文章
这篇文章主要介绍了css3 实现文字闪烁效果的三种方式示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编2021-04-25
这篇文章主要介绍了使用CSS3实现按钮悬停闪烁动态特效,代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-08-25
最新评论