03-htmlcss

2025-09-15 约 2977 字预计阅读 6 分钟

https://bing.ee123.net/img/rand?artid=151564530

03-html&css

1. 平面转换transform

作用：为元素添加动态效果，一般与过度配合使用
概念：改变盒子在平面内的形态（位移、旋转、缩放、倾斜），也叫2D转换

1.1 平移 translate

transform:translate(x轴移动距离，y轴移动距离)
取值：
像素单位数值
百分比（参照盒子自身尺寸计算）
正负均可
技巧：
translate()只写一个值，表示沿着x轴移动
单独设置的的话可以translateX()或者translateY()

1.2 旋转 rotate

属性：transform:rotate(旋转角度)
单位：deg
技巧：
取值正负均可
取值为正顺时针旋转
取值为负逆时针旋转

1.2.1 改变转换原点

默认情况下，转换原点是盒子中心点、
属性：transform-origin:水平原点位置垂直原点位置；
取值：
方位名词（top、left、right、bottom、center）
像素单位数值
百分比

1.2 缩放 scale

属性：
transform:scale(缩放倍数)
transform:scale(X轴缩放倍数,Y轴缩放倍数)
技巧：
通常，职位scale设置一个值，表示X轴和Y轴等比例缩放
取值大于1表示放大，取值小于1表示缩小

1.3 倾斜 skew

属性：transform:skew()
取值：角度度数 deg

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transform</title>
    <style>
        .father{
            width: 500px;
            height: 300px;
            border: 1px solid pink;
            /*居中显示*/
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            overflow: hidden;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: pink;
            transition: all 2s;
        }
        .father:hover .son{
            transform: translate(400px,0px) rotate(3600deg) scale(2);
            /*transform-origin: right bottom;*/
        }
        .father1{
            width: 200px;
            height: 200px;
            border: 1px solid pink;
            /*居中显示*/
            position: absolute;
            top: 0%;
            left: 50%;
            transform: translate(-50%,2px);
            background-color: #4ee87f;
            overflow: hidden;
        }
        .father1 img{
            transform:scale(2);
            opacity: 0;
            transition: all 1s;
        }
        .father1:hover img{
            transform:scale(0.3) skew(20deg);
            opacity: 1;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="son">
    </div>
</div>
<div class="father1">
    <img src="imgs/藏獒.png">
</div>
</body>
</html> 

2. 渐变

作用：渐变是多个颜色逐渐变化的效果，一般用于设置盒子背景
分类
线性渐变
径向渐变

2.1 线性渐变

属性 ：background-image:linear-gradient(渐变方向,颜色1 终点位置,颜色2 终点位置,…);
取值：
渐变方向：可选
to 方位名词
角度读书
终点位置：可选
百分比

<head>
    <meta charset="UTF-8">
    <title>渐变</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box1{
            box-sizing: border-box;
            position: relative;
            width: 200px;
            height: 200px;
            border: 1px solid pink;

        }
        .box2{
            box-sizing: border-box;
            width: 200px;
            height: 200px;
            position: absolute;
            top: 0;
            left: 0;
            border: 1px solid pink;
            background-image: linear-gradient(
            transparent,
            rgba(0,0,0,0.5)
            );
            opacity: 0;
        }
        .box2:hover{
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

2.2 径向渐变

作用：给按钮添加高光效果
属性：
background-image:redial-gradient(半径 at 圆心位置，颜色1 终点位置，颜色2 终点位置,…)
取值：
半径可以是两条，则为椭圆
圆心位置取值“像素单位数值\百分比\方位名词

<head>
    <meta charset="UTF-8">
    <title>21.1-渐变中径向渐变.html</title>
    <style>
        button{
            width: 200px;
            height: 40px;
            border-radius: 10px;
            background-color: green;
            background-image: radial-gradient(
            30px at 30px 30px,
            rgba(255,255,255,0.2),
            transparent
            )
        }
    </style>
</head>
<body>
<button>点击</button>
</body>

3. 空间转换

空间：是从坐标轴角度定义的X、Y、Z三条坐标轴构成的立体空间，Z轴位置与视线方向想用。
空间转换也叫3D转换
属性：transform
transform:translate3d(x,y,z)
transform:tanslateX();
transform:tanslateX();
transform:tanslateY();
transform:tanslateZ();
取值(正负均可)
像素单位数值
百分比（参照盒子自身尺寸计算结果）

3.1 视距 perspective

作用：制定了观察者和z=0平面的距离，为元素添加透视效果
透视效果：近大远小近实远虚
属性：添加给直接父级，取值范围：800-1200
perspective:视距；

<head>
    <meta charset="UTF-8">
    <title>空间转换</title>
    <style>
        .father{
            perspective: 1000px;
        }
        .son{
            width: 200px;
            height: 200px;
            background-color: red;

        }
        .son:hover{
            transform:translate3d(100px,200px,300px);
        }
    </style>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>

</body>

3.2 空间旋转：rotate(值)

X轴旋转：transform: rotateX(60deg)
Y轴旋转：transform: rotateY(60deg);
Z轴旋转：transform: rotateZ(60deg);

3.3 左手法则

根据旋转方向确定值取值正负
左手握住旋转轴，拇指指向正值方式，其余四个手指弯曲方向为旋转正值方向

3.4 立体呈现 transform-style

作用：设置元素的子元素是处理3D空间还是平面中
属性名：transform-style
属性值：
flat：子级处于平面中
preserve-3d:子级处于3D空间中

步骤：
父元素添加transform-style:preserve-3d
子级定位
调整合资的位置（位移或旋转）

3.5 空间缩放

属性：
transform:scale3d(x,y,z);
transform:scaleX();
transform:scaleY();
transform:scaleZ();

4. 动画 animation

过渡：实现两个状态间的变化过程
动画：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）

4.1 实现步骤

定义动画
@keyframes 动画名称{from {} to {}}
@keyframes 动画名称{0%{} 10%{} … 100%{}}
使用动画
animation:动画名称动画花费时常

4.2 介绍

animation: 动画名称动画时长速度曲线延迟时间重复次数动画方向执行完毕时状态
速度曲线：
linear:匀速
steps(n):分n段动画，工作中配合精灵图实现精灵动画
重复次数：
n:重复n次
infinite：一直重复
动画方向：
alternate：动画反向进行
动画执行完毕
forwards:动画执行完毕时候的状态

5. 移动端适配

5.1 视口标签

视口：显示html网页的区域，用来约束html的尺寸
width=device-width:视口宽度 = 设备宽度
initial-scale = 1.0 ：缩放1倍（不缩放）

<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

5.2 二倍图

概念：设置稿里面每个元素的尺寸的倍数
作用：防止图片在高分辨率的屏幕下失真模糊

5.3 适配方案

宽度适配：宽度自适应
百分比布局
flex布局
等比适配：宽高等比缩放
rem
vw

5.4 rem

rem单位是相对单位
rem单位是相对于HTML标签的字号计算结果
1rem = 1HTML字号大小

5.4.1 媒体查询

手机屏幕大小不同，分辨率不同，设置不同的html标签字号

@media(媒体特征){选择器{css属性}}
媒体查询能够检测出视口的宽度，然后编写差异化的css样式
但某个条件成立，执行对应的css样式

 <style>
        html{
            font-size: 10px;
        }
        .box1{
            width: 20rem;
            height: 20rem;
            background-color: pink;
        }
        @media (width: 375px){
            body{
                background-color: #ea0909;
            }
        }
    </style>
</head>
<body>
    <div class="box1">

    </div>
</body>

5.4.2 设备宽度不同，html字号是多少合适

设备宽度大，元素尺寸大
设置宽度小，元素尺寸小
目前rem方案中，将网页分为10份，html字号大小为1/10

5.4.3 flexible.js

flexible.js用来适配移动端的js库
核心原理就是根据不同的视口宽度给网页中的html根节点设置不同的font-size

6. less

less是一个css预处理器，less文件后缀是.less。扩充了css语言，使得css具备一定的逻辑性、计算能力
注意：浏览器不识别Less代码，目前阶段，网页要引入对应的css插件
vscode插件：easy less保存less文件后自动生成对应的css代码

6.1 less运算

加、减、乘、除
除法需要添加小括号

6.2 变量

概念：容器，存储数据
作用：存储数据，方便使用和修改
语法：
定义变量：@变量名:数据；
使用变量：css属性:@变量名
eg:@mycolor:pink; .box{color:@mycolor}

6.3 导入

作用：导入less公共样式文件
语法：导入：@import “文件路径”
提示：如果是less文件可以省略后缀
eg: @import './base.less';

6.4 导出

写法：在less文件第一行添加//out::存储url
提示：文件名后面添加/
eg：// out:./index.css 或者 //out:./css/
禁止导出：在less文件第一行添加//out:false

7. vw&vh

相对单位
相对视口的尺寸计算结果
vw:viewport width
1vw = 1/100 视口宽度
vh:viewport height
1vh = 1/100 视口高度

8. 响应式

媒体查询

@media(条件){
html{
	color:red
}
}

一般条件都是最大值(max-width)和最小值(min-width)进行判断

2.Bootstrap:简介、直观、强悍的前端开发框架，让web开发更迅速、简单
Bootstrap是由Twitter公司开发维护的前端ui框架，它提供了大量编写好的css样式，允许开发者结合一定的html结构及JavaScript，快速编写功能完善的网页及常见的交互效果。
使用：下载css样式，进行引用

目录

03-htmlcss

03-html&css

1. 平面转换transform

1.1 平移 translate

1.2 旋转 rotate

1.2.1 改变转换原点

1.2 缩放 scale

1.3 倾斜 skew

2. 渐变

2.1 线性渐变

2.2 径向渐变

3. 空间转换

3.1 视距 perspective

3.2 空间旋转：rotate(值)

3.3 左手法则

3.4 立体呈现 transform-style

3.5 空间缩放

4. 动画 animation

4.1 实现步骤

4.2 介绍

5. 移动端适配

5.1 视口标签

5.2 二倍图

5.3 适配方案

5.4 rem

5.4.1 媒体查询

5.4.2 设备宽度不同，html字号是多少合适

5.4.3 flexible.js

6. less

6.1 less运算

6.2 变量

6.3 导入

6.4 导出

7. vw&vh

8. 响应式