css3鼠标移入书页卷角

CSS3提供了更丰富的样式效果，其中鼠标移入书页卷角的效果非常炫酷。以下是实现该效果的CSS样式：

 .book {
        position: relative;
        width: 300px;
        height: 400px;
        background-color: #fff;
    }
    
    .page {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #f5f5f5;
        box-shadow: 0 0 5px #666;
        transition: transform .5s ease-in-out;
    }
    
    .page:hover {
        transform: rotateY(-180deg);
    }
    
    .page:before, .page:after {
        content: "";
        position: absolute;
        top: 0;
        width: 0;
        height: 0;
        border: 20px solid transparent;
    }
    
    .page:before {
        border-right-color: #f5f5f5;
        border-top-color: #f5f5f5;
        right: 0;
    }
    
    .page:after {
        border-left-color: #f5f5f5;
        border-bottom-color: #f5f5f5;
        left: 0;
    } 

以上代码中，book为书本的样式，设置了宽度、高度、背景颜色等属性，并将其position属性设置为relative相对定位。
page为书页的样式，设置了绝对定位，top、bottom、left、right均为0，占据整个book的区域。背景颜色为灰色，设置了阴影效果，并使用transition属性实现动画切换效果。当鼠标移入时，使用hover属性触发transform属性，旋转180度，实现卷角效果。
page:before和page:after均为伪元素，用于实现书页的卷角效果。采用border边框样式，通过设置border的颜色和方向，实现三角形卷角样式。其中page:before设置右上角卷角，page:after设置左下角卷角。

以上就是CSS3实现鼠标移入书页卷角效果的代码和说明，感兴趣的同学可以尝试实现这个效果，给网页增添一份小清新。