码迷,mamicode.com
首页 > Web开发 > 详细

怎样使用CSS3实现书页(书本)卷角效果

时间:2017-08-06 12:44:25      阅读:589      评论:0      收藏:0      [点我收藏+]

标签:ATX   rcc   pap   w3g   kde   gid   ict   cuc   center   

我们有时候想在页面显示一个公告或用户提示信息。

一个经常使用设计是使用书签形状。

我们能够给书签加入卷角效果。以使其更为逼真。所谓的“卷角”实际上能够用小角度倾斜的阴影效果来模拟。

用CSS3的伪元素实现这个效果非常easy。


先给出一个实例。我们在WOW网站页面左边栏实现了例如以下的效果(红框内):

技术分享


我们再来看看详细实现。

首先创建一个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所遮挡。可是刚好使得其外围阴影部分露出底部。

注意,这里请记得不要给div设置overflow不可见的样式。否则阴影不可见。

基本上好了,还差最后一步,两边阴影的倾斜度在物理学上是对称的,所以我们还须要调整一下:after伪元素的倾斜角度(-3°调整为3°)。

这样:before相应于标签的左下边角。:after相应于标签的右下边角的卷曲阴影。

本例在IE11/Chrome/FF/Edge下能够工作。


你还能够使用CSS3中的伪类:hover和transition属性。在本例基础上加入鼠标悬停效果,

也就是当用户悬停在书页上时。呈现卷角被缓缓抚平的效果,我们把这个称之为“会呼吸的纸”。

详细可參考WOW首页的实现


by iefreer

怎样使用CSS3实现书页(书本)卷角效果

标签:ATX   rcc   pap   w3g   kde   gid   ict   cuc   center   

原文地址:http://www.cnblogs.com/yutingliuyl/p/7294036.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!