当前位置：主页 > 网站建设 > wordpress利用CSS3实现页面淡入动画特效,建站文章

wordpress利用CSS3实现页面淡入动画特效,建站文章

时间:2023-07-23 12:07:23 阅读: 文章分类: 网站建设作者: 网站编辑员

导读:建站文章建站文章利用CSS3动画属性“@keyframes ”可实现一些动态特效，具体语法和参数可以网上自行学习。这篇文章主要是实践应用一下这个动画属性，实现页面淡入特效，在火技术支持网站建站文章。

技术支持网站建站文章

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

淡入代码：

@keyframes fade-in {

0% {opacity: 0;}/*初始状态透明度为0*/

40% {opacity: 0;}/*过渡状态透明度为0*/

100% {opacity: 1;}/*结束状态透明度为1*/

}

@-webkit-keyframes fade-dede,模板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样式文件中，并修改其中dede模板安装 #wrapper 为你的主题ID或类的名称即可。

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

#sidebar {

animation: fade-in;

animation-duration: 4s;

-webkit-animation:fade-in 1.5s;

}

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

关键词标签: 建站页面特效

声明: 本文由我的SEOUC技术文章主页发布于:2023-07-23 ，文章wordpress利用CSS3实现页面淡入动画特效,建站文章主要讲述特效,页面,建站网站建设源码以及服务器配置搭建相关技术文章。转载请保留链接: https://www.seouc.com/article/web_35456.html