translateZ() 沿着z轴方向平移

z轴平移，调整元素在z轴的位置，正常情况就是调整元素和人眼之间的距离，

距离越大，z轴离人越进。距离约小，元素离人越远

z轴平移属于立体效果（近大远小），默认情况下网页是不支持透视，如果需要看见效果

必须要设置网页的视距

html{
            /* 设置当前网页的视距为800px，人眼距离网页的距离 */
            perspective: 800px;
}
            transform: translateZ(100px);

平移过渡效果

旋转 rotate

通过旋转可以使元素沿着x y 或 z旋转指定的角度

rotateX()沿着x轴方向平移

transform: rotateX(180deg);

旋转过渡效果

rotateY()沿着y轴方向平移

transform: rotateY(180deg);

旋转过渡效果

rotateZ()沿着z轴方向平移

transform: rotateZ(180deg);

旋转过渡效果

backface-visibility:是否显示元素的背面

backface-visibility: hidden;

效果

缩放 scale

scaleX()水平方向缩放

transform: scaleX(.5);

缩放过渡效果

scaleY()垂直方向缩放

transform: scaleY(.5);

缩放过渡效果

scale双方向缩放

transform: scale(1.5);
• 1

缩放过渡效果

设置3d变形效果

transform-style: preserve-3d;

Z轴

练习

表

<!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>
        .box1{
            height: 500px;
            width: 500px;
            background-color: lightsalmon;
            margin: 0 auto;
            border-radius: 50%;
        }
        .box2{
            height: 500px;
            width: 500px;
            /* background-color:lightseagreen; */
            margin: 0 auto;
            animation-name: test;
            /* 一次动画执行时间 */
            animation-duration: 60s;   
            /* 动画循环执行 */
            animation-iteration-count:infinite;   
            animation-timing-function: steps(60);  
        }
        .box3{
            height: 250px;
            width: 2px;
            background-color: black;
            margin: 0 auto;
        }
        @keyframes test{
            from{
                transform: rotateZ(0deg);
            }
            to{
                transform: rotateZ(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2">
            <div class="box3"></div>
        </div>
    </div>
</body>
</html>

立方体

<!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>
        html{
            /* 设置视距 */
            perspective: 800px;
        }
        .conetnt{
            width: 200px;
            height: 200px;
            /* background-color: cadetblue; */
            margin: 100px auto;
            /* 设置关键帧名称 */
            animation-name: test;
            /* 设置动画时间 */
            animation-duration: 10s;
            /* 设置动画循环 */
            animation-iteration-count: infinite;
            /* 开启3d样式 */
            transform-style: preserve-3d;
        }
        .conetnt div {
            /* 设置透明度 */
           opacity: 0.7;
           /* 绝对定位 */
           position: absolute;
        }
        @keyframes test {
            from{
                /* x轴平移 y轴平移 */
                transform: rotateX(0deg) rotateZ(0deg);
            }
            to{
                transform: rotateX(360deg) rotateZ(360deg);
            }
        }
        img{
            vertical-align: top;
        }
        .box1{
            /* y轴旋转90 z轴平移100  */
            transform: rotateY(90deg) translateZ(100px);
        }
        .box2{
            transform: rotateY(-90deg) translateZ(100px);
        }
        .box3{
            transform: rotateX(90deg) translateZ(100px);
        }
        .box4{
            transform: rotateX(-90deg) translateZ(100px);
        }
        .box5{
            transform: rotateY(180deg) translateZ(100px);
        }
        .box6{
             transform: rotateY(0deg) translateZ(100px); 
        }
    </style>
</head>
<body>
    <div class="conetnt">
        <div class="box1">
            <img src="https://s1.ax1x.com/2020/05/04/YCGsPK.jpg">
        </div>
        <div class="box2">
            <img src="https://s1.ax1x.com/2020/05/04/YCGcxe.jpg">
        </div>
        <div class="box3">
            <img src="https://s1.ax1x.com/2020/05/04/YCGqMQ.jpg">
        </div>
        <div class="box4">
            <img src="https://s1.ax1x.com/2020/05/04/YCGOqs.jpg">
        </div>
        <div class="box5">
            <img src="https://s1.ax1x.com/2020/05/04/YCGvaq.jpg">
        </div>
        <div class="box6">
            <img src="https://s1.ax1x.com/2020/05/04/YCJCzF.jpg">
        </div>
    </div>
</body>
</html>

效果

元素透明效果

opacity: 0.7;

less是一门css的预处理语言

less是一个css的增强版，通过less可以编写更少的代码实现更强大的样式

在less中添加了许多的新特性：像对变量的支持、对mixin的支持… …

less的语法大体上和css语法一致，但是less中增添了许多对css的扩展，

所以浏览器无法直接执行less代码，要执行必须向将less转换为css，然后再由浏览器执行

原声css对变量的支持

IE支持度不高

声明与使用

--color:#ff0;
background-color: var(--color);

easy less插件

安装插件后再写less代码时会自动生成css代码

层级后代关系

body{
    width: 100px;
    height: 100px;
    div{
        color: red;
        p{
            color: royalblue;
        }
    }
}

注释

//less单行注释
/*
  css多行注释
*/

变量

声明与赋值

//单位变量
@a:100px
@b:#bfa
div{
  width:@a;
  color:@b;
}

选择器

&当前块

body{
    // &:hover = body:hover
    &:hover{
        color: red;
    }
}
body:hover {
  color: red;
}

样式继承

.box1{
    width: 200px;
}
.box2:extend(.box1){
    color: blue;
}
.box1,
.box2 {
  width: 200px;
}
.box2 {
  color: blue;
}

样式复制

.box1{
    width: 200px;
}
.box2{
    .box1();
    color: blue;
}
.box1 {
  width: 200px;
}
.box2 {
  width: 200px;
  color: blue;
}

公共样式，类似函数

.box1(){
    width: 200px;
    color: red;
}
.box2{
    .box1();
}
.box2 {
  width: 200px;
  color: red;
}

混合函数

方法调用，传参

.box1(@h,@w){
    width: @w;
    height: @h;
    color: red;
}
.box2{
     // .box1(100px,200px);
    .box1(@w:200px,@h:100px);
}
.box2 {
  width: 200px;
  height: 100px;
  color: red;
}

移动端

像素

屏幕是由一个一个发光的小点构成，这一个个的小点就是像素
分辨率：1920 x 1080 说的就是屏幕中小点的数量，横向1920个像素点，纵向1080个像素点

在前端开发中像素要分成两种情况讨论：CSS像素和物理像素

物理像素，显示器的小点点就属于物理像素

CSS像素，编写网页时，我们所用像素都是CSS像素

浏览器在显示网页时，需要将CSS像素转换为物理像素然后再呈现

一个css像素最终由几个物理像素显示，由浏览器决定：

默认*情况下在*pc端，一个css像素** = 一个物理像素 1:1

视口 viewport

视口就是屏幕中用来显示网页的区域

可以通过查看视口的大小，来观察CSS像素和物理像素的比值
默认情况下：
视口宽度 1920px（CSS像素）
1920px（物理像素）

- 此时，css像素和物理像素的比是 1:1

浏览器放大两倍的情况：

视口宽度 960px（CSS像素）

1920px（物理像素）

    - **此时，css像素和物理像素的比是1:2**即一个浏览器显示一个css像素宽度，物理像素用了两个像素显示（此处忽略高度），`也就是100个css像素经过缩放200%后显示器显示200个像素`。

我们可以通过改变视口的大小，来改变CSS像素和物理像素的比值

影响视口宽度的因素有浏览器缩放百分比，系统缩放,拖动浏览器窗口

移动端完美视口

不同屏幕，单位像素的多少是不同的，单位像素越多屏幕会越清晰，

默认情况下，移动端的网页都会将视口设置为 980像素（css像素）。以确保pc端网页可以在移动端正常访问，但是如果网页的宽度超过了980，移动端的浏览器会自动对网页缩放以完整显示网页。

所以基本大部分的pc端网站都可以在移动端中正常浏览，但是往往都不会有一个好的体验，为了解决这个问题，大部分网站都会专门为移动端设计网页

移动端默认情况下像素比是 980/移动端宽度，即视口宽度（css像素）/移动端物理屏幕宽度

我的手机是小米6，默认情况下像素比是980/1080=0.907

如果我们直接在网页中编写移动端代码，这样在980的视口下，像素比是非常不好，导致网页中的内容非常小

编写移动页面时，必须要确保有一个比较合理的像素比：

1css像素对应 2个物理像素

1css像素对应 3个物理像素

可以通过meta标签来设置视口宽度，控制像素比，如果这样固定视口宽度会导致再不同机型下显示效果不同。

所以不能将视口宽度写死

<meta name="viewport" content="width=100px">

每一款移动设备设计时，都会有一个最佳的像素比，所以设备不同，像素比不同

一般我们只需要将像素比设置为该值即可得到一个最佳效果

将像素比设置为最佳像素比的视口大小我们称其为完美视口

<meta name="viewport" content="width=device-width">

完美视口问题

不同手机完美视口的大小是不同的。

iphonex 375px

iphone6 414px

如果设置一个元素宽度为375px，再iphonex里显示正常，再iphone6中就不能占满宽度。

由于不同设备视口和像素比不同，所以同样的375个像素在不同的设备下意义是不一样，

为什么不用100%呢？

在多层元素嵌套下，百分比的参照物不同，所以不能用百分比进行布局。

VW单位

vw表示的是视口的宽度（viewport width）

100vw = 一个视口的宽度

1vw = 1%视口宽度

vw单位永远参考于视口宽度进行计算

常规的设计图宽度750px，使用vw如何通过设计图中的大小来设计网站大小？

设计图中48x 35像素大小的元素如何在页面中保证元素大小？

100vw = 750px （设计图中像素）

0.1333333333333333333vw = 1px

0.13333333333vw x 48px = 6.4vw

0.13333333333vw x 35px = 4.66666666666vw

如果根据设计图像素计算vw ，必须通过0.133333333333*px ，数值的换算非常不方便

VW适配

1rem = 1 html的字体大小

能否将font-size设置为0.1333333333来方便设置vw呢？

font-size: 0.1333333333333333vw;

网页中字体大小最小是12px，不能设置一个比12像素还小的字体

如果我们设置了一个小于12px的字体，则字体自动设置为12

现在将font-size 扩大100倍

font-size: 13.33333333333333vw;

每次使用时设计图像素除100

width: 0.48rem;
height: 0.35rem;

练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <!-- 禁止缩放 -->
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../static/css/reset.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1800526_56a16ttb0kw.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
        <!-- 创建头部容器 -->
        <div class="head">
            <div class="menu"><i class="iconfont icon-menu"></i></div>
            <h1 class="learn">I Learn</h1>
            <div class="search"><i class="iconfont icon-search"></i></div>
        </div>
        <div class="banner">
            <a href="">
                <img src="../static/img/banner.png" alt="">
            </a>
        </div>
        <div class="btn-grop">
            <a href="" class="book">
                <i class="iconfont icon-book"></i>
                我的读书
            </a>
            <a href="" class="star">
                <i class="iconfont icon-star"></i>
                高星教师
            </a>
            <a href="" class="tag">
                <i class="iconfont icon-37tag"></i>
                我的收藏
            </a>
            <a href="" class="down">
                <i class="iconfont icon-down"></i>
                我的下载
            </a>
        </div>
        <div class="list">
            <div class="title">
                <h2>课程</h2>
                <a href="">
                    更多
                    <i class="iconfont icon-add"></i>
                </a>
            </div>
            <div class="items">
                <div class="item">
                    <a href="" class="title-img">
                        <img src="../static/img/cover.png">
                    </a>
                    <a class="title-name">欣赏美丽日出</a>
                    <a href="" class="user-name">
                        <img src="../static/img/avatar.png">
                        <p>
                            Zhao Jishun
                        </p>
                    </a>
                </div>  
                <div class="item">
                    <a href="" class="title-img">
                        <img src="../static/img/cover.png">
                    </a>
                    <a class="title-name">欣赏美丽日出</a>
                    <a href="" class="user-name">
                        <img src="../static/img/avatar.png">
                        <p>
                            Zhao Jishun
                        </p>
                    </a>
                </div>  
                <div class="item">
                    <a href="" class="title-img">
                        <img src="../static/img/cover.png">
                    </a>
                    <a class="title-name">欣赏美丽日出</a>
                    <a href="" class="user-name">
                        <img src="../static/img/avatar.png">
                        <p>
                            Zhao Jishun
                        </p>
                    </a>
                </div>  
                <div class="item">
                    <a href="" class="title-img">
                        <img src="../static/img/cover.png">
                    </a>
                    <a class="title-name">欣赏美丽日出</a>
                    <a href="" class="user-name">
                        <img src="../static/img/avatar.png">
                        <p>
                            Zhao Jishun
                        </p>
                    </a>
                </div>  
                <div class="item">
                    <a href="" class="title-img">
                        <img src="../static/img/cover.png">
                    </a>
                    <a class="title-name">欣赏美丽日出</a>
                    <a href="" class="user-name">
                        <img src="../static/img/avatar.png">
                        <p>
                            Zhao Jishun
                        </p>
                    </a>
                </div>  
            </div>
        </div>
        <div class="list">
            <div class="title">
                <h2>课程</h2>
                <a href="">
                    更多
                    <i class="iconfont icon-add"></i>
                </a>
            </div>
            <div class="items">
                <div class="item">
                    <a href="" class="title-img">
                        <img src="../static/img/cover.png">
                    </a>
                    <a class="title-name">欣赏美丽日出</a>
                    <a href="" class="user-name">
                        <img src="../static/img/avatar.png">
                        <p>
                            Zhao Jishun
                        </p>
                    </a>
                </div>  
                <div class="item">
                    <a href="" class="title-img">
                        <img src="../static/img/cover.png">
                    </a>
                    <a class="title-name">欣赏美丽日出</a>
                    <a href="" class="user-name">
                        <img src="../static/img/avatar.png">
                        <p>
                            Zhao Jishun
                        </p>
                    </a>
                </div>  
                <div class="item">
                    <a href="" class="title-img">
                        <img src="../static/img/cover.png">
                    </a>
                    <a class="title-name">欣赏美丽日出</a>
                    <a href="" class="user-name">
                        <img src="../static/img/avatar.png">
                        <p>
                            Zhao Jishun
                        </p>
                    </a>
                </div>  
                <div class="item">
                    <a href="" class="title-img">
                        <img src="../static/img/cover.png">
                    </a>
                    <a class="title-name">欣赏美丽日出</a>
                    <a href="" class="user-name">
                        <img src="../static/img/avatar.png">
                        <p>
                            Zhao Jishun
                        </p>
                    </a>
                </div>  
                <div class="item">
                    <a href="" class="title-img">
                        <img src="../static/img/cover.png">
                    </a>
                    <a class="title-name">欣赏美丽日出</a>
                    <a href="" class="user-name">
                        <img src="../static/img/avatar.png">
                        <p>
                            Zhao Jishun
                        </p>
                    </a>
                </div>  
            </div>
        </div>
</body>
</html>
*{
    margin: 0;
    padding: 0;
}
// 设置设计图宽度
@total-wigth:750;
//设置宽度
@content-width:6.93rem;
a{
    text-decoration: none;
}
html{
    // 设置rem比值
    font-size: 100vw / @total-wigth * 100;
    background-color: #eff0f4;
}
.head{
    display: flex;
    // background-color: skyblue;
    justify-content: space-between;
    height: 1.75rem;
    width: 6.93rem;
    line-height: 1.75rem;
    margin: 0 auto;
    // 辅轴对齐方式
    align-items: center;
    .learn{
        font-size: 0.7rem;
        color: #24253d;
    }
    i{
        color: #656565;
        font-size: 28px;
    }
}
.banner{
    width: 6.93rem;
    // height: 2.27rem;
    margin: 0 auto;
    // background-color: sandybrown;
    img{
        width: 100%;
        background-color: rosybrown;
        border-radius: 15px;
    }
}
.btn-grop{
    width: 6.93rem;
    height: 3.29rem;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-evenly;
    a{
        color: seashell;
        height: 1.04rem;
        width: 3.27rem;
        font-size: 0.42rem;
        line-height: 1.04rem;
        border-radius: 8px;
        text-align: center;
        i{
            font-size: 0.42rem;
        }
    }
    .book{
        background-color: #f97053;
    }
    .star{
        background-color: #c961ff;
    }
    .tag{
        background-color: #ff3971;
    }
    .down{
        background-color: #1d9bfe;
    }
}
.list{
    height: 4rem;
    margin-bottom: 0.89rem;
    .title{
        height: 0.46rem;
        width: 6.60rem;
        display: flex;
        font-size: 0.39rem;
        justify-content: space-between;
        margin: 0 auto 14px auto;
        padding-left: 14px;
        border-left: 2px solid #3a84ff;
        align-items: center;
        line-height: 0.46rem;
        text-align: center;
        a{
            color: #656565;
        }
    }
    .items{
        // background-color: steelblue;
        padding: 0.3rem;
        display: flex;
        overflow: auto;
        .item{
            flex: none;
            height: 3.03rem;
            width: 2.85rem;
            background-color: #ffffff;
            box-shadow: 0 0 10px rgba(0, 0, 0, .3);
            padding: 0.22rem;
            display: flex;
            flex-direction: column;
            border-radius: 0.2rem;
            justify-content: space-between;
            margin-right: 0.24rem;
            .title-img{
                height: 1.55rem;
                img{
                    width: 100%;
                }
            }
            .title-name{
                font-size: 0.35rem; 
                color: #24253d;
            }
            .user-name{
                display: flex;
                align-items: center;
                img{
                    width: 0.42rem;
                    height: 0.42rem;
                    margin-right: 5px;
                    vertical-align: top;
                }
                p{
                    font-size: 0.29rem; 
                    color: #969494;
                }
            }
        }
    }
}

响应式布局

网页可以根据不通的设备或窗口大小呈现出不同的效果

使用响应式布局，可以使一个网页适用于所有设备

响应布局的关键就是媒体查询

通过媒体查询，可以为不通的设备，或设备不同状态来分别设置样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MGcJZs9A-1657942884442)(https://gaoziman.oss-cn-hangzhou.aliyuncs.com/img/%E5%93%8D%E5%BA%94%E5%BC%8F%E5%B8%83%E5%B1%80.gif)]

媒体查询

语法：@media 查询规则{}

媒体类型

all 所有设备

print 打印设备

screen 带屏幕的设备

speech 屏幕阅读器

可以使用,连接多个媒体类型，这样它们之间就是一个或的关系

@media only screen {
            body{
                background-color: #bfa;
            }
        }

媒体特性

width 视口的宽度
height 视口的高度
min-width 视口的最小宽度（视口大于指定宽度时生效）
max-width 视口的最大宽度（视口小于指定宽度时生效）

@media (max-width: 500px){
             body{
                background-color: #bfa;
             }

样式切换的分界点，我们称其为断点，也就是网页的样式会在这个点时发生变化

下面是比较常用的断点

小于768 超小屏幕 max-width=768px

大于768 小屏幕 min-width=768px

大于992 中型屏幕 min-width=992px

大于1200 大屏幕 min-width=1200px

@media only screen and (min-width: 500px) and (max-width:700px){
             body{
                background-color: #bfa;
             }
         }

重学JavaWeb第二天（七）

translateZ() 沿着z轴方向平移

旋转 rotate

rotateX()沿着x轴方向平移

rotateY()沿着y轴方向平移

rotateZ()沿着z轴方向平移

backface-visibility:是否显示元素的背面

缩放 scale

scaleX()水平方向缩放

scaleY()垂直方向缩放

scale双方向缩放

设置3d变形效果

Z轴

练习

效果

元素透明效果

原声css对变量的支持

easy less插件

层级后代关系

注释

变量

选择器

混合函数

移动端

像素

视口 viewport

移动端完美视口

完美视口问题

VW单位

VW适配

练习

响应式布局

媒体查询

媒体特性

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

重学JavaWeb第二天（七）

translateZ() 沿着z轴方向平移

旋转 rotate

rotateX()沿着x轴方向平移

rotateY()沿着y轴方向平移

rotateZ()沿着z轴方向平移

backface-visibility:是否显示元素的背面

缩放 scale

scaleX()水平方向缩放

scaleY()垂直方向缩放

scale双方向缩放

设置3d变形效果

Z轴

练习

效果

元素透明效果

原声css对变量的支持

easy less插件

层级后代关系

注释

变量

选择器

混合函数

移动端

像素

视口 viewport

移动端完美视口

完美视口问题

VW单位

VW适配

练习

响应式布局

媒体查询

媒体特性

热门文章

最新文章

相关课程

相关电子书

相关实验场景