书本翻页效果 html+css_html 翻书特效

作者：我家小花儿 | 2024-02-19 22:40:07

踩

html 翻书特效

效果：

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

实现：

定义标签，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>
1
2
3
4
5
6
7
8
9

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

.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-gradient(to top,rgb(114, 111, 111),rgba(90, 87, 87, 0.5) );;
            border-top-right-radius: 3px;
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

transition: 1s cubic-bezier(.79,.34,.47,.92); 变化时间为1s，运动曲线为 cubic-bezier(.79,.34,.47,.92)，这个可以去一个网站自定义生成：点我。
在这里插入图片描述

鼠标经过，阴影变化，然后书本向左旋转：

 .shu:hover{
            box-shadow:   30px 0px 30px  rgb(0, 0, 0,.6) inset;
            transform: rotate(-5deg);

        }
1
2
3
4
5

transform: rotate(-5deg);旋转；

封面的基本样式：

 .feng{
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 2;
            background-image: url(4.jpg);
            background-size: 100% ;
            transform-origin: left;
            transition: 1s cubic-bezier(.79,.34,.47,.92);
            border-top-left-radius: 2px;
            border-bottom-left-radius: 2px;
           
           
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

transform-origin: left; 封面旋转的位置，旋转点

5.封面旋转：

 .shu:hover .feng{
            transform: rotateY(-140deg);
            
        }
       
1
2
3
4
5

文本的基本属性：

 .wen{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            font-family: 'fangsong';
            text-align: left;
        }
1
2
3
4
5
6
7
8
9

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            height: 100vh;
            background-image: radial-gradient(white,black);
           
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .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-gradient(to top,rgb(114, 111, 111),rgba(90, 87, 87, 0.5) );;
            border-top-right-radius: 3px;
        }

        .shu:hover{
            box-shadow:   30px 0px 30px  rgb(0, 0, 0,.6) inset;
            transform: rotate(-5deg);

        }
        .feng{
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 2;
            background-image: url(4.jpg);
            background-size: 100% ;
            transform-origin: left;
            transition: 1s cubic-bezier(.79,.34,.47,.92);
            border-top-left-radius: 2px;
            border-bottom-left-radius: 2px;
           
           
        }
        .shu:hover .feng{
            transform: rotateY(-140deg);
            
        }
       
     
        .wen{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            font-family: 'fangsong';
            text-align: left;
        }
    </style>
</head>
<body>
   <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>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

总结：

更多：
3D立体相册

还有，少年派的奇幻漂流真的巨好看，巨震撼，画面巨美~

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/117124?site