CSS翻书特效、vm、rem

最新推荐文章于 2023-07-11 14:46:07 发布

Yeahyeahy

最新推荐文章于 2023-07-11 14:46:07 发布

阅读量820

点赞数

文章标签：前端 css html

本文链接：https://blog.csdn.net/weixin_48268485/article/details/125458921

版权

一、翻书特效

perspective视距：确定 z=0 平面和用户之间的距离，以便为 3D 定位的元素提供一些透视。

Z-index：设置定位元素及其后代或弹性项目的z-indexz 顺序。具有较大 z-index 的重叠元素会覆盖具有较小 z-index 的元素。

transform-origin：设置元素转换的原点。

transform: rotateZ(-20deg);（旋转；注意旋转轴和旋转中心）

transition: 过渡。

<!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>Document</title>
    <style>
       body{
        background-color:#2b762b;
       }
       .main {
        width: 500px;
        height: 600px;
        position: absolute;
        top:50px;
        left: 500px;
        /* 视距 */
        perspective: 1500px;
       }   
       .light{
        width: 100%;
        height: 100%;
        background-image: url(../6-24/images/bg.jpg);
        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(-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>
</html>

二、vm、rem、em、px

vm：css中vm是视口单位，是相对于视口的宽度或高度中较小的那个。与之类似的单位有vw、vh，它们分别代表视口的最大宽度和视口的最大高度。

rem:（font size of the root element）是指相对于根元素的字体大小的单位。rem能等比例适配所有屏幕。

em:em（font size of the element）是指相对于父元素的字体大小的单位,具有继承的特点。如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。

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

@media：用于根据一个或多个媒体查询的结果应用样式表的一部分。使用它，当且仅当媒体查询与正在使用内容的设备匹配时，您指定一个媒体查询和一个要应用于文档的 CSS 块。

注意：@media（at-rule可以放在代码的顶层，也可以嵌套在任何其他条件组at-rule中。

媒体类型描述了设备的一般类别。除非使用not或者only逻辑运算符，媒体类型是可选的并且all类型是隐含的。

all:适用于所有设备。

print:用于在打印预览模式下在屏幕上查看的分页材料和文档。

screen:主要用于屏幕。

<!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>Document</title>
    <style>
        /* rem单位大小是根据 html根标签的 font-size 来决定的 */
        /* 根标签的font-size是根据屏幕大小来定 */
        html {
            /* vw */
            /* 将屏幕分成100份  1vw 单位 等同于  屏幕宽度的1/100 */
            /* 公式换算 */
            /* 100vw = 390px */
            /*  x = 100px */
            /* html标签的字体大小  100px */
            /* font-size: 25.64vw; */
            /* font-size: 20px; */
        }
        /* p {
            font-size: 0.16rem;
        } */
        /* 媒体查询 */
        /*  屏幕区间可写作 手机屏幕大小 */
        @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;
            }
        }
        /* 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;
        } */
    </style>
</head>
<body>
    <div>
        <p>123</p>
        <div class="one">这是rem的p标签</div>
    </div>
</body>

</html>