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

闲言碎语不多讲,咱们说说css3的transform属性:

先上效果:css3属性(transform)的一个css3动画小应用

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

实现方法:

HTML 代码如下:

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

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

2、需要注意的几个点:

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

  • 隐藏使用css属性:透明度为0和scale为0;

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

3、CSS3代码:

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

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

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

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

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

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

三步搞定了。

另外:在css上没有注释,目前说一下不常用的吧:

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

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

咱们下次见。

© 版权声明
THE END
如果内容对您有所帮助,就支持一下吧!
点赞0 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容