律师网站设计:纯CSS实现鼠标经过弹出微信二维码

  • 2022-04-27
  • 7894

特点

1、在律师网站建设中纯CSS实现二维码展示功能,减少加载JS;

2、使用CSS3transform 属性;

##第一步

在需要展示二维码的地方添加如下代码,其中标签内容可以根据需要修改成图片等,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” 伪元素在<a></a>元素的内容之后插入微信二维码;transform: scale(0)和opacity: 0实现二维码隐藏。
第三步 同样在style.css中添加如下代码

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

相关阅读

律师网站建设中用CSS3实现时间轴动画

律师网站设计中用CSS实现宽度自适应16:9的矩形

CSS3变形透视动画-3-cyy

CSS3FLEX弹性盒模型让布局飞起来-2-cyy

CSS3FLEX弹性盒模型让布局飞起来-cyy

成都律品科技有限公司专注律师互联网营销技术服务,创始人员2009年开始从事律师行业互联网技术开发、营销运营工作已十年,2018年公司正式成立,不断探索律师行业服务需求,致力于为律师行业提供透明、优质的服务,现已为全国多家律师事务所、律师团队提供互联网技术及营销支持。

在线咨询
  • 152-0832-9147

  • 105991110

全时在线,如未回复请留下联系方式

微信咨询