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纸张卷边效果paper</title>
<style>
*{
	margin:0;
	padding:0;
}

body{
	background:url(//ku.shouce.ren/files/images/201601/56a3356f5c126.jpg);
}

.clear{
	clear:both;
}

.paper{
  	background:url(//ku.shouce.ren/files/images/201601/56a33570f22a0.png) no-repeat 10px 0 #FFF;
	position:relative;
	height:auto;
	width:860px;
    margin:30px auto;
	padding:15px;
	border:1px solid #CCC;
    box-shadow:2px 1px 4px 2px rgba(0,0,0,0.3);
	-webkit-transition:all 0.4s;
	-moz-transition:all 0.4s;
	-ms-transition:all 0.4s;
	-o-transition:all 0.4s;
}

.paper:hover{
	border-top-right-radius:140px 30px;
}
.paper:before, .paper:after{
	content: "";
	background:url(//ku.shouce.ren/files/images/201601/56a335724c4dc.png);
	background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); 
	background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* IE10+ */
	background: linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* W3C */
	background:#FFF;
	border:1px solid #CCC;
	position: absolute;
	z-index: -1;
    box-shadow:2px 1px 4px 2px rgba(0,0,0,0.3);
}

.paper:before {
	height:96%;
	width:96%;
	top:-20px;
	left:20px;
}
 
.paper:after {
	height:96%;
	width:98%;
	top:-10px;
	left:10px;
}
.header,.content,footer{
	float:left;
	width:100%;
}
.header{
	height:70px;
	border-bottom:1px dashed #CCC;
}

.content{
	height:auto;
	min-height:760px;
}

footer{
	height:70px;
}
.guide{
	float:left;
	font:20px Georgia, "Times New Roman", Times, serif;
	line-height:60px;
	color:#CCC;
	margin-left:120px;
}
.search {
	background: transparent url(//ku.shouce.ren/files/images/201601/56a335731c7fe.png) no-repeat;
	width: 195px;
	height: 35px;
	border: 0;
	outline: none;
	padding: 3px 15px 0 39px;
	line-height:35px;
	font-size:18px;
	float:right;
	margin:10px;
}

.search:focus {
    background-position: 0 -38px;
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    box-shadow:none;
}

.avatar{
	float:right;
	background:#FFF;
	margin:5px;
	border:1px solid #CCC;
	box-shadow:2px 1px 4px 1px rgba(0,0,0,0.3);
}

h1{
	font:32px "Trebuchet MS", Arial, Helvetica, sans-serif;
	margin:10px 0 0;
}

table{
	float:left;
	width:600px;
	font:16px "Trebuchet MS", Arial, Helvetica, sans-serif;
	list-style:none;
	margin:10px 0;
	padding:10px;
	border:1px dashed #CCC;
}

tr{
	height:30px;
	line-height:30px;
}

.discription{
	float:left;
	width:600px;
	height:auto;
	margin:5px;
	font:14px "Trebuchet MS", Arial, Helvetica, sans-serif;
	line-height:20px;
}

.discription p{
	margin:10px 0;
	letter-spacing:2px;
}
</style>
</head>
<body>

<div class="paper">
      <div class="header">
            <div class="guide">search for your requset info</div>
            <input type="text" value="" name="s" class="search">
      </div>
      <div class="content">
      <h1>Barack Hussein Obama II</h1>
            <table>
                 <tr><td>Name:</td> <td>Barack Hussein Obama II</td></tr>
                 <tr><td>Sex :</td> <td>male</td></tr>
                 <tr><td>Nationality :</td> <td>U.S</td></tr>
                 <tr><td>Career : </td><td>President</td></tr>
            </table>
            <div class="avatar"><img src=""  /></div>
            
            <div class="discription">
            <p>
            Barack Hussein Obama II is the 44th and current President of the United States. He is the first African American to hold the office. In January 2005, Obama was sworn in as a U.S. Senator in the state of Illinois. He would hold this office until November 2008, when he resigned following his victory in the 2008 presidential election.
            </p>
            
            <p>
            Born in Honolulu, Hawaii, Obama is a graduate of Columbia University and Harvard Law School, where he was the president of the Harvard Law Review. He was a Law School from 1992 to 2004. He served three terms representing the 13th District in the Illinois Senate from 1997 to 2004.
            </p>
            
            </div>
      </div>
      <div class="footer"></div>
      <div class="clear"></div>
</div>
</body>
</html>

CSS代码

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

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

CSS3纸张卷边特效

分类

CSS3

描述

一款CSS3特效代码，纸张卷边特效，鼠标移在纸张的右下角，纸张就可以卷边，挺逼真的效果，希望学习CSS3的朋友借鉴。