用css3制作紙張效果(外翻卷角)

2024-07-11 08:29:02

字體：大中小

來源：轉載

供稿：網友

用css3制作紙張效果

一、中規中矩的效果

所謂“中規中矩的效果”就是加個投影，貼個膠帶什么的。效果如下：
中規中矩的紙張效果張鑫旭-鑫空間-鑫生活

這里紙張本身的效果沒有什么說頭的，就是個CSS3的box-shadow投影效果而已，相關代碼如下：

復制代碼

代碼如下:
-moz-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);

反而是上面的膠帶紙效果有點說頭，這些微微傾斜的膠帶是CSS寫出來的，大部分效果源自CSS3，主要有RGBA顯示半透明背景色，box-shadow顯示淡淡的投影，transform做旋轉效果；元素使用after偽類生成，完整代碼如下：

復制代碼

代碼如下:
.page:after { width: 180px; height: 30px; content: " "; margin-left: -90px; border: 1px solid rgba(200, 200, 200, .8); background: rgba(254, 254, 254, .6); -moz-box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1); box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1); -moz-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); position: absolute; left: 50%; top: -15px; }

老外似乎很喜歡使用before和after偽類，國外最近的些教程，技術點等經常見到此玩意。我個人感覺有跟風之嫌，就像是狂熱的經濟泡沫，不需要太久，大家會冷靜下來重新審視這些曾經上手簡單，自我感覺不錯的方法。由于目前IE6/7不支持before/after類，所以，某種意義上來說，偽類的使用少了些兼顧IE下顯示的煩惱。

二、外翻卷角紙張效果

紙張一般都是有卷角的，所以，我們可以更近一步，模擬卷角效果來使得紙張的感覺更逼真，這里就要借助于投影了，且是曲線投影。

我們還可以給紙張增加漸變(gradient)效果，以模擬紙張的曲度。
同時，可以給文字增加投影，可以讓文字有書寫的凹陷感，可以進一步讓紙張效果更逼真。

于是，在“中規中矩”紙張基礎上，我們做點小手術，結果得到下面的效果：
卷角，漸變，文字凹陷紙張效果截圖張鑫旭-鑫空間-鑫生活