css3中transform和transition的用法

这周在网站前台时了解到了css3的一些属性,其中就包括了我以前没太注意的css3的一些动画动作。也就是我在这里想要讲的transform和transtion这两个属性。

我先在下面贴一点w3cschool上的关于这两个属性的一些方法

这里是(transform)

css3中transform和transition的用法_第1张图片

(transition)也有一些属性,具体的可以在自己去百度。



下面我会写一个例子,比如这次我在做项目的时候再需求中有一个菱形的框,这点一度让我很为难。因为在之前的div和css学习中都是方方正正的图形。然后我去查看了一下百度上对于这个问题的解决放法。一开始也有告诉我由美工来做这种菱形框,但我试了之后可以使可以,但毕竟自己是编程的,所以去找了如何用代码实现这种功能。

transform

上面的方法我们应该都知道了,下面我会写一个菱形的功能。





无标题文档






css3中transform和transition的用法_第2张图片


这样就行成了一个菱形框。


当然还有许多方法都内置在里面的,我这里用到的主要是关于x轴的偏移。


有时候我们想要实现一个动画,比如说当鼠标经过是 我们某个div发生偏移。但是如果我们不加延迟时间的话,他的变换往往在一瞬间就结束了。 这是后我们就需要用到transition来进行延迟。





无标题文档





这里就实现了div宽度延长的动画


基本上差不多入门就这些,具体的方法还是要大家具体自己去试,去练,毕竟代码是自己写出来的

你可能感兴趣的:(css3)