CSS3动画 网页淡入淡出特效

SongKer 发布时间:2015-08-13 分类:Web 阅读:3465次 1 条评论

CSS3动画 网页淡入淡出特效,代码:

<style>
@keyframes fade-in {  
    0% {opacity: 0;}/*初始状态 透明度为0*/  
    40% {opacity: 0;}/*过渡状态 透明度为0*/  
    100% {opacity: 1;}/*结束状态 透明度为1*/  
}  
@-webkit-keyframes fade-in {/*针对webkit内核*/  
    0% {opacity: 0;}  
    40% {opacity: 0;}  
    100% {opacity: 1;}  
}  
body{    
    animation: fade-in;/*动画名称*/  
    animation-duration: 4s;/*动画持续时间*/  
    -webkit-animation:fade-in 4s;/*针对webkit内核*/  
}  
</style>

请在最新Chrome或者Firefox下进行测试。

已有1条留言

发表评论:

◎欢迎您的参与讨论。