css3 寫了個種紙張貼紙效果

2021-08-31 19:43:49 字數 2353 閱讀 5641

執行效果:

[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...