用純 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
覺得可以用在歷年回顧或是頁面預覽的區塊上使用,就自己寫了一個。預設div的寬高就用width/padding的css特性直接做一個正方形處理。而捲動的效果直接用background-position來處理。結合以上2點,實際上會寫到的css沒幾行,如下…
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

Vue

用 VuePress 製作說明文件頁面 – 4:佈景主題、外掛

Firebase Google

用 Firebase Authentication 做一套簡易會員系統 – 電子郵件 密碼

Front-End

幾個方便開發的 Console API 應用

API

接氣象局 API、跨網域 AJAX 資料

Firebase Google

Firebase Performance 使用筆記

Analytics Google

GA:User-ID 功能 設定及報表檢視

Bot Telegram

Telegram Bot 學習筆記 – 2:用 Google Apps Script 接收 / 推播訊息

Bot Slack

Slack 通知功能 純靜態

Google Maps

Google Maps API 學習筆記 – 4:Place API 自動完成地址、地點評論摘要

WordPress

WordPress:埋 Google AdSense 廣告

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 Augustus 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 Augustus 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。

訂閱
通知
guest
0 Comments
Inline Feedbacks
看所有留言