过渡transition
transition-property
规定应用过渡的 CSS 属性的名称。
transition-duration
定义过渡效果花费的时间。默认是 0。
transition-timing-function
规定过渡效果的时间曲线。默认是 “ease”。
ease 规定慢速开始,然后变快,然后慢速结束的过渡效果
linear 规定以相同速度开始至结束的过渡效果
ease-in 规定以慢速开始的过渡效果
ease-out 规定以慢速结束的过渡效果
ease-in-out 规定以慢速开始和结束的过渡效果
transition-delay
规定过渡效果何时开始。默认是 0。
transition
:[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]
<style>
.box {
width: 100px;
height: 50px;
background: pink;
transition: width 1s;
}
.box:hover {
width: 200px;
}
</style>
<div class="box"></div>
transform
2D转换
1 translate( , )
偏移方法
translate()根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动。
img{
width: 200px;
height: 200px;
transition: all 1s;
}
.img1:hover{
transform: translate(0,-10px);
}
<img class="img1" src="路径名" />
2 rotate()
旋转方法
rotate()方法,在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。
img{
width: 200px;
height: 200px;
transition: all 1s;
}
.img1:hover{
transform: rotate(360deg);
}
<img class="img1" src="路径名" />
3 scale( , )
缩放方法
scale()方法,该元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴)的参数
img{
width: 200px;
height: 200px;
transition: all 1s;
}
.img1:hover{
transform: scale(2);
}
<img class="img1" src="路径名" />
4 skew( , )
扭曲方法
skew()方法,该元素会根据横向(X轴)和垂直(Y轴)线参数给定角度:
img{
width: 200px;
height: 200px;
transition: all 1s;
}
.img1:hover{
transform: skew(30deg,50deg);
}
<img class="img1" src="路径名" />
兼容写法
transform内可写多个转换
-webkit-transform: translate(50px, 100px) rotate(360deg)
-moz-transform: rotate(360deg)
-ms-transform: scale(2)
-o-transform: skew(30deg,50deg)
3D转换
transform-style
规定变换的样式(父元素)
属性值:flag平面(默认) preserve-3d(保持3d变换)
.father{
transform-style: preserve-3d;//声明后子元素才能设置3d效果
}
.father .son{
transform: translateY(-25px) rotateX(90deg);
}
平移
整体写:transform:translate3d(x,y,z)
z:代表在垂直于平面的轴上移动,电脑屏幕往人眼那个方向为正方向。
单独写:transform:translateZ(z)
旋转
整体写:transform:rotate3d(x,y,z,角度)
角度单位deg
此时x、y、z
取值为0或1
,0不旋转,1旋转
单独写:transform:rotateX(角度) transform:rotateY(角度) transform:rotateZ(角度)
备注:左手定律,大拇指指向轴的正方向,手指弯曲的方向为旋转的正方向
tips:哪里设置变化效果就在哪里添加 transition
transform-style: preserve-3d; 同理,子元素设置后由父元素展示
动画
- 自定义动画
(1)通过@keyframes
指定动画序列;
(2)通过百分比将动画序列分割成多个节点;
(3)在各节点中分别定义各属性
(4)通过animation属性将动画应用于相应元素; - animation属性
- animation-name动画名字(必须)
- animation-duration动画播放时间(必须)
- animation-timing-function 动画播放的形式
属性值: linear线性 ease ease-in steps(n)
- animation-delay 动画播放的延迟
- animation-iteration-count 动画播放的次数 infinite无限次播放
- animation-direction 动画是否轮流反向播放
属性值:alternate交替播放 reverse反向播放 alternate-reverse 轮流反向
使用animation:1 2 3 4 5 6 ;
div{
width: 200px;
height: 200px;
background: #58bc58;
border-radius: 50%;
background: url(../images/01.jpg) no-repeat;
animation:dong 2s linear 2s infinite reverse;
}
@keyframes dong{
0%{}
100%{
transform:rotate(360deg);
}
}
<div></div>