利用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;
- }
同理，可对页面不同的部分设定不同的淡入显示时间，实现分段显示。
实际效果可以看本博客。
本站文章大部分为原创，用于个人学习记录，可能对您有所帮助，仅供参考！
我的微信
微信号已复制
版权声明
本站原创文章转载请注明文章出处及链接，谢谢合作！
河北省秦皇岛市 1F
鸟哥求帮助！用的是最新主题
1.当浏览文章达到10篇时，然后点击任意一页面，垂直滚动条不能拉到最底部！我试了你的也不行
2.所有广告我都关闭了，除首页侧边没广告，其他页面侧边都有广告，求破！
江西省新余市 2F
为什么昨天这篇文章后面打不开了。
河北省邯郸市 3F
页面滑动加载的感觉很爽
河南省安阳市 4F
学习啦
山东省潍坊市 5F
鸟哥，现在优酷去广告的代码怎么出现的都是乱码，能不能写的再具体一点，谢谢
江苏省无锡市 6F
鸟哥，为什么我每篇文章前面的cat-ico都不能显示，点了之后“无法找到该页”
中国 B1
@ 独孤之星 看使用说明
广西桂林市雁山区 7F
麻烦帮解决个事：
如我的博客地址为：www.123.com/2 想改为：www.123.com/2.html
实现打开www.123.com/2 直接跳转到www.123.com/2.html
在.htaccess中怎么修改？谢谢了！
黑龙江省齐齐哈尔市 8F
又能学到新东西了，开心。
北京市 9F
经常上你这儿来淘点东西，很有用。谢谢分享！
浙江省宁波市 10F
LZ,我复制到CSS里面…也修改#wrapper为#theme name…为何没有效果呢?
重庆市 B1
@ Gary 能加点分享按钮。。找了半天的回复按钮
重庆市 11F
好久更新啥
山东省 12F
已撸~~~
湖北省武汉市青山区 13F
怎么给网站用户设置头像啊
河南省郑州市 14F
评论功能怎么折腾都不能用，什么原因呢？求解答！
上海市 15F
这个效果看起来不错。不知道具体操作麻烦不，试试看
四川省德阳市 16F
主题ID怎么写
我想全站都是这个效果
浙江省杭州市 17F
IE9 以下引用 PIE.htc 应该也能吧，木有试过~
湖北省 18F
刚试了下，很不错，谢谢鸟哥。
江苏省苏州市 B1
@ terwer 请教下主题ID或类的名称的格式是怎样，我尝试很久都没效果，感谢
江苏省 B2
@ lifeon 我用的是鸟哥的主题，直接添加就可以了，别的主题没有试过，下面是我的部分CSS，你可以参考下
位置在wwwrootwp-contentthemesHotNewsprostyle.css
body {
background: #f2f2f2;
font: 13px ‘Microsoft YaHei’, 微软雅黑, Arial, Lucida Grande, Tahoma, sans-serif;
color: #000;
}
@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内核*/
width: 980px;
margin: 18px auto;
line-height: 22px;
}
江苏省苏州市 B3
@ terwer 非常感谢你，刚接触不懂的太多，再次感谢～
福建省泉州市 19F
鸟哥，请问怎么快速地把侧栏宽度改成300的啊，本人急需，跪谢了，希望鸟哥回复
广东省佛山市 20F
升级 wordpress 3.7后，在后台 编辑的地方出现错误
Warning: sprintf() [function.sprintf]: Too few arguments in …./wp-admin/theme-editor.php on line 33 咋办？
江苏省苏州市 21F
请教下主题ID或类的名称的格式是怎样，我尝试很久都没效果，感谢~
广东省深圳市 22F
学习了啊！
菲律宾 23F
您好，我是您的忠实粉丝，特别想学习知更鸟主题，请问您http://zmingcx.com/videos/american-music这个视频页面 是怎么实现的？是需要建一个模板还是？请您详细跟我聊聊好吗？
中国 B1
@ 小斑马 这个是视频分类页面，与正常的文章归档页面相同
菲律宾 B2
@ 知更鸟 哦哦 那就是说 直接新建一个分类目录 然后把视频当文章一样上传就好了吗？可是我看我建了一个文章的分类目录 在添加视频那里找不到 。要么就是建了一个视频目录，但是在菜单那里显示不出来 添加不到首页里~
北京市 24F
您好，请问贵站右边的“返回顶部”和“转到底部”按钮怎么实现的？
浙江省杭州市 B1
@ IT牧童 利用抛锚技术可以实现
山东省滨州市 25F
w3c检测 错误
the at-rule @-webkit-keyframes is not implemented.
湖北省随州市 26F
以前学的全都还给老师了
广东省深圳市 27F
确实挺好的效果
湖南省湘潭市湘乡市 28F
用不着想留言还要先看看：对去掉页脚主题版权链接者，这里不欢迎你，以免我问候你家—女性长辈！
另外，对修改主题要求一律不提供免费技术支持！这句吧….
安徽省芜湖市 29F
已经在用了，感觉不错
江苏省扬州市 30F
Begin主题怎么改，直接复制到stye.css里面没有用，把#wrapper 换成Begin、#Begin也都没有用，求告知咋弄?
河南省郑州市 31F
博主你好，有个特别奇怪的小问题困扰了我两年多都不知道为啥……就是我在自己网站里使用这段css后，不知道为什么每次在Chrome里刷新后，页面都会往上面滚动一部分，刷新一次就往上滚动一点，但在edge里就没这毛病……我就很迷，不知道博主能不能猜出来这个问题大概出在哪里啊？不胜感激！！
来自外部的引用