CSS3实现纸张边角卷起效果
html代码
<body>
<div class="page">
<div class="page-box">
<h1>
兔子先生
</h1>
<p>
这几天心里颇不宁静。今晚在院子里坐着乘凉，忽然想起日日走过的荷塘，在这满月的光里，总该另有一番样子吧。月亮渐渐地升高了，墙外马路上孩子们的欢笑，已经听不见了；妻在屋里拍着闰儿，迷迷糊糊地哼着眠歌。我悄悄地披了大衫，带上门出去。
</p>
<p>
沿着荷塘，是一条曲折的小煤屑路。这是一条幽僻的路；白天也少人走，夜晚更加寂寞。荷塘四面，长着许多树，蓊蓊郁郁的。路的一旁，是些杨柳，和一些不知道名字的树。没有月光的晚上，这路上阴森森的，有些怕人。今晚却很好，虽然月光也还是淡淡的。
</p>
<p>
路上只我一个人，背着手踱着。这一片天地好像是我的；我也像超出了平常的自己，到了另一世界里。我爱热闹，也爱冷静；爱群居，也爱独处。像今晚上，一个人在这苍茫的月下，什么都可以想，什么都可以不想，便觉是个自由的人。白天里一定要做的事，一定要说的话，现在都可不理。这是独处的妙处，我且受用这无边的荷香月色好了。
</p>
<p>
忽然想起采莲的事情来了。采莲是江南的旧俗，似乎很早就有，而六朝时为盛；从诗歌里可以约略知道。采莲的是少年的女子，她们是荡着小船，唱着艳歌去的。采莲人不用说很多，还有看采莲的人。那是一个热闹的季节，也是一个风流的季节。梁元帝《采莲赋》里说得好：
</p> <pre>
于是妖童媛女，荡舟心许；
鷁首徐回，兼传羽杯；
欋将移而藻挂，船欲动而萍开。
尔其纤腰束素，迁延顾步；
夏始春余，叶嫩花初，
恐沾裳而浅笑，畏倾船而敛裾。
</pre>
<p>
可见当时嬉游的光景了。这真是有趣的事，可惜我们现在早已无福消受了。
</p>
<p>
于是又记起《西洲曲》里的句子：
</p>
<pre>
采莲南塘秋，莲花过人头；
低头弄莲子，莲子清如水。
</pre>
<p>
今晚若有采莲人，这儿的莲花也算得“过人头”了；只不见一些流水的影子，是不行的。这令我到底惦着江南了。——这样想着，猛一抬头，不觉已是自己的门前；轻轻地推门进去，什么声息也没有，妻已睡熟好久了。
</p>
<div class="author">
作者:兔子先生
</div>
</div>
</div>
</body>
css代码
<style type="text/css">
*{
margin:;
padding:;
box-sizing: border-box;
}
body{
margin: 0 auto;
width: 660px;
padding: 50px 0;
background: #eee;
font-family: "STZhongsong";
font-size: 16px;
line-height: 20px;
}
.page,.page-box{
margin: 0 auto;
width: 600px;
padding: 50px 0 0 60px;
background: #fff;
border-radius: 20px;
text-align: justify;
}
.page-box{
padding: 0 60px 40px 0;
}
.page{
position: relative;
margin-left:;
filter: drop-shadow(0px 0px 15px #bbb);
}
.page:before{
content: '';
display: block;
position: absolute;
right:-60px;
top:;
width: 60px;
height: 50px;
background: linear-gradient(42deg, #ddd 30%, rgba(0,0,0,0) 40%);
}
h1{
margin-bottom: 20px;
text-align: center;
}
p,pre{
margin-bottom: 5px;
}
pre{
padding: 5px 0;
font-family: "STXingkai";
font-size: 16px;
}
p{
text-indent: 2em;
}
.author{
padding-top: 20px;
text-align: right;
font-family: "FZShuTi";
color: green;
}
</style>
效果图
原文地址：http://www.qdfuns.com/notes/32244/ef7467af54279078256efc9c878ca10a.html
CSS3实现纸张边角卷起效果的更多相关文章
- 使用 CSS3 动感的图片标题动画效果【附源码下载】
在网站中,有很多地方会需要在图片上显示图片标题.使用 CSS3 过渡和变换可以实现动感的鼠标悬停显示效果.没有使用 JavaScript,所以只能在支持 CSS3 动画的现代浏览器中才能正常工作.您可 ...
- Codrops 教程：基于 CSS3 的精美模态窗口效果
Codrops 分享了漂亮的模态窗口效果实现方法,希望给前端开发人员提供一些创新显示对话框的启示.这个方案使用了触发按钮(或任何的 HTML 元素),在点击的时候出现一个模态窗口,带有简单的过渡(或动 ...
- 使用 jQuery & CSS3 实现优雅的手风琴效果
手风琴效果常用于切换显示一组内容,这种方式既可以节省网页空间又可以有动画效果.今天,我们将创造一个优雅的手风琴内容效果.这个想法是有悬停时滑出一些垂直手风琴标签.我们将添加一些 CSS3 属性来提升外 ...
- 使用css3来实现边框圆角效果
经常看到别人的网站有个边框来修饰文字区域,类似圆角矩形把文字环绕起来,特别有感觉,于是就试着用图片边框来修饰,但是用图片过多会拉慢网页的加载速度,能不能使用css3来实现边框圆角效果呢?当然borde ...
- css3的滤镜模糊的效果
最近在做一个css3的滤镜模糊的效果,但是我发现,有些浏览器一点效果都没有,这是浏览器兼容性导致的,怕今后会忘记所以就先写下来,也希望可以帮到需要的小伙伴. 代码如下: div{//设置半透明滤镜效果 ...
- CSS3实现8种Loading效果【第二波】
原文:CSS3实现8种Loading效果[第二波] 今晚吃完饭回宿舍又捣鼓了另外几种Loading效果,老规矩,直接“上菜“…… 注:gif图片动画有些卡顿,非实际效果! PS:若要转载请注明出处,尊 ...
- css3实现色子自动翻转效果
原文:css3实现色子自动翻转效果 css3使我们能够跳出2d空间,实现3维空间的动画效果,这里给出一个自动翻转的3d色子动画效果制作过程. 第一步,首先进行HTML的布局,对于3D效果,布局有一定的 ...
- CSS3实战开发:使用CSS3实现photoshop的过滤效果
原文:CSS3实战开发:使用CSS3实现photoshop的过滤效果 我们知道,使用Photoshop来调整图像的亮度和对比度,或者将图片转化为灰度等等是很常见的功能.今天我将给大家介绍几个新特性,我 ...
- CSS3下的渐变文字效果实现
如下,第一种方法已实践 一.方法一:借助mask-image属性 可以狠狠地点击这里:CSS3下的渐变文字效果方法一demo 如果您手头上的浏览器是Chrome或是Safari,则您可以在demo页面 ...
随机推荐
- 【1】C#文件操作之目录操作
命名空间:System.IO Directory类下的静态方法: 一.创建目录 Directory.CreateDirectory(string fileName); 二.获取指定目录下的所有文件名 ...
- 《深入浅出MFC》系列之动态创建
/*************************************************************************************************** ...
- maven之web工程的搭建
参考之前jave application的工程创建的步骤,我们只需要修改最后一步 这样就创建了个web maven工程 与java application应用程序的区别,还有别的区别这里不做多的阐述. ...
- c简单的单向链表
ps:list链表 node节点 在链表中节点就是一个个的结构体 堆空间由于在申请内存时,地址是随机的,所以要用链表的方式将其连接起来,但是链表头的地址要知道. 每个节点包含两个部分:数据区和地址区 ...
- JMS 消息队列
1.jms broker服务器:Broker:消息队列核心,相当于一个控制中心,负责路由消息.保存订阅和连接.消息确认和控制事务
- iOS4.0及以上系统，关闭程序，applicationWillTerminate为调用问题解决
iOS4.0以后系统支持多任务类型,程序按下home键后,程序进入后台运行,如果内存不足被系统关闭或者手动关闭,都不会调用applicationWillTerminate回调函数. 解决方法:可以在程 ...
- Azure DevOps Server（TFS 2019) 中的SonarQube扫描任务出现错误：AppTest.java can't be indexed twice
SonarQube错误描述 将一个Maven示例程序导入到Azure DevOps的待库中,执行SonarQube扫描过程时, DevOps Server提示下面的错误信息: [ERROR] Fail ...
- 使用python来批量抓取网站图片
今天"无意"看美女无意溜达到一个网站,发现妹子多多,但是可恨一个page只显示一张或两张图片,家里WiFi也难用,于是发挥"程序猿"的本色,写个小脚本,把图片扒 ...
- 使用LINQ、Lambda 表达式 、委托快速比较两个集合，找出需要新增、修改、删除的对象
本文需要对C#里的LINQ.Lambda 表达式 .委托有一定了解. 在工作中,经常遇到需要对比两个集合的场景,如: 页面集合数据修改,需要保存到数据库 全量同步上游数据到本系统数据库 在这些场景中, ...
- Log4Net记录到数据库
WinForm下Log4Net的配置 Log4Net 组件下载地址 https://download.csdn.net/download/zgx123zgx123zg/10470986 configS ...