最近在練習CSS3,很多效果都非常酷炫,但並不是都適合放上各式噗版,所以,特別選了兩款背景圖,來搭配做簡易的設計:

revisions O

/*------------------------------------------------------------------------
*噗浪版型 Plurk CSS: revisions O
*設計出處 Design by: Be Myself Inc. M6
*背景圖源 Background image from: (customize.org)
*安裝網址 Install: www.plurk.com/installDesign/5807705-cc8a17cea5
*更多佈景 More Themes: www.flickr.com/groups/plurkcss
-- 我們設計的噗版CSS僅供個人自用,請勿改製再分享或用於商業用途 --
-- Copyright: 版權所有 保留一切權利 All Rights Reserved --
------------------------------------------------------------------------*/

retrogradeX

/*------------------------------------------------------------------------
*噗浪版型 Plurk CSS: retrogradeX
*設計出處 Design by: Be Myself Inc. M6
*背景圖源 Background image from: (customize.org)
*安裝網址 Install: www.plurk.com/installDesign/5807705-25b3137f56
*更多佈景 More Themes: www.flickr.com/groups/plurkcss
-- 我們設計的噗版CSS僅供個人自用,請勿改製再分享或用於商業用途 --
-- Copyright: 版權所有 保留一切權利 All Rights Reserved --
------------------------------------------------------------------------*/

首先,朋友粉絲圖應用了翻轉的設定,就像春聯一樣,讓它呈現菱形格,然後滑鼠移過去則會恢復正常顯示。

語法:

/*朋友粉絲圖像*/
.user_link img
{
    transform: rotate(315deg);
    -webkit-transform: rotate(315deg);
    -moz-transform: rotate(315deg);
}
.user_link img:hover
{
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
}

315是旋轉的角度,可嘗試改不同的值,會有不同效果呈現。
滑鼠移至(:hover)後,角度復原為 0,所以值設 0。
-webkit- 開頭是適用 Google 瀏覽器 (Chrome) 的設定,而 -moz- 開頭則是適用火狐(Firefox) 。

 

再來,浪上的噗則應用了翻轉跟淡入效果,目前淡入(掉落至定位)功能只有 Google 瀏覽器支援,不過還是先放上了火狐的設定,等新版本出爐更新後,應該就可以適用了~

將語法分開來展示:

/*浪上的噗動態效果*/

#timeline_holder div.plurk  /*淡入*/
{
    -webkit-transition:top 0.5s ease, -webkit-transform 0.5s ease;
    -webkit-transform-origin:0 0;
    -moz-transition:top 0.5s ease, -moz-transform 0.5s ease;
    -moz-transform-origin:0 0;
}

#timeline_holder div.plurk  /*旋轉*/
{
    -webkit-transform:rotate(-15deg);
    -moz-transform:rotate(-15deg);
}
#timeline_holder div.link_extend,   /*復原*/
#timeline_holder div.plurk_box
{
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
}


同樣的,-15是角度的設定,可以改這裡的數值以呈現不同的斜度。
ease就是淡入,0.5s指的是0.5秒,也可以改其他數值調整延遲顯示的時間。

在語法設計上可以再搭配透明度、陰影與圓角的呈現,讓淡入淡出的效果更有豐富表情:

#timeline_holder .plurk_cnt  /*浪上的噗*/
{
    background:rgba(255,255,255,0.5) !important;   /*背景顏色與透明度*/
    border:0 !important;    /*框線*/
    -webkit-box-shadow:0.2px 4px 8px rgba(0,0,0,0.4);    /*外框陰影*/
    -webkit-transition:-webkit-box-shadow 0.5s ease, background 0.5s ease;    /*陰影淡化*/
    -moz-box-shadow:0.2px 4px 8px rgba(0,0,0,0.4);
    -moz-transition:-moz-box-shadow 0.5s ease, background 0.5s ease;

    -moz-border-radius:5px;/*圓角*/
    -khtml-border-radius:5px;
    -webkit-border-top-left-radius:5px;
    -webkit-border-top-right-radius:5px;
    -webkit-border-bottom-right-radius:5px;
    -webkit-border-bottom-left-radius:5px;
}

#timeline_holder div.link_extend .plurk_cnt,    /*浪上的噗-滑鼠移至展開*/
#timeline_holder div.plurk_box .plurk_cnt   /*浪上的噗-點開回應列表*/
{
    background:rgba(255,255,255,1) !important;
    border:0 !important;
    -webkit-box-shadow:0 2px 5px rgba(0,0,0,0.2);
    -webkit-transition:-webkit-box-shadow 0.2s ease, background 0.5s ease;
    -moz-box-shadow:0 2px 5px rgba(0,0,0,0.2);
    -moz-transition:-moz-box-shadow 0.2s ease, background 0.5s ease;

}

rgba 指的是 RGB色彩值與alpha透明度的設定,255,255,255是白色,0.5是50%透明度,滑鼠移至後透明度設 1 ,則恢復正常(不透明100%)顯示。各項數值都可以試著調整看看,以找出最適合你所使用的噗版的效果。

除了應用在朋友粉絲圖和浪上的噗外,也可以將相關語法設定使用在像是浪上的噗友圖、回應數和其他噗浪CSS項目。

/*浪上的噗友圖*/

#timeline_holder div.plurk .td_img
{
    filter:alpha(opacity=0); opacity:0; zoom:1;    /*透明度設0隱藏起來*/
    -webkit-transition:opacity 0.5s ease;
    -moz-transition:opacity 0.5s ease;
}

#timeline_holder div.link_extend .td_img,
#timeline_holder div.plurk_box .td_img
{
    filter:alpha(opacity=100); opacity:1; zoom:1;    /*滑鼠移至及點開後正常顯現*/
     -webkit-transition:opacity 0.5s ease;
    -moz-transition:opacity 0.5s ease;
}

 

新年快樂,喜兔年快樂~ 祝福大家都能開開心心的玩噗版,找到其中的樂趣~

 

arrow
arrow
    全站熱搜

    M6 發表在 痞客邦 留言(12) 人氣()