今天在這個月 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
覺得可以用在歷年回顧或是頁面預覽的區塊上使用，就自己寫了一個。預設div的寬高就用width/padding的css特性直接做一個正方形處理。而捲動的效果直接用background-position來處理。結合以上2點，實際上會寫到的css沒幾行，如下…
Augustus
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg
以下是留言，但關於留言的部份必需先讓你們知道：
本站的文章都是 August 因為覺得有趣，才會實作並整理成筆記文而後進行發表。
如果留言是希望把 Demo 改成「你想要」的樣子，或是把功能改成「符合你需求」的樣子，
Sorry~ 除非那修改是 August 也有興趣的，不然不會幫你們寫程式去面對工作或是交作業。
未來這類的留言不會再主動回覆。😎
另外，公開信箱是為了讓金流驗證用，
因為之前遇過幾次回信協助解決問題後，對方卻一聲謝謝也沒有，就這樣拿去幫工作交差。
因此決定不再回覆信件，有疑問就利用留言功能囉。