css3实现卷页效果

来源：互联网 2023-03-16 19:17:34 版权归原作者所有，如有侵权，请联系我们

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

工具/原料

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

css3实现卷页效果

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

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

css3实现卷页效果

再实现hover的效果

css3实现卷页效果

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

css3实现卷页效果

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

transition-duration: 0.3s;

transition-property: width, height;

css3实现卷页效果

5该信息未经授权抓取自百度经验

但是这和卷曲的效果似乎还有很大的差距，接下来就要为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时，就能看到如下图的效果了。

css3实现卷页效果

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签： CSS