利用CSS3实现页面淡入动画特效

2013年10月7日10:49:02 44 46,019
摘要

  利用CSS3动画属性“@keyframes ”可实现一些动态特效,具体语法和参数可以网上自行学习。这篇文章主要是实践应用一下这个动画属性,实现页面淡入特效。
在火狐24版、chrome29版、IE10中测试通过。IE9及以下浏览器不支持此特效。
  另外,可针对页面某部分延长显示时间,同理,可对页面不同的部分设定不同的淡入显示时间,实现分段显示。

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

淡入代码:

  1. @keyframes fade-in {  
  2.     0% {opacity: 0;}/*初始状态 透明度为0*/  
  3.     40% {opacity: 0;}/*过渡状态 透明度为0*/  
  4.     100% {opacity: 1;}/*结束状态 透明度为1*/  
  5. }  
  6. @-webkit-keyframes fade-in {/*针对webkit内核*/  
  7.     0% {opacity: 0;}  
  8.     40% {opacity: 0;}  
  9.     100% {opacity: 1;}  
  10. }  
  11. #wrapper {    
  12.     animation: fade-in;/*动画名称*/  
  13.     animation-duration: 1.5s;/*动画持续时间*/  
  14.     -webkit-animation:fade-in 1.5s;/*针对webkit内核*/  
  15. }  

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

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

  1. #sidebar {    
  2.     animation: fade-in;  
  3.     animation-duration: 4s;  
  4.     -webkit-animation:fade-in 1.5s;  
  5. }  

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

实际效果可以看本博客。

weinxin
我的微信
分享交流WordPress经验与技巧,关注前端设计与网站制作。仅用于功能演示。
Begin主题购买
Begin主题购买

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:44   其中:访客  36   博主  2   引用   6

    • 氪星人 3

      鸟哥求帮助!用的是最新主题

      1.当浏览文章达到10篇时,然后点击任意一页面,垂直滚动条不能拉到最底部!我试了你的也不行
      2.所有广告我都关闭了,除首页侧边没广告,其他页面侧边都有广告,求破!

      • wmtimes 7

        为什么昨天这篇文章后面打不开了。

        • 枫丹白露业主 1

          页面滑动加载的感觉很爽

          • 女性信息网 3

            学习啦

            • 糗乐分享网 2

              鸟哥,现在优酷去广告的代码怎么出现的都是乱码,能不能写的再具体一点,谢谢

              • 独孤之星 1

                鸟哥,为什么我每篇文章前面的cat-ico都不能显示,点了之后“无法找到该页”

                • 激荡 1

                  麻烦帮解决个事:
                  如我的博客地址为:www.123.com/2 想改为:www.123.com/2.html
                  实现打开www.123.com/2 直接跳转到www.123.com/2.html
                  在.htaccess中怎么修改?谢谢了!

                  • 315g小说 0

                    又能学到新东西了,开心。

                    • 工业制冷 2

                      经常上你这儿来淘点东西,很有用。谢谢分享!

                      • Gary 0

                        LZ,我复制到CSS里面…也修改#wrapper为#theme name…为何没有效果呢?

                          • asdgadg 0

                            @Gary 能加点分享按钮。。找了半天的回复按钮

                          • prince 1

                            好久更新啥

                            • 两天 6

                              已撸~~~

                              • lulu 0

                                怎么给网站用户设置头像啊

                                • kiwi 1

                                  评论功能怎么折腾都不能用,什么原因呢?求解答!

                                  • 骷髅猫博客 5

                                    这个效果看起来不错。不知道具体操作麻烦不,试试看

                                    • 123 4

                                      主题ID怎么写
                                      我想全站都是这个效果

                                      • highsea90 0

                                        IE9 以下引用 PIE.htc 应该也能吧,木有试过~

                                        • terwer 1

                                          刚试了下,很不错,谢谢鸟哥。

                                            • lifeon 2

                                              @terwer 请教下主题ID或类的名称的格式是怎样,我尝试很久都没效果,感谢

                                                • terwer 1

                                                  @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;
                                                  }

                                                    • lifeon 2

                                                      @terwer 非常感谢你,刚接触不懂的太多,再次感谢~

                                                • 鸟哥求助 1

                                                  鸟哥,请问怎么快速地把侧栏宽度改成300的啊,本人急需,跪谢了,希望鸟哥回复

                                                  • yumanutong 6

                                                    升级 wordpress 3.7后,在后台 编辑的地方出现错误
                                                    Warning: sprintf() [function.sprintf]: Too few arguments in …./wp-admin/theme-editor.php on line 33 咋办?

                                                    • lifeon 2

                                                      请教下主题ID或类的名称的格式是怎样,我尝试很久都没效果,感谢~

                                                      • 萧萧雨兮 2

                                                        学习了啊!

                                                        • 小斑马 1

                                                          您好,我是您的忠实粉丝,特别想学习知更鸟主题,请问您http://zmingcx.com/videos/american-music这个视频页面 是怎么实现的?是需要建一个模板还是?请您详细跟我聊聊好吗?

                                                            • 知更鸟 Admin

                                                              @小斑马 这个是视频分类页面,与正常的文章归档页面相同

                                                                • 小斑马 1

                                                                  @知更鸟 哦哦 那就是说 直接新建一个分类目录 然后把视频当文章一样上传就好了吗?可是我看我建了一个文章的分类目录 在添加视频那里找不到 。要么就是建了一个视频目录,但是在菜单那里显示不出来 添加不到首页里~

                                                              • IT牧童 0

                                                                您好,请问贵站右边的“返回顶部”和“转到底部”按钮怎么实现的?

                                                                  • 顾萌萌 0

                                                                    @IT牧童 利用抛锚技术可以实现

                                                                  • 两天 6

                                                                    w3c检测 错误

                                                                    the at-rule @-webkit-keyframes is not implemented.

                                                                    • angela1990ABC 0

                                                                      以前学的全都还给老师了

                                                                      • Zouming 1

                                                                        确实挺好的效果

                                                                        • 3

                                                                          用不着想留言还要先看看:对去掉页脚主题版权链接者,这里不欢迎你,以免我问候你家—女性长辈!

                                                                          另外,对修改主题要求一律不提供免费技术支持!这句吧….

                                                                          • 同盟源 3

                                                                            已经在用了,感觉不错

                                                                            • 旭旭笔记 1

                                                                              Begin主题怎么改,直接复制到stye.css里面没有用,把#wrapper 换成Begin、#Begin也都没有用,求告知咋弄?

                                                                            • 来自外部的引用: 6

                                                                              • 利用css3实现页面淡入效果 – fenx搜集档 – 搜集生活、搜集人生
                                                                              • 利用CSS3实现页面淡入动画特效[@keyframes] | SDT技术网
                                                                              • 利用代码实现WordPress页面淡入动画特效 | 盆盆罐罐
                                                                              • 利用CSS3实现页面淡入动画特效 | 小莫子
                                                                              • PVC涂塑荷兰网
                                                                              • 北京太阳城官网