用純 CSS 寫的網頁預覽效果

今天在這個月 Themeforest 上看到免費下載的版型，有一塊 hover 效果很特別，主要是把網頁整頁截圖下來，在 hover 時從頭捲動到尾的。

這模版的連結在這：

SEOhub — SEO, Marketing, Social Media, Multipurpose HTML5 Template

看了一下，覺得可以用在歷年回顧或是頁面預覽的區塊上使用，就自己寫了一個。

預設 div 的寬高就用 width / padding 的 CSS 特性直接做一個正方形處理。

而捲動的效果直接用 background-position 來處理。

結合以上 2 點，實際上會寫到的 CSS 沒幾行，如下：

.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)

效果寫起來簡單，實際用起來很有趣，先記錄下來，以後有機會會用到。

以下是刻出來的效果：

See the Pen pure css preview web page effect by sean (@sean-su) on CodePen.

Summary

Article Name

用純 CSS 寫的網頁預覽效果

Description

探索如何使用純 CSS 創建網頁預覽效果。本文提供一個簡單而有趣的方法，通過 width/padding 的 CSS 特性和 background-position 處理捲動效果，僅需幾行 CSS 代碼。適用於歷年回顧或頁面預覽區塊。

August

Augustus

Let's Write

Let's Write

https://letswritetw.github.io/letswritetw/dist/img/logo_512.png