CSS3的高级应用,对于过度属性的演示,transition and transform的展示,充分了解CSS3过渡效果等,让我们一起开始学习吧!!!

第一个我要介绍的是transition-property 属性,它是用来指定过渡效果的css3的属性名称,过渡效果是用户鼠标移动在元素上时发生的!

基本格式为{
none(没有属性会得到效果。)
all(全部属性都会得到效果!)
property(定义应用过度的名称,多个名称之间用逗号隔开!)
}
下图使用了transition的四个效果,但是总体来说是没有问题的,不明白的小伙伴可以去看下书,这里我就不展开讲了。






渐变transition练习
	



	

还有一个效果是变形:transform;

利用div盒子,将图形的变换表达处理,也然我们更加了解了,transform的一些属性,深刻了解其中的道理。





2D变形transform练习




"box translate">移动
"box scale">缩放
"box skew">倾斜
"box rotate">旋转
"box origin1">中心点改变1

最后由于图形是需要鼠标移动才能达到效果,这样也不能好的展示效果,如果感兴趣的小伙伴,可以复制代码去机器上跑一下,这样也就没有那么难懂了。
谢谢大家的观看,希望有错误的地方有大佬能帮我指出谢谢大家。

你可能感兴趣的:(HTML)