使用CSS制作淡入淡出动画效果,提升视觉效果

2021-10-14 小微发布 技术日志

CSS3新增动画属性“@-webkit-keyframes”,从字面就可以看出其含义——关键帧,这与Flash中的含义一致。利用CSS3制作动画效果其原理与Flash一样,我们需要定义关键帧处的状态效果,由CSS3来驱动产生动画效果。


/*淡出*/
@keyframes fadein{
0%{opacity: 0;}
100%{opacity: 1;}
}

@-webkit-keyframes fadein{
0%{opacity: 0;}
100%{opacity: 1;}
}

@-moz-keyframes fadein{
0%{opacity: 0;}
100%{opacity: 1;}
}

@-o-keyframes fadein{
0%{opacity: 0;}
100%{opacity: 1;}
}

body{
animation:fadein .2s linear 1;
-webkit-animation:fadein .2s linear 1;
-moz-animation:fadein .2s linear 1;
-o-animation:fadein .2s linear 1;
}

标签: PHP 涨姿势  浏览(120)