用純 CSS 寫的網頁預覽效果

用純 CSS 寫的網頁預覽效果
用純 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
用純 CSS 寫的網頁預覽效果
Article Name
用純 CSS 寫的網頁預覽效果
Description
探索如何使用純 CSS 創建網頁預覽效果。本文提供一個簡單而有趣的方法,通過 width/padding 的 CSS 特性和 background-position 處理捲動效果,僅需幾行 CSS 代碼。適用於歷年回顧或頁面預覽區塊。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg
訂閱
通知
guest

0 Comments
Inline Feedbacks
看所有留言