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

留言

avatar
  訂閱  
通知