如何提高百度排名?百度排名第一怎么不花钱广?百度排名靠前的方法?

SEO秀

您现在的位置是:首页>SEO建站

SEO建站

wordpress应用CSS3完成页面淡入动画殊效

seo秀2020-11-25 06:01:39SEO建站21来源:西安百度推广

运用CSS3动画属性“@keyframes ”可完成一些动态殊效,详细语法和参数能够网上自行进修。这篇文章主如果实践运用一下这个动画属性,完成页面淡入殊效,在火狐24版、chrome29版、IE10中测试通过。IE9及以下浏览器不支持此殊效。

wordpress应用CSS3完成页面淡入动画殊效

淡入代码:

wordpress应用CSS3完成页面淡入动画殊效

  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. }  

同理,可对页面差别的部份设定差别的淡入显现时候,完成分段显现。

发表评论

评论列表(22人评论 , 21人围观)
  • 2020-12-07 12:00:02

    爱迪生千百次寻觅灯丝,就是为让你,当上耐用的电灯泡。

  • 2020-12-13 15:17:24

    做了一个风险非常大的投资,要是成功一下就能挣几个亿,要失败我这两块就打水漂了。

  • 2020-12-04 09:40:49

    脱发怎么办?要健康饮食保持良好心态,这样就能接受这个事实了。