純 css 寫網頁預覽效果

Preview web page using pure CSS

Themeforest 這個版型有一塊 Hover 效果很特別,主要是把網頁整頁截圖下來,當 hover 時從頭捲動到尾。

基本邏輯

.bg {
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  background-position: top center;
  background-size: 100%;
  transition: background-position 3s ease-in-out, box-shadow 3s ease;

  &::hover {
    background-position: bottom center;
    box-shadow: inset 0 20px 20px rgba(0,0,0,0.2);
  }
}

Resources

1個讚