利用代码实现WordPress页面淡入动画特效

完全参考这篇文章:利用CSS3实现页面淡入动画特效

利用了CSS3的动画属性“@keyframes ”实现页面动态特效。关于@keyframes 规则

代码如下:

@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;}  
}  
#wrapper {    
    animation: fade-in;/*动画名称*/  
    animation-duration: 1.5s;/*动画持续时间*/  
    -webkit-animation:fade-in 1.5s;/*针对webkit内核*/  
}

针对不同页面设置不同的淡入时间,比如侧边栏:

#sidebar {    
    animation: fade-in;  
    animation-duration: 4s;  
    -webkit-animation:fade-in 1.5s;  
}

参考链接利用CSS3实现页面淡入动画特效

分类:Wordpress

标签:,

对本文发表评论





9 + 2 = ?

注意:
1、请勿单纯发表顶啊、打酱油之类无任何意义的评论,否则将被视为spam!谢谢合作!
2、但欢迎你留下对本文的看法或技术上的任何疑问,我会及时回复你。