咨询电话:
15628812133
24
2017/06

背景图如何过渡加载

发布时间:2017-06-24 17:05:45
发布者:369563174
浏览量:
0

现在有很多网站用了css3新特性,切换背景图的时候会有一个时间的过度,我们在做普邦项目的时候也用到了这个过渡:

blob.png

在做这个导航的时候,鼠标划过去切换背景会有一个过度,那么它是怎么实现的呢:


    
          
  • 首页
  •       
  • 产品中心
  •       
  • 解决方案
  •       
  • 咨询与服务
  •       
  • 典型案例
  •       
  • 关于我们
  •     
.nav li{display:block;vertical-align: middle;-webkit-transform: translateZ(0);transform: translateZ(0);box-shadow: 0 0 1px rgba(0, 0, 0, 0);-webkit-backface-visibility: hidden;backface-visibility: hidden;-moz-osx-font-smoothing: grayscale;position: relative; background: url(../images/nav-bg.jpg) no-repeat center right;-webkit-transition-property: color;transition-property: color;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;
}
.nav li:before {content: "";position: absolute;z-index: -1;top: 0;bottom: 0;left: 0;right: 0;background:#14a9f0;-webkit-transform: scaleX(0);transform: scaleX(0);-webkit-transform-origin: 50%;transform-origin: 50%;-webkit-transition-property: transform;transition-property: transform;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;-webkit-transition-timing-function: ease-out;transition-timing-function: ease-out;
}

必须得写全,告诉浏览器需要这样去执行,这样就实现背景色的过渡了

演示地址:http://www.cnwenhui.cn/d/demo/beijingseguodu/

返回列表
相关文章
相关案例