2D转换方法
transform: rotate(); //旋转
transform: scale() // 缩放
过渡效果
transition是将元素的某个属性从“一个值”在指定时间内过渡到“另一个值”
格式
transition 属性名 持续时间 过渡方法
transition-property 属性名|all 对哪个属性进行变化
transition-duration 持续时间
transition-timing-function 过渡使用的方法(函数)
值 | 描述 |
---|---|
linear | 匀速 |
ease | 慢快慢 |
ease-in | 慢快 |
ease-out | 快慢 |
ease-in-out | 慢快慢 |
代码样例(鼠标浮动后样式发生变化)
div {
height: 30px;
width: 100px;
line-height: 30px;
border-radius: 5px;
color: #000;
background-color: silver;
transition: all 1s linear;
}
div:hover {
color: white;
background-color: #40c419;
}
animal动画
1 定义动画 @keyframes规则
2 调用动画 animation属性
代码样例:
@keyframes myAnimal {
0% {
background-color: #1db163
}
40% {
background-color: #b11d87
}
100% {
background-color: #b11d40
}
}
div:hover {
animation: myAnimal 5s linear;
}
值 | 描述 |
---|---|
animation | 简写 |
animation-name | 引用@keyframes动画的名称 |
animation-duration | 动画完成时间 |
animation-timing-function | 规定动画的速度曲线,默认是“ease” |
animation-play-state | running | paused |