CSS3做的实用纸张特效

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3做的实用纸张特效，会卷边的效果paperCollection</title>
<style>
*{
  margin:0;
  padding: 0;
}

body {
	background:url(//ku.shouce.ren/files/images/201601/56a3356d7e881.jpg);
}
.clear{
	clear:both;
}
h1{
  color: #cd0000;
  font:bold 36px Verdana, Geneva, sans-serif;
  letter-spacing: -2px;
  text-align: left;
  margin:10px 60px;
  text-shadow:1px 2px 1px rgba(255,255,255,0.7);
}
/**********shoppingList*********/

.list {
	position:relative;
	background: #f5f5f5;
	color: #555;
	padding: 0 !important;
	width:480px;
	font:22px courier, monospace;
	border: 1px solid #dedede;
	box-shadow:1px 2px 4px rgba(0,0,0,0.7);
	float:left;
	margin:5px;
}
.list:before, .paper:after{
	content: "";
	height: 100%;
	width: 100%;
	background: #f5f5f5;
	border: 1px solid #dedede;
	position: absolute;
	z-index: -1;
    box-shadow:1px 2px 4px rgba(0,0,0,0.7);
}

.list:before {
	top:-10px;
	right:-10px;
}

.list li {
	list-style: none;
	border-bottom: 1px dotted #ccc;
	text-indent: 25px;
	height: auto;
	padding: 10px;
	text-transform: capitalize;
}
.list li:hover {
	background-color: #f0f0f0;
	-webkit-transition: all 0.2s;
	-moz-transition:    all 0.2s;
	-ms-transition:     all 0.2s;
	-o-transition:      all 0.2s;
}
.lines {
	border-left: 1px solid #ffaa9f;
	border-right: 1px solid #ffaa9f;
	width: 2px;
	float: left;
	height: 520px;
	margin-left: 40px;
}

.shadow {
	background: url(//ku.shouce.ren/files/images/201601/56a3356ddf55c.png);
	float:left;
	width: 500px;
	height: 12px;
	-webkit-transition:0.6s;
}

/**********invoice*********/
.invoice {
	padding: 0 !important;
	width: 500px;
	height:auto;
	float:left;
	margin:-50px 0;
	margin-left:10px;
}

.content{
	background:#FDFDFD;
    background: -webkit-gradient(linear, 0% 0%, 0% 80%, from(#FFF), to(#F2F2F2));
    background: -moz-linear-gradient(#FFF,#F2F2F2 80%);
	color:#333;
	width:500px;
	height:580px;
	padding:20px 0 10px;
	float:left;
	border: 1px solid #dedede;
	-webkit-transition:all 0.4s;
	-moz-transition:all 0.4s;
	-ms-transition:all 0.4s;
	-o-transition:all 0.4s;
	box-shadow:1px 2px 4px rgba(0,0,0,0.7);
	
}

.content:hover{
	border-bottom-right-radius:140px 30px;
	box-shadow:6px 6px 6px rgba(0,0,0,0.7);
}

.invoice p{
	font:bold 16px courier, monospace;
	text-align:center;
	line-height:20px;
	margin:6px 0;
}
.title{
	font-size:18px;
}

.line{
	width:440px;
	margin:0 30px;
	height:40px;
	font:bold 14px courier, monospace;
	line-height:50px;
	border-bottom:1px dashed #333;
}

.listTitle{
	margin-top:10px;
	text-align:left;
	font:22px Arial, Helvetica, sans-serif;
	text-indent:50px;
	word-spacing:12px;
}

.voiceList{
	width:380px;
	height:20px;
	margin:6px auto;
	font:bold 15px Arial, Helvetica, sans-serif;
	line-height:20px;
}

.left{
	float:left;
}

.right{
	float:right;
}

.footer{
	width:370px;
	margin:0 60px;
	height:auto;
	min-height:4px;
	border-top:1px dashed #333;
}

.footer p{
	text-align:left;
	line-height:20px;
	margin-top:6px;
}

</style>
</head>

<body>

<h1>Paper Collection</h1>
    <ul class="list"><div class="lines"></div>
          <li>Eat Breakfeast</li>
          <li>Feed Pugsly, the cow</li>
          <li>Sit Down</li>
          <li>Eat lunch</li>
          <li>Call mom</li>
          <li>Tweet about feeding my cow, pugsly</li>
          <li>Join a hangout in google+</li>
          <li>Prepare Dinner</li>
          <li>Eat Dinner</li>
          <li>Get ready for bed</li>
          <li>Go to bed</li>
    </ul>
                  <div class="shadow" id="shadow"></div>
     <div class="invoice">
              <div class="content" id="content">
                    <p class="title">Starbucks Coffee China</p>
                    <p>星巴克大悦城店</p>
                    <p>StarbucksCoffee JOY CITY Store</p>
                    <p>Tel:010-88776767</p>
              
                    <div class="line">  1040 hu jiahui</div>
                    <div class="line">chk 5671 <div class="right">Jan'09 11:24 Gts 0</div></div>
                    
                    <div class="listTitle">To Go</div>
                    <div class="voiceList">
                         <div class="left">大杯摩卡星冰乐</div>
                         <div class="right">32.00</div>
                    </div>
                    
                    <div class="voiceList">
                         <div class="left">中杯焦糖玛奇朵</div>
                         <div class="right">32.00</div>
                    </div>
                    
                    <div class="voiceList">
                         <div class="left">Cash</div>
                         <div class="right">100.0</div>
                    </div>
                    
                    <br/>
                    
                    
                    <div class="voiceList">
                         <div class="left">Subtotal</div>
                         <div class="right">64.0</div>
                    </div>
                    
                    <div class="voiceList">
                         <div class="left">Paid</div>
                         <div class="right">100.0</div>
                    </div>
                    <div class="voiceList">
                         <div class="left">Change Due</div>
                         <div class="right">36.0</div>
                    </div>
                    <br/>
                    <div class="footer"></div>
                    <div class="footer">
                    <p>顾客服务专线：(010)87667677</p>
                    <p>Service Hotline：(010)87667677</p>
                    <p>消费日一月内凭小票到原店发票索取发票</p>
                    <p>Invoice Claimable Within 1 Month</p>
                    </div>
              </div>
              <div class="clear"></div>
    </div>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

CSS3做的实用纸张特效

分类

CSS3

描述

CSS3做的实用纸张特效，会卷边的效果，用CSS3实现类似效果真的挺简单，代码就没多少，我觉得真的挺不错的效果。