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

利用CSS3动画属性“@keyframes”可实现一些动态特效,具体语法和参数可以网上自行学习。

这篇文章主要是实践应用一下这个动画属性,实现页面淡入特效,在火狐24版、chrome29版、IE10中测试通过。IE9及以下浏览器不支持此特效。

淡入代码:

  1. @keyframesfade-in{

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

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

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

  5. }

  6. @-webkit-keyframesfade-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-in1.5s;/*针对webkit内核*/

  15. }

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

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

  1. #sidebar{

  2. animation:fade-in;

  3. animation-duration:4s;

  4. -webkit-animation:fade-in1.5s;

  5. }


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

实际效果可以看本博客。


版权属于:做one笔记

原文地址:https://www.zuoone.com/post/28.html

转载时必须以链接形式注明原始出处及本声明。

相关文章

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

不再显示