2D 3D 過度 動畫
- 2D效果 主要是平面的一些常規(guī)操作 transform屬性
- 移動 transform: translate(20px,30px); 水平移動 和 垂直移動 水平沿X軸方向進(jìn)行 垂直沿Y軸方向進(jìn)行
屬性值可以為負(fù)值 水平方向負(fù)值往左移動 垂直方向負(fù)值往上移動
- 縮放 transform: scale(2, 4); 同樣也是水平 和 垂直方向 的放大縮小
- 旋轉(zhuǎn) transform: rotate(90deg); 默認(rèn)以中心坐標(biāo)旋轉(zhuǎn) 坐標(biāo)點(diǎn)也可以指定 指定坐標(biāo)點(diǎn)的屬性 transform-origin: 50px 100px; 或者是方位值 可以是具體的像素值
- 傾斜 transform: skew(20deg, 30deg); 同樣也是水平 和 垂直方向
- 3D 主要是有立體感 實(shí)現(xiàn)一些炫酷的效果
- 旋轉(zhuǎn) transform: rotateX(50deg); transform: rotateY(50deg);等
- 過度 從一種樣式逐漸改變到另一種效果 需要滿足兩個(gè)條件
1帝蒿、添加到CSS屬性上 transition: width 2s, height 2s, transform 2s; 作用于寬度、高度巷怜、2D效果上等
2葛超、設(shè)置效果時(shí)長
- 動畫 ->變形 過度 動畫 通過animation屬性實(shí)現(xiàn) 需要滿足兩個(gè)條件
1、動畫名稱
2延塑、動畫時(shí)長
格式：
標(biāo)簽 {
/* 使用動畫 anim 時(shí)長 3秒 */
animation: anim 3s;
}
@keyframes anim{
屬性：值绣张；
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box1 {
width: 100px;
height: 60px;
background-color: red;
/* 移動 transform */
/* 沿X軸移動 往右移動20像素 */
/*transform: translateX(20px);*/
/* 沿X軸移動往左移動50像素 */
/*transform: translateX(-50px);*/
/* 沿Y軸移動 往下移動50像素 */
/*transform: translateY(50px);*/
/* 沿Y軸移動 往上移動50像素 */
/*transform: translateY(-50px);*/
/* 沿X軸移動 往右移動20像素 沿Y軸移動 往下移動30像素 */
/*transform: translate(20px,30px);*/
}
.box1 {
/* 旋轉(zhuǎn) */
/*margin-left: 50px;
margin-top: 50px;*/
/* 順時(shí)針旋轉(zhuǎn)90度 */
/*transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);*/
/* 3D旋轉(zhuǎn) */
/*transform: rotateX(50deg);
-webkit-transform: rotateX(50deg);*/
/*transform: rotateY(50deg);
-webkit-transform: rotateY(50deg);*/
}
.box1 {
/* 縮放 */
/* 放大原來的倍數(shù) 不能是具體的像素值 */
/*transform: scale(2, 4);*//*水平放大2倍 垂直方向放大4倍*/
/* X軸放大2倍 */
/*transform: scaleX(2);*/
/* Y軸放大2倍 */
/*transform: scaleY(2);
-webkit-transform: scaleY(2);*/
}
.box1 {
/* 傾斜 */
/*transform: skew(20deg, 30deg);*//* X軸傾斜20度 Y軸傾斜30度 */
/* X軸傾斜20度 Y軸保持不變 */
/*transform: skewX(20deg);*/
/* Y軸傾斜20度 X軸保持不變 */
/*transform: skewY(20deg);*/
/* 矩陣 */
/*transform: matrix(1,0,0,1,30,30);*/
/* 基于坐標(biāo)點(diǎn) 進(jìn)行旋轉(zhuǎn) 其它屬性都可以配合使用 */
/*-webkit-transform-origin: 50px 100px;*/ /* 原點(diǎn)變化為 50 100坐標(biāo)點(diǎn) */
/*transform: rotate(30deg);*/
}
.box1 {
/* 過度 從一種樣式逐漸改變到另一種效果 滿足條件*/
/* 1. 添加到CSS屬性上 */
/* 2. 效果時(shí)長 */
/* 鼠標(biāo)懸浮上寬高從100px到300px 過度時(shí)間2秒 旋轉(zhuǎn)也是*/
transition: width 2s, height 2s, transform 2s;
}
.box1:hover {
width: 300px;
height: 300px;
transform: rotate(50deg);
-webkit-transform: rotate(50deg);
}
.box2 {
/* 動畫 滿足條件 */
/* 1. 動畫名稱 */
/* 2. 動畫時(shí)長 */
width: 100px;
height: 100px;
background-color: blue;
position: relative;
animation: anim 3s;
-webkit-animation: anim 5s;
}
@keyframes anim{
/*from {
background-color: #333;
}
to {
background-color: yellow;
}*/
0% {
background-color: #333;
top: 0px;
left: 0px;
}
25% {
background-color: #666;
top: 0px;
left: 100px;
}
50% {
background-color: #999;
top: 100px;
left: 100px;
}
75% {
background-color: #0f0;
top: 100px;
left: 0px;
}
100% {
background-color: #00f;
top: 00px;
left: 0px;
}
}
@-webkit-keyframes anim{
/*from {
background-color: #333;
}
to {
background-color: yellow;
}*/
0% {
background-color: #333;
top: 0px;
left: 0px;
}
25% {
background-color: #666;
top: 0px;
left: 100px;
}
50% {
background-color: #999;
top: 100px;
left: 100px;
}
75% {
background-color: #0f0;
top: 100px;
left: 0px;
}
100% {
background-color: #00f;
top: 00px;
left: 0px;
}
}
/*.box2:hover {
animation: anim 3s;
-webkit-animation: anim 5s;
}*/
</style>
</head>
<body>
<!-- 移動 旋轉(zhuǎn) 縮放 傾斜 -->
<div class="box1">盒子</div>
<div class="box2">盒子</div>
</body>
</html>
