[html] view plain copy
<div class="dog-eared-tip">put your tips here</div>
然后编写如下的CSS代码：
[css] view plain copy
.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属性，在本例基础上添加鼠标悬停效果，
也就是当用户悬停在书页上时，呈现卷角被缓缓抚平的效果，我们把这个称之为“会呼吸的纸”。
像这种效果，你要想知道，
已经下载下来，你拆开看一下就知道了。
说说原理，这里并不是纯css3，，只是用css3定义好动画，
@-moz-keyframes tips {
0% {box-shadow: 0px 0px 0px #f00}
25% {box-shadow: 0px 0px 8px #f00}
50% {box-shadow: 0px 0px 0px #f00}
100% {box-shadow: 0px 0px 8px #f00}
}
然后，js在切屏后，用Js来触发这一个样式，这个样式调用了刚才定义的动画。
.tips {
-webkit-animation:tips 1s
-moz-animation:tips 1s
}
当然css3是可以做的，只是用纯css3，就没办法像这样可以拖动切屏，这个是需要js或者jq来完成。。。
一、实现CSS3无限循环动画代码示例。
代码如下：
CSS:
@-webkit-keyframes gogogo {
0%{
-webkit-transform: rotate(0deg)
border:5px solid red
}
50%{
-webkit-transform: rotate(180deg)
background:black
border:5px solid yellow
}
100%{
-webkit-transform: rotate(360deg)
background:white
border:5px solid red
}
}
.loading{
border:5px solid black
border-radius:40px
width: 28px
height: 188px
-webkit-animation:gogogo 2s infinite linear
margin:100px
}
扩展资料实现动画无限循环所需要的CSS属性说明：
1、infinite
在animation后面加上infinite就可以无限循环，另外还可以做反向循环使用animation-direction
2、animation-name
规定需要绑定到选择器的 keyframe 名称。
3、animation-duration
规定完成动画所花费的时间，以秒或毫秒计。
4、animation-timing-function
规定动画的速度曲线。
5、animation-delay
规定在动画开始之前的延迟。
6、animation-iteration-count
规定动画应该播放的次数。
7、animation-direction
规定是否应该轮流反向播放动画。
