一个好的网页最重要的就是它的实用性和美观性,实用性是最重要的自然不必说,美观性也绝对不能少。实现同一个功能,一个网站背景全白很朴实布局不协调,另一个网站看起来清新舒适摆放合理,在大多情况下明显后者就更好。而css动画化相关的知识就是网页美化的重要部分。在课堂上老师所讲的并不完全并且当时也没时间去测试。这儿我以做一个平行四边形按钮并且保持内容不变为例来讲我对css部分知识的理解(涉及了transform的讲解,animation我会分开说)。
transform就是对图形的变换,在动画操作中经常要用,它有以下三种主要用法:
translate(水平方向移动x,垂直方向移动y),
rotate(按自定以的中心点旋转的度数,单位deg,顺时针),
scale(水平方向缩放的倍数,垂直方向缩放的倍数)。
transfrom使用起来较为简单,但也相对的只用transfrom也只能实现基本效果,在使用它之前,要先注意避开一些坑(我都遇到过):
1.旋转操作中可以通过transform-origin: x y设置旋转中心点(默认是50%,50%,这里的百分比是指行,宽所占整体的百分比)设置的时候x,y可以是百分比,像素或者方位名词。
2.尽量避免在同一个标签里多次使用tranfrom,后面的一个trasfrom会抵消前面的效果!原因在于每一个trasfrom都是以元素的初始形态为基准的。要避免这种情况,可以在一个trasfrom用空格写出多次变换的内容,如下代码实现右移300px:
transform: translate(150p