transform
位移 旋转 倾斜 缩放
translate(tx,[ty])(沿着x轴 ,沿着y轴) 元素沿着X轴移动,如果ty有值,就是既沿着x轴又沿着y轴斜着移动
translateX(tx)元素只沿着X轴移动
translateY(ty)元素只沿着Y轴移动
translateZ(tz)元素只沿着Z轴移动
translate3d(tx,ty,tz)元素沿着x轴,y轴,z轴同时移动
rotate(angle)
元素沿着Z轴旋转
rotateX()元素只沿着X轴旋转
rotateY()元素只沿着Y轴旋转
rotateZ()元素只沿着Z轴旋转 与 rotate(angle) 一样
rotate3d(x,y,z,angle)元素同时沿着X轴,Y轴,Z轴旋转
倾斜 skew(sx,[sy])
元素沿着x轴倾斜,如果sy有值,既沿着x轴又沿着y轴倾斜
skewX(sx deg)元素只沿着x轴倾斜
skewY(sy deg)元素只沿着y轴倾斜
同时使用多种变形效果 变形效果函数使用空格隔开,注意不要逗号隔开
设置变形中心点 transform-origin :(0px,0px) 中心点
开启3d效果(近大远小) perspective 其值是距离,值越小 透明越明显 必须使用在父级元素上
3d背面是否可见 backface-visibility visible可见 hidden隐藏
3d嵌套效果是否可见 transform-style flat(不保留元素的3d位置,默认) preserve-3d(保留元素的3d位置) 必须使用在父级元素上
flex-wrap:是否自动换行 wrap换行 nowrap自动换行 wrap-reverse 同 wrap 值,只是换成反序方向
动画 : 过渡动画,帧动画
transition 默认是匀速
transition-property 指定哪个属性执行过度效果
transition-duration 设置动画的持续时间 0.5s 的0可以省略
transition-timing-function 设置动画速度的模型
linear(匀速) ease(由慢到快,再又快到慢) ease-in(由慢到快) ease-out(由快到慢) ease-in-out(由慢到快,再又快到慢)
transitoin-delay 设置动画的延迟时间
.box:hover{
}表示鼠标放上去的动画
帧动画:animation 复合属性
使用:
animation-name:指定使用哪个帧动画
animation-duration:设置动画的持续时间
animation-timing-function:设置动画速度的模型
linear(匀速) ease(由慢到快,再又快到慢) ease-in(由慢到快) ease-out(由快到慢) ease-in-out(由慢到快,再又快到慢)
animation-iteration-count:动画执行的次数 数字或infinite(无穷)
animation-play-states:设置动画播放状态
animation-direction:设置动画的交替方向 alternate交替
定义:@keyframes 动画名称{
from|to|百分数{
样式
}
...
}
box-shadow与text-shadow一样
text-shadow: 20px 0px 70px #ee5a24;
水平偏移量 竖直偏移量 模糊度 颜色
border-radius:5px 6px
5px代表左上 右下 6px代表右上 左下以6px画的圆
border-radius:5px 6px 7px
左上 右上 右下 然后6px也代表左下
以左上为开始 顺时针旋转
border-radius:5px 6px 7px 8px (代表横向)/ 20px 30px 50px 60px(代表纵向)最完整的表示
以下是九宫格的动画代码 ,有兴趣的可以尝试一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #000;
}
.container {
width: 300px;
height: 300px;
display: flex;
flex-wrap: wrap;
}
.container div {
width: 100px;
height: 100px;
background-image: url(3.jpg);
border: 1px solid #fff;
box-sizing: border-box;
position: relative;
transition: all 2s ease;
}
.container div:nth-child(3n+1) {
background-position-x: 0px;
left: -10px;
}
.container div:nth-child(3n+2) {
background-position-x: -100px;
left: 0px;
}
.container div:nth-child(3n+3) {
background-position-x: -200px;
left: 10px;
}
.container div:nth-child(-n+9) {
top: 10px;
background-position-y: -200px;
}
.container div:nth-child(-n+6) {
top: 0px;
background-position-y: -100px;
}
.container div:nth-child(-n+3) {
top: -10px;
background-position-y: 0px;
}
.container:hover div {
top: 0;
left: 0;
}
.container div:hover {
transform: rotate(360deg);
}
</style>
</head>
<body>
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>