1.2D变形的属性名称叫什么?
transform():平移函数,基于x、y坐标重新定位元素的位置
scale():缩放函数,可以使任意元素对象尺寸发生变化;
rotate():旋转函数,取值是一个度数值
skew():倾斜函数,取值是一个度数值
2.让一个Div在鼠标悬浮其上之后向右平移20px,且放大1.5倍如何写样式?
div:hover{
transform:translate(20px,0px) scale(1.5);
}
网页元素使用情况(不同情况下)
transform 2D变形设置网页元素样式
transition制作过渡动画
animation制作网页动画
3.让一个图片在你鼠标悬浮其上之后旋转360度,放到1.5倍并且能够看到变化的过程,请问如何写样式?(使用过渡方式实现)
img{ transition:all 2s linear;}
img:hover{
transform:rotate(360deg) scale(1.5);
}
4.定义一个关键帧来描述背景色由红-->蓝-->黄-->绿的过程?定义一个p元素,让它使用这个动画效果并且循环使用?
@keyframe changeColor{
0%{background:red;}
33%{background:blue;}
66%{background:yellow;}
100%{background:green;}
}
p{ animation:changeColor 2s infinite;}