css制作纸质效果演示

时间：2015-04-07 10:44:25 　来源：免费模板网　作者：风雪　阅读次数　tagscss特效

很个性的效果，类似翻书的效果。一些APP上就是这样的，那么在css里面怎么实现呢
CSS3做的实用纸张特效，会卷边的效果，用CSS3实现类似效果真的挺简单，代码就没多少，我觉得真的挺不错的效果

<!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(/jscss/demoimg/201206/bg_tile.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(/jscss/demoimg/201206/shadow.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制作文字打印效果

下篇：css制作木质纸张卷边特效

本文地址：https://www.freemoban.com/bjrm/2015/0407/1252.html

猜你喜欢