css实现翻书效果/VW/REM

作者：Gausst松鼠会 | 2024-02-19 22:47:18

踩

css实现翻书效果


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>书本翻书特效</title>
    <style>
        body{
            background-color: black;
        }
        .main{
            width: 500px;
            height: 600px;
            /* background-color: brown; */
            position: absolute;
            top: 50px;
            left: 500px;
            transition: all 1s;
            /* 视距 */
            perspective: 1500px;
            
        }
        .light{
            width: 100%;
            height: 100%;
            background-image: url(./bg.jpg);
            /* 图片进行等比例的放大缩小 */
            /* background-size: contain; */
            background-size:cover ;
            background-position: -230px 0;
            /* 只有拥有定位属性才能有效果 */
            z-index: 3;
            position: absolute;
            transition: all 2s;
             /* 值可以用坐标，x y数字，也可以用偏移量代词 */
             transform-origin: left;
        }
        .book{
            width: 100%;
            height: 100%;
            position: absolute;
            background-color: white;
            
 
        }
        .main:hover{
            transform: rotateZ(-20deg);
            box-shadow: 0px 1px 14px 9px white;
        }
        .main:hover .light{
            transform: rotateY(-120deg);
           
        }
    </style>
</head>
<body>
    <div class="main">
    <div class="light"></div>
    <div class="book">
        <p> "You know some birds are not meant to be caged,</p>
        <p>their feathers are just too bright."</p>
        <p> 你知道，有些鸟儿是注定不会被关在牢笼里的，</p>
        <p>它们的每一片羽毛都闪耀着自由的光辉。</p>
        <p>                  《肖申克的救赎》</p>
       
    </div>
</div>
</body>
</html>

主要利用的效果：

旋转 transform: rotateZ(-20deg);

过渡 transition: all 1s;

旋转轴和旋转中心（旋转点）

box-shandow 盒子阴影

注意：利用绝对定位进行布局

VM是什么单位？

vm是CSS3中的一个相对长度单位，相对于视口的宽度。视口被均分为100份，那么1vm的尺寸就是视口宽度的百分之一。

例如：视口的宽度是1000px，那么5vm就是50px


div{
 
font-size:5vm;
 
}

公式换算

100vw = 390px

x = 100px

html标签的字体大小 100px

font-size: 25.64vw;

font-size: 20px;

其他单位：rem px em

px

px像素,是我们网页中常用的基本单位，通过px可以设置固定像素，固定的字体大小等，无论设备怎么改变，设置的值都不会改变。

缺点：没有弹性，不能随设备的变化而变化，达不到适应所有设备的效果

rem

rem是相对于根元素html，这样就意味着，我们只需要在根元素确定一个参考值，可以设计HTML为大小为12px，到时设置1rem就是12px，以此类推。

优点是，只需要设置根目录的大小就可以把整个页面的成比例的调好。

em

参考物是父元素的font-size，具有继承的特点。如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。
特点：

1. em的值并不是固定的；

2. em会继承父级元素的字体大小。


        /* rem  px  em */
        /* div {
            font-size: 25px;
        } */
 
        /* 1em值 等于 父元素 font-size的值 */
        /* p {
            font-size: 1em;
            width: 10em;
            height: 10em;
            background-color: #ccc;
        } */
 
 
        /* rem的值 不是根据父元素来定，根据html 的font-size 值来定。 */
 
        /* .one {
            font-size: 0.16rem;
            width: 1rem;
            height: 1rem;
            background-color: red;
        } */

媒体查询

基本定义：使用 @media查询，可以针对不同的媒体类型定义不同的样式

mediatype：媒体类型，包含（all，print，screen，speech）
1.all–所有设备
2.print–打印机和打印预览
3.screen–电脑屏幕，平板电脑，智能手机等
4.屏幕阅读器等发声设备
（广泛使用的是all和screen）

and|not|only：逻辑操作符，可以用来构建复杂的媒体查询 1.all–用来把多个媒体属性组合起来，合并到同一条媒体查询中。只有当每个属性都为真时，这条查询的结果才为真。在不使用not或only操作符的情况下，媒体类型是可选的，默认为all。 2.not–用来对一条媒体查询的结果进行取反 3.only–表示仅在媒体查询匹配成功时应用指定样式

参考文档：CSS Media媒体查询使用大全，完整媒体查询总结 - 奔跑的太阳花 - 博客园

媒体查询的基本用法_六鼎的博客-CSDN博客_媒体查询


<head>
 
    <style>
        /* 媒体查询 */
        /*  屏幕区间可写作 手机屏幕大小 */
        @media screen and (min-width:801px) {
            p {
                background-color: #ccc;
                font-size: 25px;
            }
        }
 
        @media screen and (max-width:800px) {
            p {
                background-color: pink;
                font-size: 16px;
            }
        }
 
        @media screen and (max-width:320px) {
            p {
                background-color: red;
                font-size: 12px;
 
            }
        }
 
 
    </style>
</head> }

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