CSS基础知识八

最新推荐文章于 2023-08-13 21:15:14 发布

阿琳啊

最新推荐文章于 2023-08-13 21:15:14 发布

阅读量307

点赞数

分类专栏：前端学习文章标签：前端 css css3

本文链接：https://blog.csdn.net/qq_57204280/article/details/123847635

版权

前端学习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1. 2D 转换

转换（transform）是 CSS3 中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果，转换可以简单理解为变形。

• 移动：translate

• 旋转：rotate

• 缩放：scale

1.1 二维坐标系

x轴水平向右，y轴垂直向下。

1.2 2D 转换之移动 translate

2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。

1.2.1 语法

translate: translate(x,y); 或者分开写

translate: translateX(n);

translate: translateY(n);

1.2.2 重点

• 定义2D转换中的移动，沿着X和Y轴移动元素

• translate最大的优点：不会影响到其他元素的位置

• translate中的百分比单位是相对于自身元素的translate: (50%,50%);

• 对行内标签没有效果

1.3 2D 转换之旋转 rotate

2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。

1.3.1 语法

transform: rotate(度数)

1.3.2 重点

• rotate里面跟度数，单位是deg，比如 rotate(45deg)

• 角度为正时，顺时针，负时，为逆时针

• 默认旋转的中心点是元素的中心点

1.4 2D 转换中心点 transform-origin

1.4.1 语法

transform-origin: x y;

1.4.2 重点

• 注意后面的参数 x 和 y 用空格隔开

• x y默认转换的中心点是元素的中心点（50% 50%）

• 还可以给x y设置像素或者方位名词（top bottom left / right center）

1.5 2D 转换之缩放 scale

缩放，顾名思义，可以放大和缩小。只要给元素加上了这个属性就能控制它放大还是缩小。

1.5.1 语法

transform: scale(x y);

1.5.2 重点

• 注意其中的 x 和 y 用逗号隔开

• transform: scale(1,1)：宽和高都放大一倍，相当于没有放大

• transform: scale(2,2)：宽和高都放大了2倍

• transform: scale(2)：只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)

• transform: scale(0.5,0.5)：缩小

• scale 缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

1.6 2D 转换综合写法

注意：

1. 同时使用多个转换，其格式为：transform: translate() rotate() scale()...等；

2. 其顺序会影响转换的效果（先旋转会改变坐标轴方向）；

3. 当我们同时有位移和其他属性的时候，记得要将位移放到最前。

1.7 2D 转换总结

• 转换 transform 我们简单理解就是变形 2D 和 3D 之分

• 暂时学的三个分别是位移、旋转和缩放

• 2D 移动 translate(x,y) 最大的优势是不影响其他盒子，里面参数用 %，是相对于自身宽度和高度来计算的

• 可以分开写比如 translateX(x) 和 translateY(y)

• 2D 旋转 rotate(度数) 可以实现旋转元素，度数的单位是 deg

• 2D 缩放 scale(x,y) 里面参数是数字，不跟单位，可以是小数，最大的优势是不影响其他盒子

• 设置转换中心点 translate-origin：x y; 参数可以百分比、像素或者是方位名词

• 当我们进行综合写法，同时有位移和其他属性的时候，记得要将位移放到最前

2. 动画

动画（animation）是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

2.1 动画的基本使用

制作动画分为两步：

1. 先定义动画；

2. 再使用（调用）动画。

1. 用 keyframes 定义动画（类似定义类选择器）

@keyframes 动画名称{

0%{

width: 100px;

}

100%{

width: 200px;

}

动画序列

• 0%是动画的开始，100%是动画的完成。这样的规则就是动画序列。

• 在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

• 动画是使元素从一种样式逐渐变化为另一种样式的效果，可以改变任意多的样式任意多的次数。

• 请用百分比来规定变化发生的时间，或用关键词"from"和"to"，等同于 0% 和 100%。

2. 元素使用动画

div {

width: 200px;

height: 200px;

background-color: aqua;

margin: 100px auto;

animation-name: 动画名称; /* 调用动画 */

animation-duration: 持续时间; /* 持续时间 */

}

2.2 动画常用属性

属性	描述
@keyframes	规定动画
animation	所有动画属性的简写属性，除了animation-play-state属性
animation-name	规定@keyframes动画的名称（必须的）
animation-duration	规定动画完成一个周期所花费的秒或毫秒，默认是0（必须的）
animation-timing-function	规定动画的速度曲线，默认是"ease"
animation-delay	规定动画何时开始，默认是0
animation-iteration-count	规定动画被播放的次数，默认是1，还有inifinte
animation-direction	规定动画是否在下一周期逆向播放，默认是"normal"，alternate逆播放
animation-play-state	规定动画是否正在运行或暂停，默认是"running"，还有"paused"
animation-fill-mode	规定动画结束后状态，保持forwards回到起始backwards

2.3 动画简写属性

animation: 动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态

• 简写属性里面不包含 animation-play-state

• 暂停动画：animation-play-state: paused; 经常和鼠标经过等其他配合使用

• 想要动画走回来，而不是直接跳回来：animation-direction: alternate

• 盒子动画结束后，停在结束位置：animation-fill-mode: forwards

2.4 速度曲线细节

animation-timing-function：规定动画的速度曲线，默认是"ease"

值	描述
linear	动画从头到尾的速度是相同的，匀速
ease	默认，动画以低速开始，然后加快，在结束前变慢
ease-in	动画以低速开始
ease-out	动画以低速结束
ease-in-out	动画以低速开始和结束
steps()	指定了时间函数中的间隔数量（步长）