現在有很多網站用了css3新特性,切換背景圖的時候會有一個時間的過度,我們在做普邦項目的時候也用到了這個過渡:
在做這個導航的時候,鼠標劃過去切換背景會有一個過度,那么它是怎么實現的呢:
.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í)行,這樣就實現背景色的過渡了
上一篇: 一個頁面如何使用多個swiper插件?
下一篇: css3如何實現圖片360°旋轉效果?