css3 寫了個種紙張貼紙效果

執行效果:

[img]

[img]

[img]

css:

*body 
prediv.demo 
.box 
.box p 
/******====box1**********=*/
.box1
/*使用:before來製作底部陰影，並對陰影進行旋轉的扭曲和位移設定*/
.box1:before
/*使用:after來製作頂部的陰影，並對陰影進行旋轉的扭曲和位移設定*/
.box1:after
/***********box2**********==*/
.box2
.box2:before
/*這裡，我們做出的褶皺陰影*/
.box2:after
/***********box3*****====*/
.box3
.box3:before
.box3:after
/***********==box4**********====*/
.box4
.box4:before
.box4:after
/*盒子右下角陰影效果*/
.box4 .shbr
/*盒子左下角陰影效果*/
.box4 .shbl
/***********box5***********/
.box5
/*右折效果*/
.box5:before
/*右折的陰影*/
.box5:after
/*左下角折角*/
.box5 .shblflod
/*左下角陰影*/
.box5 .shbl
/******====box6*****===*/
.box6
.box6:before
.box6:after
.box6 .cornerlf
.box6 .cornerrt
/***********box7*****====*/
.box7
.box7:before
.box7:after
/***********box8*****====*/
.box8
.box8:before
.box8:after
/******====box9*****==*/
.box9
/*底部的透明框效果*/
.box9:before
/*這是框的頂部部分的粘帶效果*/
.box9:after
/******====box10******/
.box10
.box10:before
.box10:after
/***********box11*****===*/
.box11
.box11:before
.box11:after
.box11 .ribbon
/******===box 12*****===*/
.box12
.box12:before
.box12:after
.box12 .shblflod
.box12 .shbl
.box12 .ribbon
/******==box 13******/
.box13
.box13:before
.box13:after
.box13 .cornerlf
.box13 .cornerrt
.box13 .ribbon:before
.box13 .ribbon:after
/***********box14*****====*/
.box14
.box14:before
.box14:after
.box14 .ribbon
/******====box15*****=*/
.box15
.box15:before
.box15:after
.box15 .ribbon

html:

box1
box2
box3
box4
box5
box6
box7
box8
box9
box10
box11
box12
box13
box14
box15

css3 寫了個種紙張貼紙效果

樣式 body prediv.demo box box p box1 box1 使用 before來製作底部陰影，並對陰影進行旋轉的扭曲和位移設定 box1 before 使用 after來製作頂部的陰影，並對陰影進行旋轉的扭曲和位移設定 box1 after box2 box2 box2 befo...

css3 寫了個種紙張貼紙效果

執行效果 img img img css body prediv.demo box box p box1 box1 使用 before來製作底部陰影，並對陰影進行旋轉的扭曲和位移設定 box1 before 使用 after來製作頂部的陰影，並對陰影進行旋轉的扭曲和位移設定 box1 after b...

CSS3實現10種Loading效果

原文 昨晚用css3實現了幾種常見的loading效果，雖然很簡單，但還是分享一下，順便也當是做做筆記 第1種效果 如下 loading loading span webkit keyframes load 50 loading span nth child 2 loading span nth c...