CSS------10.2D转换与动画

最新推荐文章于 2024-09-24 15:55:35 发布

结果才重要

最新推荐文章于 2024-09-24 15:55:35 发布

阅读量245

点赞数 1

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

本文链接：https://blog.csdn.net/m0_60237095/article/details/123583795

版权

前端复习专栏收录该内容

24 篇文章 1 订阅

订阅专栏

三、设置元素旋转中⼼点(transform-origin)

1.transform-origin 基础语法

2D转换与动画

一、2D 转换之 translate

1. 2D 转换

2D 转换是改变标签在⼆维平⾯上的位置和形状
移动： translate
旋转： rotate
缩放： scale

2. translate 语法

x 就是 x 轴上⽔平移动
y 就是 y 轴上⽔平移动

transform: translate(x, y)
transform: translateX(n)
transfrom: translateY(n)

3.重点知识点

2D 的移动主要是指⽔平、垂直⽅向上的移动
translate 最⼤的优点就是不影响其他元素的位置
translate 中的100%单位，是相对于本身的宽度和⾼度来进⾏计算的
⾏内标签没有效果

4.代码演示

div {
 background-color: lightseagreen;
 width: 200px;
 height: 100px;
 /* 平移 */
 /* ⽔平垂直移动 100px */
 /* transform: translate(100px, 100px); */
 /* ⽔平移动 100px */
 /* transform: translate(100px, 0) */
 /* 垂直移动 100px */
 /* transform: translate(0, 100px) */
 /* ⽔平移动 100px */
 /* transform: translateX(100px); */
 /* 垂直移动 100px */
 transform: translateY(100px) }

二、2D 转换 rotate

1.rotate 旋转

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

2.rotate 语法

/* 单位是：deg */
transform: rotate(度数)

3.重点知识点

rotate ⾥⾯跟度数，单位是 deg
⻆度为正时，顺时针，⻆度为负时，逆时针
默认旋转的中⼼点是元素的中⼼点

4.代码演示

img:hover {
 transform: rotate(360deg) }

三、设置元素旋转中⼼点(transform-origin)

1.transform-origin 基础语法

transform-origin: x y;

2.重要知识点

----注意后⾯的参数 x 和 y ⽤空格隔开

----x y 默认旋转的中⼼点是元素的中⼼ (50% 50%)，等价于 center center

----还可以给 x y 设置像素或者⽅位名词(top、bottom、left、right、center)

四、2D 转换之 scale 的作⽤

1.⽤来控制元素的放⼤与缩⼩

2.语法

transform: scale(x, y)

3.知识要点

注意，x 与 y 之间使⽤逗号进⾏分隔
**transform: scale(1, 1): **宽⾼都放⼤⼀倍，相当于没有放⼤
**transform: scale(2, 2): **宽和⾼都放⼤了⼆倍
**transform: scale(2): **如果只写了⼀个参数，第⼆个参数就和第⼀个参数⼀致
**transform:scale(0.5, 0.5): **缩⼩
**scale **最⼤的优势：可以设置转换中⼼点缩放，默认以中⼼点缩放，⽽且不影响其他盒⼦

五、2D 转换综合写法以及顺序问题

1.知识要点

同时使⽤多个转换，其格式为 transform: translate() rotate() scale()
顺序会影响到转换的效果(先旋转会改变坐标轴⽅向)
但我们同时有位置或者其他属性的时候，要将位移放到最前⾯

2.代码演示

div:hover {
 transform: translate(200px, 0) rotate(360deg) scale(1.2) }

六、动画(animation)

1.什么是动画

动画是 CSS3 中最具颠覆性的特征之⼀，可通过设置多个节点来精确的控制⼀个或者⼀组动画， 从⽽实现复杂的动画效果

2.动画的基本使⽤

先定义动画
在调⽤定义好的动画

3.语法格式(定义动画)

@keyframes 动画名称 {
 0% {
 width: 100px;
 }
 100% {
 width: 200px
 }
}

4.语法格式(使⽤动画)

div {
/* 调⽤动画 */
 animation-name: 动画名称;
 /* 持续时间 */
 animation-duration: 持续时间； }

5.动画序列

0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列
在 @keyframs 中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果
动画是使元素从⼀个样式逐渐变化为另⼀个样式的效果，可以改变任意多的样式任意多的次数
⽤百分⽐来规定变化发⽣的时间，或⽤ from 和 to，等同于 0% 和 100%

6.代码演示

<style>
 div {
 width: 100px;
 height: 100px;
 background-color: aquamarine;
 animation-name: move;
 animation-duration: 0.5s;
 }
 @keyframes move{
 0% {
 transform: translate(0px)
 }
 100% {
 transform: translate(500px, 0)
 }
 }
 </style>

七、动画常⻅属性

1.常⻅的属性

2.代码演示

div {
 width: 100px;
 height: 100px;
 background-color: aquamarine;
 /* 动画名称 */
 animation-name: move;
 /* 动画花费时⻓ */
 animation-duration: 2s;
 /* 动画速度曲线 */
 animation-timing-function: ease-in-out;
 /* 动画等待多⻓时间执⾏ */
 animation-delay: 2s;
 /* 规定动画播放次数 infinite: ⽆限循环 */
 animation-iteration-count: infinite;
 /* 是否逆⾏播放 */
 animation-direction: alternate;
 /* 动画结束之后的状态 */
 animation-fill-mode: forwards;
}
div:hover {
 /* 规定动画是否暂停或者播放 */
 animation-play-state: paused;
}

八、动画简写⽅式

1.动画简写⽅式

/* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反⽅向 起始与结束状态
*/
animation: name duration timing-function delay iteration-count direction
fill-mode

动画名字以及时间一定要写

2.知识要点

简写属性⾥⾯不包含 animation-paly-state
暂停动画 animation-paly-state: paused; 经常和⿏标经过等其他配合使⽤
要想动画⾛回来，⽽不是直接调回来：animation-direction: aternate
盒⼦动画结束后，停在结束位置：animation-fill-mode: forwards

3.代码演示

animation: move 2s linear 1s infinite alternate forwards;

九、速度曲线细节

1.速度曲线细节

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

2.代码演示

十、div {
 width: 0px;
 height: 50px;
 line-height: 50px;
 white-space: nowrap;
 overflow: hidden;
 background-color: aquamarine;
 animation: move 4s steps(24) forwards;
}
@keyframes move {
 0% {
 width: 0px;
 }
 100% {
 width: 480px;
 } 
}