html翻页效果代码_html+css技能，制作书本翻页效果

最新推荐文章于 2024-08-01 13:43:16 发布

隔壁老裁缝

最新推荐文章于 2024-08-01 13:43:16 发布

阅读量3.2k

点赞数 1

文章标签： html翻页效果代码

本文链接：https://blog.csdn.net/weixin_42401281/article/details/113077720

版权

本文介绍了如何使用HTML和CSS创建书本翻页效果，详细讲解了实现过程，包括定义标签和样式，以及过渡效果的设置。在鼠标悬停时，书本会发生旋转效果。同时，文章提供了完整的代码示例，并推荐了2021年的Java学习路线。

摘要由CSDN通过智能技术生成

效果：

有些细节没处理好 (“▔□▔)

实现：

定义标签，shu是书本，feng是封面，wen是文字内容。

<div class="shu">
       <div class="feng"></div>     
       <div class="wen">
           <h3 style="padding-top: 50px;padding-left: 40px;">Life of Pi</h3>
           <p style=" padding-top: 20px; padding-left: 40px;padding-right: 15px;">
            He lives in Scarborough. He's a small, slim man – nomore than five foot five. Dark hair, dark eyes. Hair greyingat the temples. Can't be older than forty.            leasingcoffee-coloured complexion1. Mild fall weather, yet puts on abig winter parka with fur-lined hood2 for the walk to thediner. 
           </p>
       </div>
   </div>

定义书本的基本属性，宽高，阴影等，伪类是下面和右面那两条阴影。

.shu{
            position: relative;
            width: 300px;
            height: 400px;
            background-color: rgba(255, 255, 255, 0.774);
            transform-style:  preserve-3d;
            box-shadow:   300px 0px 30px  rgb(0, 0, 0,.6) inset;
            transition: 1s cubic-bezier(.79,.34,.47,.92);
        }
        .shu::after{
            content: '';
            position: absolute;
            height: 3px;
            width: 303px;
            left: 0px;
            bottom: -3px;
           /*  background-color: rgb(100, 96, 96); */
           background-image: linear-gradient(to right,rgb(71, 68, 68),rgba(124, 120, 120, 0.3) );
            border-bottom-left-radius: 5px;
        }
        .shu::before{
            content: '';
            position: absolute;
            width: 3px;
            height: 100%;
            right: -3px;
            top: 0px;
            background-color: rgb(112, 108, 108);
           background-image: linear-g