视频效果 ↓
CSS3
代码↓可直接运行!!!最下有概念解析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box1{
width: 100px;
height: 100px;
margin: 100px auto;
background-color: rgb(187, 110, 110);
transition: 2s;/* CSS3过渡动画,通过事件触发 :hover :active */
}
.box1:hover{
transform: translate(300px,-100px)/* 触发盒子平移 */
}
.box2{
width: 100px;
height: 100px;
margin: 100px auto;
background-color: rgb(56, 134, 95);
transform: rotate(45deg);
/* transform-origin: left top; */
transition: 30s;
}
.box2:hover{
transform: rotate(18000deg);/* 触发盒子旋转 */
}
.box3{
width: 100px;
height: 100px;
margin: 100px auto;
background-color: rgb(110, 137, 187);
transform: scale(0.5);/* 盒子缩放属性 */
transition: 30s;
}
.box3:active{
transform: scale(50);/* 触发盒子缩放 */
}
.box4{
width: 100px;
height: 100px;
margin: 100px auto;
background-color: rgb(187, 110, 170);
transform: skew(0deg,0deg);/* 盒子变形属性 */
transition: 2s;
}
.box4:hover{
transform: skew(40deg,0deg);/* 触发盒子变形 */
}
</style>
</head>
<body>
<div class="box1">平移</div>
<div class="box2">旋转</div>
<div class="box3">缩放</div>
<div class="box4">倾斜</div>
<div class="box5"></div>
</body>
</html>
相关概念:
过渡:transition:要过渡的属性名字 持续时间1s 延时时间0s 运动曲线 (ease,linear) ;
平移:transform:translate(x,y) 水平x 垂直y +x +y -x -y;
缩放:transform:scale(w,h); w,h=0 w<1 缩小 w>1 放大
旋转:transform:rotate(ndeg);+ndeg 顺时针旋转 -ndeg 逆时针旋转
倾斜:transform:skew(xdeg,ydeg); xdeg在x轴有倾斜倾斜度数为xdeg y在y轴有倾斜