css3属性(transform)的一个css3动画小应用

闲言碎语不多讲，咱们说说css3的transform属性：

先上效果：

效果说明：当鼠标移到a标签的时候，从右上角滑出二维码。

实现方法：

HTML 代码如下：

需要说明的一点是，a链接的跳转需要用javascript拦截，就这一句。

2、需要注意的几个点：

• 二维码是HTML上没有，需要用css的伪类和css背景实现。

• 隐藏使用css属性：透明度为0和scale为0；

• 当鼠标移动到a链接上时候出现，需要设置a:hover

3、CSS3代码：

• 为了让二维码图片，位置固定，需要先设置父元素为相对定位：

• 用css将二维码图片用背景的方式载入并隐藏：

• 第三步，设置a:hover的样式：

三步搞定了。

另外：在css上没有注释，现在说一下不常用的吧：

transform-origin：变形原点,也就是该元素围绕着那个点变形或旋转,该属性只有在设置了transform属性的时候起作用。

tannsform属性和transition属性，浏览器属性前缀没有带，请大家注意。相信大家都知道，就不说了。如果需要，请评论留言。

咱们下次见。