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

知更鸟
知更鸟
知更鸟
1632
文章
6930
评论
2013年10月7日10:49:024557.3K116
摘要

  利用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 删除xmlrpc.php防DDOS攻击 WordPress

WordPress 删除xmlrpc.php防DDOS攻击

可能很多WordPress用户都不知道这个xmlrpc.php是什么,简单地说就是Wordpress 为手机等客户端提供的接口文件,早期的Wordpress 这个接口就是个万恶之源,虽然经过多次的升级...
WordPress 5.6.1 维护更新 WordPress

WordPress 5.6.1 维护更新

WordPress 5.6.1 维护更新,修复20个错误及7个区块编辑器问题,无安全更新,中文版同期发布。 看了一下更新日志,只有少数几个程序的错误,基本都是修正默认主题的错误。 该版本是一个短周期维...
登录用户显示不同的 WordPress 菜单 WordPress

登录用户显示不同的 WordPress 菜单

如果让登录用户与未登录浏览者,显示不同的菜单,可以通过下面的代码实现: 登录用户显示不同的 WordPress 菜单 将下面代码添加到当前主题函数模板functions.php中: if( is_us...
匿名

发表评论

匿名网友

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

评论:45   其中:访客  37   博主  2   引用   6
    • 氪星人 氪星人 3

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

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

      • wmtimes 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小说 315g小说 0

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

                    • 工业制冷 工业制冷 2

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

                      • Gary Gary 0

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

                          • asdgadg asdgadg 0

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

                          • prince prince 1

                            好久更新啥

                            • 两天 两天 6

                              已撸~~~

                              • lulu lulu 0

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

                                • kiwi kiwi 1

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

                                  • 骷髅猫博客 骷髅猫博客 5

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

                                    • 123 123 4

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

                                      • highsea90 highsea90 0

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

                                        • terwer terwer 1

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

                                            • lifeon lifeon 2

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

                                                • terwer terwer 1

                                                  @ lifeon 我用的是鸟哥的主题,直接添加就可以了,别的主题没有试过,下面是我的部分CSS,你可以参考下
                                                  位置在\wwwroot\wp-content\themes\HotNewspro\style.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 lifeon 2

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

                                                • 鸟哥求助 鸟哥求助 1

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

                                                  • yumanutong yumanutong 6

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

                                                    • lifeon lifeon 2

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

                                                      • 萧萧雨兮 萧萧雨兮 2

                                                        学习了啊!

                                                        • 小斑马 小斑马 1

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

                                                            • 知更鸟 知更鸟

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

                                                                • 小斑马 小斑马 1

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

                                                              • IT牧童 IT牧童 0

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

                                                                  • 顾萌萌 顾萌萌 0

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

                                                                  • 两天 两天 6

                                                                    w3c检测 错误

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

                                                                    • angela1990ABC angela1990ABC 0

                                                                      以前学的全都还给老师了

                                                                      • Zouming Zouming 1

                                                                        确实挺好的效果

                                                                        • 陌 3

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

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

                                                                          • 同盟源 同盟源 3

                                                                            已经在用了,感觉不错

                                                                            • 旭旭笔记 旭旭笔记 1

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

                                                                              • fantab01 fantab01 0

                                                                                博主你好,有个特别奇怪的小问题困扰了我两年多都不知道为啥……就是我在自己网站里使用这段css后,不知道为什么每次在Chrome里刷新后,页面都会往上面滚动一部分,刷新一次就往上滚动一点,但在edge里就没这毛病……我就很迷,不知道博主能不能猜出来这个问题大概出在哪里啊?不胜感激!!