目录
一、CSS2D转换
1、转换( transform )
它是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果。
（1）二维坐标系
2D转换是改变标签在二维平面上的位置和形状的一种技术。
2、2D转换之移动（translate）
2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。
心
（1）语法
transform : translate (x, y);或者分开写
（2）示例代码如下：
<title>2D转换之位移</title>
<style>
/* 移动盒子的位置： 定位 盒子的外边距 2d转换移动 */
div {
width: 200px;
height: 200px;
background-color: pink;
/* x就是x轴上移动位置 y 就是y轴上移动位置 中间用逗号分隔*/
/* transform: translate(x, y); */
/* transform: translate(100px, 100px); */
/* 1. 我们如果只移动x坐标 */
/* transform: translate(100px, 0); */
/* transform: translateX(100px); */
/* 2. 我们如果只移动y坐标 */
/* transform: translate(0, 100px); */
/* transform: translateY(100px); */
}
div:first-child {
transform: translate(30px, 30px);
}
div:last-child {
background-color: purple;
}
</style>（3）重点需要注意的
- 定义2D转换中的移动，沿着×和Y轴移动元素
- translate最大的优点∶不会影响到其他元素的位置
- translate中的百分比单位是相对于自身元素的 translate:(50%,50%；
- 对行内标签没有效果
3、2D转换之旋转（rotate）
2D旋转指的是让元素在2唯平面内顺时针旋转或者逆时针旋转。
（1）语法
transform：rotate（度数）
（2）示例代码如下：
<title>2D转换之旋转</title>
<style>
img {
width: 150px;
/* 顺时针旋转45度 */
/* transform: rotate(45deg); */
border-radius: 50%;
border: 5px solid pink;
/* 过渡写到本身上，谁做动画给谁加 */
transition: all 3s;
}
img:hover {
transform: rotate(360deg);
}
</style>
</head>（3）重点需要注意的
- rotate里面跟度数，单位是deg 比如rotate(45deg)
- 角度为正时，顺时针，负时，为逆时针
- 默认旋转的中心点是元素的中心点
4、2D转换中心点（transform-origin）
（1）语法
transform-origin: x y;
（2）示例代码如下：（旋转中心点案例）
<title>旋转中心点案例</title>
<style>
div {
overflow: hidden;
width: 200px;
height: 200px;
border: 1px solid pink;
margin: 10px;
float: left;
}
div::before {
content: "黑马";
display: block;
width: 100%;
height: 100%;
background-color: hotpink;
transform: rotate(180deg);
transform-origin: left bottom;
transition: all 0.4s;
}
/* 鼠标经过div 里面的before 复原 */
div:hover::before {
transform: rotate(0deg);
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>5、2D转换之缩放（scale）
缩放，顾名思义，可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小。
（1）语法
transform: scale(x,y;
（2）示例代码如下：（分页按钮案例）
<title>分页按钮案例</title>
<style>
li {
float: left;
width: 30px;
height: 30px;
border: 1px solid pink;
margin: 10px;
text-align: center;
line-height: 30px;
list-style: none;
border-radius: 50%;
cursor: pointer;
transition: all .4s;
}
li:hover {
transform: scale(1.2);
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</body>（3）重点需要注意的
- 注意其中的x和y用逗号分隔
- transform:scale(1,1)︰宽和高都放大一倍，相对于没有放大
- transform:scale(2,2):宽和高都放大了2倍
- transform:scale(2):只写一个参数，第二个参数则和第一个参数一样，相当于scale(2.2)
- transform:scale(0.5,0.5):缩小
- sacle缩放最大的优势:可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子
6、2D转换综合写法
（1）示例代码如下：
<title>2D转换的综合写法顺序</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
transition: all .5s;
}
div:hover {
/* transform: rotate(180deg) translate(150px, 50px); */
/* 我们同时有位移和其他属性，我们需要把位移放到最前面 */
transform: translate(150px, 50px) rotate(360deg) scale(1.2);
}
</style>（2）同时使用多个转换，其格式为:transform: translate( rotate() scale) ..等
（3）其顺序会影转换的效果。(先旋转会改变坐标轴方向)
（4）当我们同时有位移和其他属性的时候，记得要将位移放到最前
二、CSS动画
1、动画( animation )
它是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。
2、动画的基本使用
（1）制作动画分两步
- 先定义动画
- 再使用动画
（2）用keyframes定义动画(类似定义类选择器)
@keyframes move {
/* 开始状态 */
0% {
transform: translateX(0px);
}
/* 结束状态 */
100% {
transform: translateX(1000px);
}
}（3）元素使用动画
div {
width: 200px;
height: 200px;
background-color: pink;
/* 2. 调用动画 */
/* 动画名称 */
animation-name: move;
/* 持续时间 */
animation-duration: 2s;
}（4）动画序列
- 0%是动画的开始，100%是动画的完成。这样的规则就是动画序列。
- 在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。
- 动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
- 请用百分比来规定变化发生的时间，或用关键词"from"和“to”，等同于0%和100%。
示例代码如下：
<title>动画序列</title>
<style>
@keyframes move {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(1000px, 0)
}
50% {
transform: translate(1000px, 500px);
}
75% {
transform: translate(0, 500px);
}
100% {
transform: translate(0, 0);
}
}
div {
width: 100px;
height: 100px;
background-color: pink;
animation-name: move;
animation-duration: 10s;
}
</style>3、动画的常见属性
4、动画的简写属性
animation:动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态;
animation: myfirst 5s linear 2s infinite alternate ;
- 简写属性里面不包含animation-play-state
- 暂停动画: animation-play-state: puased;经常和鼠标经过等其他配合使用
- 想要动画走回来，而不是直接跳回来:animation-direction : alternate
- 盒了动画结束后，停在结束位苦: animation-fill-mode : forwards
示例代码如下：（包括动画常见及简写属性）
<title>动画属性</title>
<style>
@keyframes move {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(1000px, 0);
}
}
div {
width: 100px;
height: 100px;
background-color: pink;
/* 动画名称 */
animation-name: move;
/* 持续时间 */
/* animation-duration: 2s; */
/* 运动曲线 */
/* animation-timing-function: ease; */
/* 何时开始 */
/* animation-delay: 1s; */
/* 重复次数 iteration 重复的 conut 次数 infinite 无限 */
/* animation-iteration-count: infinite; */
/* 是否反方向播放 默认的是 normal 如果想要反方向 就写 alternate */
/* animation-direction: alternate; */
/* 动画结束后的状态 默认的是 backwards 回到起始状态 我们可以让他停留在结束状态 forwards */
animation-fill-mode: forwards;
/* animation: name duration timing-function delay iteration-count direction fill-mode; */
animation: move 2s linear 0s 1 alternate forwards;
/* 前面2个属性 name duration 一定要写 */
/* animation: move 2s linear alternate forwards; */
/* animation: name duration timing-function delay iteration-count direction fill-mode; */
}
div:hover {
/* 鼠标经过div 让这个div 停止动画，鼠标离开就继续动画 */
animation-play-state: paused;
}
</style>三、浏览器私有前缀
浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须忝加。
1、私有前缀
- -moz-:代表firefox浏览器私有属性
- -ms-:代表ie浏览器私有属性
- -webkit-:代表safari、chrome私有属性
- -o-∶代表Opera私有属性
2、提倡的写法
-mqz-border-radius : 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
总结：以上我对于CSS2D转换、CSS动画以及浏览器的私有前缀等相关知识的归纳与普及，感谢大家的观看谢谢！！！
265
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
