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



我们再来看看详细实现。

首先创建一个div元素容纳文本信息(能够包括很多其它元素),class取名为狗耳朵也就是卷角的意思:

div class=dog-eared-tipput 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实现书页(书本)卷角效果

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


最新回复(0)
/jishuvlYr7BXW3VHMWQtBDqGgtP24qSyBQbbj_2BW2qiA_3D_3D4719064
8 简首页