先上效果：

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

实现方法：

HTML 代码如下：

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

2、需要注意的几个点：

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

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

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

3、CSS3代码：

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

  

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

• 

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

• 

三步搞定了。

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

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

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css3-style/c50680.shtml