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

2019-09-10 郑州网站建设  

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属性的时候起作用。


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1758.html转载请标明出处,谢谢合作!
标签:
  • 效果
  • С
  • css3transfor