东京热成人网站_XX另类XX伦理XXAV_亚洲精品无码成人AAA片_高清av中文字幕无码_手机看片国产欧美日韩高清_bd美妙第进化型

咨詢電話:
15628812133
24
2017/06

背景圖如何過渡加載

發(fā)布時(shí)間:2017-06-24 17:05:45
發(fā)布者:369563174
瀏覽量:
0

現(xiàn)在有很多網(wǎng)站用了css3新特性,切換背景圖的時(shí)候會(huì)有一個(gè)時(shí)間的過度,我們?cè)谧銎瞻铐?xiàng)目的時(shí)候也用到了這個(gè)過渡:

blob.png

在做這個(gè)導(dǎo)航的時(shí)候,鼠標(biāo)劃過去切換背景會(huì)有一個(gè)過度,那么它是怎么實(shí)現(xiàn)的呢:


    
          
  • 首頁
  •       
  • 產(chǎn)品中心
  •       
  • 解決方案
  •       
  • 咨詢與服務(wù)
  •       
  • 典型案例
  •       
  • 關(guān)于我們
  •     
.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;
}

必須得寫全,告訴瀏覽器需要這樣去執(zhí)行,這樣就實(shí)現(xiàn)背景色的過渡了

演示地址:http://www.hi7788.com/d/demo/beijingseguodu/

關(guān)鍵詞:
返回列表
相關(guān)文章
相關(guān)案例