用純 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

隨選筆記文

API

Instagram Embedding 抓 iframe 高度及 3 種大小圖片

Vue

用 VuePress 製作說明文件頁面 – 6:部署

Firebase Google

Firebase Dynamic Links Analytics API 取得短網址分析資料

Front-End WordPress

用原生 JavaScript 寫一組社群分享按鈕(FB、LINE、Twitter)

Bot Telegram

Telegram Login Widget,製作用 Telegram 登入功能

Google Maps

Google Maps API 學習筆記 – 5:抓目前位置、計算到各點距離

Google Others

用 reCAPTCHA v2 來做非機器人驗證

Google Others

Google Top Heavy 演算法

Vue

用 VuePress 製作說明文件頁面 – 1:安裝

Firebase Google

Firebase Authentication 第三方登入 – GitHub

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

Let's Write

前端工程師 Augustus 的學習筆記 — solving problems, in simple ways.