css3实现卷页效果http://jingyan.baidu.com/article/73c3ce2806aef9e50343d93a.html

css3实现卷页效果

• |
• 浏览：31
• |
• 更新：2015-01-08 13:30

• 1
• 2
• 3
• 4
• 5
• 6
• 7

分步阅读

百度经验:jingyan.baidu.com

页面上经常会看到鼠标移动上去，对象的一角就向内侧卷曲，下面用css3实现这个效果

百度经验:jingyan.baidu.com

工具/原料

• chrome

百度经验:jingyan.baidu.com

方法/步骤

1. 1

   首先，新建一个只有div的页面，并加上适当的样式

   步骤阅读

   步骤阅读
2. 2

   简单的来说实现这个效果，就是在div的角上加一个长宽为0的div，当hover时变化它的长宽值

   所以为div的before伪类加上长宽为0内容

   步骤阅读
3. 3

   再实现hover的效果

   步骤阅读
4. 4

   当鼠标移到div上时，就能看到右上角生硬的出现了一个白色的方块

   步骤阅读
5. 5

   接下来要让动画平滑一下，在before中加上属性。现在就能看到右上角有平滑的效果了。

   transition-duration: 0.3s;

   transition-property: width, height;

   步骤阅读
6. 6

   但是这和卷曲的效果似乎还有很大的差距，接下来就要为before加上阴影，来显得卷曲。

   background: linear-gradient(225deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);

   box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4);

   然后当鼠标hover时，就能看到如下图的效果了。

   步骤阅读

   步骤阅读
   END

百度经验:jingyan.baidu.com

注意事项

• 想了解更多css3相关内容请自行网上搜索关键字