transition:过度
transform:转换
rotate:旋转
translate:位移
scale:缩放
skew:斜切
infinite:无数次
animation:动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>转换</title>
<style type="text/css">
.box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 300px;
height: px;
background-color: pink;
/*transition:过度*/
transition: all .3s linear;
transform-origin: ;
}
/*鼠标放上去:鼠标悬停*/
.box:hover{
/*transform: 转换;*/
/*translateX(x): 水平方向位移*/
/*translateY(y):垂直方向位移*/
/*translate(x,Y):水平方向位移x,垂直方向位移y*/
/*transform: translateY(200px);
transform: translate(1000px,800px);*/
/*deg度 rotate(deg) : 正数(顺时针旋转) /负数(逆时针旋转)*/
/*transform: skew(45deg); *//* skew(deg)斜切*/
/*大小放大或缩小倍数. 数字*/
transform: translate(100px,200px) scale(45deg);
}
.box{
width: 300px;
height: 200px;
background-color: pink;
transition: transform 5s;
/*transform-origin:转换中心点 top/bottom/left/right/center*/
transform-origin: top left;
}
.box:hover{
transform: rotate(-180deg);
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
</body>
</html>
动画;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.box{
width: 1000px;
height: 500px;
background-color: red;
animation: zhangsan 0.3s infinite 3s;
}
/*动画*/
/*1.创建关键*/
/*@keyframes 动画名称{
from: 从...开始;
to: 到...结束
}*/
/*2.绑定动画*/
/*animation: 动画名称 动画持续时间*/
@keyframes zhangsan{
from{
background-color: pink;
}
to{
background-color: deeppink;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>