2D平面变换方法
对元素进行旋转,缩放,移动,拉伸。
- 使用设置transform属性:
rotate函数:设置旋转的度数。
旋转的效果:
代码的实现:
#rotateDiv
{
transform:rotate(30deg);/*设置顺时针旋转的角度,也可以进行扩展*/
}
scale函数:设置缩放的效果。
transform:scale(x,y):x为水平方向,y为垂直方向,小于1的话缩小,大于1放大。
#rotateDiv
{
transform:scale(2,2);/*设置水平方向扩大为2倍,垂直方向一样*/
}
过渡
- 让当前的一个元素在指定的时间中从一个属性变成另一个属性。
- transition:属性名,持续时间,过渡方法;
transition-property: 属性名(all表示全部),对哪个属性进行变化;
transition-duration:持续的时间;
transition-timing-function:过渡使用的方法。
实现代码:
<style>
div{
height:30px;
width:300;
line-height: 30px;
border-radius:5px;
color:#000;
background-color: silver;
transition:all 1s linear;/*全部元素,过渡时间为1秒钟,线性过渡*/
}/*初始的状态*/
div:hover{
color:white;
background-color: #45B823;
}/*鼠标悬停的时候终止状态*/
</style>
动画效果
- 首先定义一个动画,遵守@keyframes规则(关键帧),动画的效果将静态图片进行过渡即可。
- 设置animation属性:
keyframes规则来进行定义动画的效果,然后再设置悬停时候的效果。
3.实现代码:
@keyframes mycolor{/*定义在style.css文件中,进度出现的颜色*/
0% {background-color: red;}
30% {background-color: blue;}
60% {background-color: yellow;}
100% {background-color: green;}
}
div:hover{/*定义在.html文件中,设置时间,变换方式*/
color:white;
animation: mycolor 3s linear;
background-color: #45B823;
}
- animation属性取值: