闲言碎语不多讲,咱们说说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属性,浏览器属性前缀没有带,请大家注意。信任大家都知道,就不说了。如果需要,请评论留言。
咱们下次见。
© 版权声明
文章版权归作者所有,未经允许请勿转载。如内容涉嫌侵权,请在本页底部进入<联系我们>进行举报投诉!
THE END
暂无评论内容