在线咨询
微信咨询
服务热线
服务热线:15639912513
TOP
当前位置:
首页 > 新闻中心> 前端设计>网站添加悬浮微信二维码

网站添加悬浮微信二维码

发布时间:2020-03-19 浏览:5020次

郑州高端网站定制开发网站过程中,遇到客户在本身已经有悬浮窗口的基础上,需要添加个微信二维码。

在微信越来越普及的现在,电脑端网站已经少不了微信客服二维码。那么如果在网站上添加悬浮的二维码图片呢?

请看示例图

1.png

当客户在浏览你的电脑端网站时候,用鼠标移动到微信咨询的时候,会自动切换一个二维码图片。下面是在css当中添加的样式。

.FloatingWindow .FloatingWindow_list_ewm-img{

    position: absolute;

    right: 78px;

    top:-30px;

    -moz-transform: rotateX(270deg);

    -ms-transform: rotateX(270deg);

    -o-transform: rotateX(270deg);

    -webkit-transform: rotateX(270deg);

    transform: rotateX(270deg);

    -moz-transition: all 0.3s ease-in-out 0s;

    -webkit-transition: all 0.3s ease-in-out 0s;

    transition: all 0.3s ease-in-out 0s;

}

.FloatingWindow .FloatingWindow_list_ewm:hover .FloatingWindow_list_ewm-img {

    -moz-transform:rotateX(0);

    -ms-transform:rotateX(0);

    -o-transform:rotateX(0);

    -webkit-transform:rotateX(0);

    transform: rotateX(0);

}

总结,主要是上述两段代码,其中第一段rotateX这个属性是旋转的意思, -moz- -ms这些是适用于不同的浏览器,有IE,有火狐,有谷歌。

TAG
5020
该内容对我有帮助