用 CSS3 实现 WordPress 页面淡入动画特效

为了让页面打开不那么生硬,可以加入动画特效,利用 CSS3 的动画属性 @keyframes 可以实现动画特效,本文以 WordPress 为例子:

将下面的 CSS 代码,添加到 WordPress 主题的 style.css 文件中,#wrapper 修改成你的主题ID或类的名称即可。

@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内核*/ 
}

如果需要针对某个模块加入动画特效,如:WordPress 侧栏,加入下面的代码

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

@keyframes 参考手册:

语法:

@keyframes <identifier> { <keyframes-blocks> }
<keyframes-blocks>:[ [ from | to | <percentage> ]{ sRules } ] [ [ , from | to | <percentage> ]{ sRules } ]

取值:

<identifier>:identifier定义一个动画名称
<keyframes-blocks>:定义动画在每个阶段的样式,即帧动画。

说明:

指定动画名称和动画效果。
@keyframes定义的动画名称用来被animation-name所使用。
定义动画时,简单的动画可以直接使用关键字from和to,即从一种状态过渡到另一种状态