background-attachment屬性為何會讓此可樂罐產生動畫效果?
02-07
演示地址:
Pure CSS Coke Can這個實現的原理是什麼?
瀉藥
background-attachment: fixed;
不是讓背景圖相對視口固定么然後它的容器有margin auto 啥的
再固定位置margin l/r 根據布局計算塊顯示位置的然後縮小放大窗口
寬固定了margin l/r 的得變吧
然後容器就左右移動了它的背景圖被fix了不動了所以就相當於背景圖開窗顯示了一部分根據背景圖初始定位偏移
組成這樣的效果。推薦閱讀:
※CSS3 的按鈕怎麼快速實現樣式?
※css3 滑鼠:hover效果會平滑過渡,但滑鼠離開,效果消失的太生硬,能不能和:hover一樣平滑過渡?
※父元素設置了overflow:hidden和border-radius,子元素超出部分不隱藏?
※inline-block和inline,block,table,table-cell的區別是什麼,就是之間有什麼特性?
TAG:CSS3 |