用 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，即从一种状态过渡到另一种状态

# 更多WordPress技巧，请关注「WordPress专题」