鼠标移动过去弹出二维码或者其他图片的网页特效代码

小秋同学 02-24 09:57:22 学习园地
摘要: *~~特点效果:~~ *1、纯CSS实现二维码展示功能,减少加载JS;2、使用CSS3 transform 属性;第一步在需要展示二维码的地方添加如下代码,其中标签内容可以根据需要修改成图片等,href=”javascript:”表示标签作为按钮使用摘要: *~~特点效果:~~ *1、纯CSS实现二维码展示功能,减少加载JS;2、使用CSS3 transform 属性;第一步在需要展示二维码的地方添加如下代码,其中标签内容可以根据需要修改成图片等,href=”javascript:”表示标签作为按钮使用

*~~特点


效果:


鼠标移动过去弹出二维码或者其他图片的网页特效代码(图1)


~~ *
1、纯CSS实现二维码展示功能,减少加载JS;

2、使用CSS3 transform 属性;第一步

在需要展示二维码的地方添加如下代码,其中标签内容可以根据需要修改成图片等,href=”javascript:”表示标签作为按钮使用,不做跳转,实现url访问拦截。

<a class="weixin" href="javascript:">
    wechat
</a>

第二步

在样式表style.css中添加如下代码

/*微信二维码*/
 .weixin{
   position:relative;
 }
.weixin::after{
  content: url(images/qrcode.gif);
  position: absolute;
  right: -28px;
  top: -135px;
  z-index: 99;
  width:120px;
  height: 120px;
  border: 5px solid #0095ba;
  border-radius: 4px;
  transform-origin: top right;
  transform: scale(0);
  opacity: 0;
  -webkit-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}

首先父元素添加相对定位,然后以”:after” 伪元素在元素的内容之后插入微信二维码;transform: scale(0)和opacity: 0实现二维码隐藏。第三步

同样在style.css中添加如下代码

.weixin:hover::after{
  transform:scale(1);
  opacity: 1;
}

当鼠标经过时显示二维码。

另一种方法(推荐)

上面的代码中使用了”:after”伪类元素,是在css中引入二维码文件,其实我们也可以利用img标签将二维码图片放在html中,结构如下:

<a class="social weixin" href="javascript:">
  <img class="qrcode" src="http://你的路径/qrcode.gif" alt="微信二维码">
此处为微信图标
</a>

自然css样式也要做相应的改变,如下:

.weixin {
    position: relative;
}
 
.weixin img.qrcode {
  position: absolute;
  z-index: 99;
  top: -135px;
  right: -28px;
  width: 7.5rem;
  max-width: none;
  height: 7.5rem;
  transform: scale(0);
  transform-origin: top right;
  opacity: 0;
  border: .3125rem solid #0085ba;
  border-radius: .25rem;
  -webkit-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
 
}
 
.weixin:hover img.qrcode {
    transform: scale(1);
    opacity: 1;
}

transform-origin: 定义二维码图片弹出原点位置,其用法参考CSS3 transform-origin 属性
无论使用哪一种方式都能够实现鼠标悬停弹出二维码功能,但是个人推荐使用第二种方法,因为这种方法很容易修改二维码路径。


文章版权及转载声明:

编辑:小秋同学本文地址:https://www.qiuhai.com/study/1278.html发布于 02-24 09:57:22
文章转载或复制请以超链接形式并注明出处学习吧_一个不错的学习网站
本站文章如没有特殊说明,均采集网上收集,若要转载请务必注明出处,尊重他人劳动成果共创和谐网络环境。 声明:某些文章来源于网络,所采集的到信息本站只为传递信息和分享,不做任何双方证明,也不承担任何法律责任。 文章内容若侵犯你的权益,请联系本站客服删除!

觉得文章有用就施舍一下文章作者

支付宝施舍

微施舍

阅读
分享

发表评论
加载中~