用 css3 实现 wordpress 页面淡入动画特效 -云顶国际

为了让页面打开不那么生硬，可以加入动画，利用 的动画属性 @keyframes 可以实现动画，本文以  为例子：

将下面的 css 代码，添加到 主题的 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内核*/ 
}

如果需要针对某个模块加入动画，如： 侧栏，加入下面的代码

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

@keyframes 参考手册：

语法：

@keyframes { }
：[ [ from | to | ]{ srules } ] [ [ , from | to | ]{ srules } ]

取值：

：identifier定义一个动画名称
：定义动画在每个阶段的样式，即帧动画。

说明：

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

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