H5 按钮抖动效果

最新推荐文章于 2024-07-06 20:27:12 发布

Tomorrow YE

最新推荐文章于 2024-07-06 20:27:12 发布

阅读量3.6k

点赞数

分类专栏： HTML5前端文章标签：按钮抖动 icon抖动 HTML5

本文链接：https://blog.csdn.net/qq_29301417/article/details/75669995

版权

这篇博客介绍了如何使用HTML5的CSS动画来创建按钮及图标抖动的效果。通过定义关键帧动画`fade-in`实现文字渐显，以及`buzz-out`实现元素的连续抖动，并详细说明了动画的各个属性如持续时间、延迟、次数等。

摘要由CSDN通过智能技术生成

    
/*自定义一个透明度从0到1的动画，它的名称是fade-in*/
@keyframes fade-in{  
    0%{ opacity: 0;}
    100%{opacity:1;}
}
@-webkit-keyframes fade-in{
    0%{ opacity: 0;}
    100%{opacity:1;}
}
@-ms-keyframes fade-in{
    0%{ opacity: 0;}
    100%{opacity:1;}
}
@-o-keyframes fade-in{
    0%{ opacity: 0;}
    100%{opacity:1;}
}
@-moz-keyframes fade-in{
    0%{ opacity: 0;}
    100%{opacity:1;}
}
.first-words{ 
    opacity: 0;      /*实先规定文字的状态是不显示的*/
    animation: fade-in 4s ease 0s 1;    /*调用名称为fade-in的动画，全程动画显示时间4S，进入方式为ease，延时0S进入，播放次数1次*/
    -webkit-animation: fade-in 4s ease 0s 1;
    -moz-animation: fade-in 4s ease 0s 1;
    -o-animation: fade-in 4s ease 0s 1;
    -ms-animation: fade-in 4s ease 0s 1;
    
    /*规定动画的最后状态为结束状态*/
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode: forwards;  
      -o-animation-fill-mode: forwards; 
      -ms-animation-fill-mode: forwards;   
      -moz-animation-fi