如何使用CSS3实现书页卷角效果
方法:
先创建一个div元素容纳文本信息(可以包含更多元素),class取名为“狗耳朵”也就是卷角的意思:
<div class="dog-eared-tip">put your tips here</div>
然后编写如下的CSS代码:
.dog-eared-tip{
padding: 7.5px 5px 7.5px 20px;
background: #DEAA2F;
font-size: 13px;
position: absolute;
text-align: center;
width: 100%;
color: black;
}
.dog-eared_tip:before, .work_tip:after {
content: "";
position: absolute;
z-index: -2;
-moz-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
bottom: 15px;
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
height: 50%;
left: 10px;
max-height: 100px;
max-width: 300px;
width: 50%;
}
.dog-eared_tip:after {
-moz-transform: rotate(3deg);
-webkit-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
left: auto;
right: 10px;
}
上面的代码首先设置了div的常用样式如底色、字体、居中、边距等。
然后为该div的:before和:after伪元素设置框阴影(box-shadow)和小角度旋转(rotate方法),
并把before和after的位置放在div的底部,并且z序列为负数,这样的实际效果就是伪元素本身被div所遮挡,但是刚好使得其外围阴影部分露出底部。
基本上好了,还差最后一步,两边阴影的倾斜度在物理学上是对称的,所以还需要调整一下:after伪元素的倾斜角度(-3°调整为3°)。
这样:before对应于标签的左下边角,:after对应于标签的右下边角的卷曲阴影。
先创建一个div元素容纳文本信息(可以包含更多元素),class取名为“狗耳朵”也就是卷角的意思:
<div class="dog-eared-tip">put your tips here</div>
然后编写如下的CSS代码:
.dog-eared-tip{
padding: 7.5px 5px 7.5px 20px;
background: #DEAA2F;
font-size: 13px;
position: absolute;
text-align: center;
width: 100%;
color: black;
}
.dog-eared_tip:before, .work_tip:after {
content: "";
position: absolute;
z-index: -2;
-moz-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
bottom: 15px;
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
height: 50%;
left: 10px;
max-height: 100px;
max-width: 300px;
width: 50%;
}
.dog-eared_tip:after {
-moz-transform: rotate(3deg);
-webkit-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
left: auto;
right: 10px;
}
上面的代码首先设置了div的常用样式如底色、字体、居中、边距等。
然后为该div的:before和:after伪元素设置框阴影(box-shadow)和小角度旋转(rotate方法),
并把before和after的位置放在div的底部,并且z序列为负数,这样的实际效果就是伪元素本身被div所遮挡,但是刚好使得其外围阴影部分露出底部。
基本上好了,还差最后一步,两边阴影的倾斜度在物理学上是对称的,所以还需要调整一下:after伪元素的倾斜角度(-3°调整为3°)。
这样:before对应于标签的左下边角,:after对应于标签的右下边角的卷曲阴影。
佚名
2024-06-10 08:37:01
类似问题(10)
-
佚名2024-06-10 03:47:03
问利用js和css怎样制作一个书本翻页的效果
答这么多的代码,你只给个10分,要不得。我也给你一个10分的提示。CSS3现在有一个属性rotation,表示旋转,你可以考虑用旋转实现翻页的效果。
-
佚名2024-06-10 08:00:00
问拼多多现价卷怎么使用?
答你给我加分,我就告诉你
-
佚名2024-06-10 08:00:00
问如何用JS代码编写导航栏的翻页效果
答你要的是这个效果么,这个效果可以在开创者素材里面免费下载的
-
佚名2024-06-10 08:00:00
问用css3怎样实现高亮
答给他加一个高亮的背景颜色,或者使用渐变色的背景
-
佚名2024-06-10 08:00:00
问如何使用CSS控制3个div,实现如下图的布局?
答CSS部分————————————<style type="text/css"> .wrap{width:500px;height:auto;} ...
-
佚名2024-06-10 08:00:00
问如何使用css3技术实现幻灯片效果
答使用css3技术实现幻灯片效果HTML主要包括了3个主要部分:radio按钮和标签,容器,及其标题,如下:<section class="cr-conta...
-
佚名2024-06-10 08:00:00
问请问在PS中如何实现以下图片的效果
答用钢笔画出来就可以了,再添加颜色和特效,配合滤镜或蒙版处理一下就可以了,很简单的。
-
佚名2024-06-10 08:00:00
问如何使卷闸门更加安全
答你好,这个问题一般就是要安装防盗卷帘门,现在有专门的防盗卷帘门了,效果还好!!!
-
佚名2024-06-10 08:00:00
问如何使用rename(ren)在批处理文件中实现重命名
答rename *.xls 123.xls这样可以把各种名称的xls文件转化成123.xls文件具体你要是还想改别的再补充问题。我这个命令是在window下运行的...
-
佚名2024-06-10 08:00:00
问word排版打印成小册子,A4一半大小,书页双面打印如何实现?
答1、在 Word 中打开一篇文档,点击“文件”——“打印”菜单项,准备开始打印工作。2、弹出“打印”对话框,在“打印机”名称框的左侧,点击“属性”按钮,点击此按...
风水
起名
网名
- 1 适合12岁男生最帅气的网名还很阳光的网名
- 2 关于清洒的情侣网名
- 3 网名 耳东
- 4 两个字的失恋后的qq网名女生网名
- 5 类似花花公子的网名
- 6 两个字微信非主流网名男生霸气十足
- 7 生僻字取名网名
- 8 执着的繁体字网名
- 9 关于爱情相关的微信昵称
- 10 乐观昵称跟头像
说说
- 1 qq签名不同步
- 2 暗恋的十字签名
- 3 月考说说
- 4 刷屏的说说
- 5 关于快光棍节还单身的说说
- 6 发伤感的说说就是矫情么
- 7 回到上班的起点发说说
- 8 昨天的一场雪说说大全
- 9 朋友圈发卫生巾的说说
- 10 说说在上海的生活