HTML-适配以及书翻页

最新推荐文章于 2023-09-07 17:05:23 发布

weixin_45855594

最新推荐文章于 2023-09-07 17:05:23 发布

阅读量176

点赞数

文章标签：大数据

本文链接：https://blog.csdn.net/weixin_45855594/article/details/125453176

版权

适配：指内容根据屏幕自适应。

1.rem适配

rem单位大小是根据 html根标签的 font-size 来决定的，根标签的font-size是根据屏幕大小来定。

vw是将屏幕分成100份，1vw 单位等同于屏幕宽度的1/100。如果你的屏幕像素是1200px,那么fontsize就写0.085，就是1rem=1px,如果写8.5，那么1rem=100px。fontsize单位是vw。

 html{
            font-size: 0.085vw;
        }



//我这里修改的是span里的文字大小

span{
            font-size: 16rem;//16rem相当于16px
        }

2.书翻页

 <style>
        body{
            background-color: rgb(98,121,5);
        }
        .main{
            width: 500px;
            height: 600px;
            position: absolute;
            top: 50px;
            left: 500px;
            transition: all 3s;
            /* 视距 */
            perspective: 1500px;
        }
        .light{
            width: 100%;
            height: 100%;
            background-image: url(./images/bg.jpg);
            background-size: cover;
            background-position: -230px 0;
            /* 拥有定位属性才能有效果*/
            z-index: 3;
            position: absolute;
            transform: all 2s;
            /* 值可以用坐标，x y数字。也可以用偏移 */
            transform-origin: left;
        }
        .book{
            width: 100%;
            height: 100%;
            position: absolute;
            background-color: white;
        }
        .main:hover{
            transform: rotateZ(-10deg);
            /* 设置盒子阴影 */
            box-shadow: 0px 1px 14px 9px white;

        }
        .main:hover .light{
            transform: rotateY(-120deg);
            box-shadow: 0px 1px 14px 9px white;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="light"></div>
        <div class="book">早起的鸟儿有虫吃</div>

    </div>
</body>