CSS3入门之2D、3D、过度、动画
2020-12-18 本文已影响0人
码农修行之路
2D 3D 过度 动画
- 2D效果 主要是平面的一些常规操作 transform属性
- 移动 transform: translate(20px,30px); 水平移动 和 垂直移动 水平沿X轴方向进行 垂直沿Y轴方向进行
属性值可以为负值 水平方向负值往左移动 垂直方向负值往上移动 - 缩放 transform: scale(2, 4); 同样也是水平 和 垂直方向 的放大缩小
- 旋转 transform: rotate(90deg); 默认以中心坐标旋转 坐标点也可以指定 指定坐标点的属性 transform-origin: 50px 100px; 或者是方位值 可以是具体的像素值
- 倾斜 transform: skew(20deg, 30deg); 同样也是水平 和 垂直方向
- 3D 主要是有立体感 实现一些炫酷的效果
- 旋转 transform: rotateX(50deg); transform: rotateY(50deg);等
- 过度 从一种样式逐渐改变到另一种效果 需要满足两个条件
1、添加到CSS属性上 transition: width 2s, height 2s, transform 2s; 作用于宽度、高度、2D效果上等
2、设置效果时长 - 动画 ->变形 过度 动画 通过animation属性实现 需要满足两个条件
1、动画名称
2、动画时长
格式：
标签 {
/* 使用动画 anim 时长 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 {
/* 旋转 */
/*margin-left: 50px;
margin-top: 50px;*/
/* 顺时针旋转90度 */
/*transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);*/
/* 3D旋转 */
/*transform: rotateX(50deg);
-webkit-transform: rotateX(50deg);*/
/*transform: rotateY(50deg);
-webkit-transform: rotateY(50deg);*/
}
.box1 {
/* 缩放 */
/* 放大原来的倍数 不能是具体的像素值 */
/*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);*/
/* 基于坐标点 进行旋转 其它属性都可以配合使用 */
/*-webkit-transform-origin: 50px 100px;*/ /* 原点变化为 50 100坐标点 */
/*transform: rotate(30deg);*/
}
.box1 {
/* 过度 从一种样式逐渐改变到另一种效果 满足条件*/
/* 1. 添加到CSS属性上 */
/* 2. 效果时长 */
/* 鼠标悬浮上宽高从100px到300px 过度时间2秒 旋转也是*/
transition: width 2s, height 2s, transform 2s;
}
.box1:hover {
width: 300px;
height: 300px;
transform: rotate(50deg);
-webkit-transform: rotate(50deg);
}
.box2 {
/* 动画 满足条件 */
/* 1. 动画名称 */
/* 2. 动画时长 */
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>
<!-- 移动 旋转 缩放 倾斜 -->
<div class="box1">盒子</div>
<div class="box2">盒子</div>
</body>
</html>
