如何使用css为wordpress页面淡入动画特效

html-css015

如何使用css为wordpress页面淡入动画特效,第1张

利用CSS3动画属性“@keyframes ”可实现一些动态特效，具体语法和参数可以网上自行学习。这篇文章主要是实践应用一下这个动画属性，实现页面淡入特效，在火狐24版、chrome29版、IE10中测试通过。IE9及以下浏览器不支持此特效。 淡入代码：

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

}

直接将上述代码添加到主题style样式文件中，并修改其中 #wrapper 为你的主题ID或类的名称即可。

另外，可针对页面某部分延长显示时间，比如侧边栏，再加上一句：

#sidebar {

animation: fade-in

animation-duration: 4s

-webkit-animation:fade-in 1.5s

}

同理，可对页面不同的部分设定不同的淡入显示时间，实现分段显示。

首先我们创建一个html文件，写出html文件的一些基础代码

然后我们在网页中新建一个div，并新建一个

无序列表并创建4个然后使用浏览器直接打开html文件，查看效果，可以看到我们创建的标签自带有一定的格式，

接下来我们使用下面的代码去除标签的格式，其中：list-style:none表示去除标签的格式width:160px表示设置标签的宽height:240px表示设置标签的高background:#666666表示设置标签的背景色float:left表示设置标签浮动显示，并且为左浮动margin-right:20px表示设置标签右外边距

刷新浏览器中html文件查看效果，

这里我们开始添加动画：

给

标签添加：

transition:transform 0.1s

transform表示变换的属性，0.1上表示表换所需要的时间另外给标签添加鼠标滑动属性

li:hover{cursor:pointertransform:translate(0,-10px)}

cursor:pointer表示鼠标滑过显示为小手形状

transform:translate(0,-10px)translate表示移动，第一个参数为水平移动值，第二个参数为垂直移动值，

进入浏览器直接查看效果，如下图实现了鼠标滑过块，块上移的动画特效，如下图：

块阴影 box-shadow

文本阴影text-shadow

圆角border-radius

背景半透明background:rgba(...)

。。。