纯CSS完成右边底部飘浮实际效果(飘浮QQ、手机微

日期:2021-03-05 类型:科技新闻 

关键词:如何创建网站,免费网站建站,网站建设文章,网站建设7个基本流程,自动建站

大家见过许多网页页面右边波动实际效果,最开始有QQ联络面板,对联广告宣传等,大多数数全是根据Javascript完成的动态性实际效果,今日我给大伙儿共享1个只必须CSS融合DIV完成的右边波动实际效果。

源代码免费下载:点一下免费下载

HTML

大家期待飘浮实际效果最终载入,因而1般将其置放在网页页面HTML的结尾,大家创建1个.side-bar,里边包括了QQ线上资询,手机微信(电脑鼠标滑向弹出2维码实际效果),新浪微博,和Email联络方法等內容,这些內容大家都以<a>标识包裹。

拷贝编码
编码以下:

<div class="side-bar">
<a href="#" class="icon-qq">QQ线上资询</a>
<a href="#" class="icon-chat">手机微信<div class="chat-tips"><i></i>
<img style="width:138px;height:138px;" src="helloweba.jpg" alt="手机微信定阅号"></div></a>
<a target="_blank" href="" class="icon-blog">新浪微博</a>
<a href="https://www.jb51.net" class="icon-mail">mail</a>
</div>

CSS

大家应用CSS来进行波动即电脑鼠标滑向弹出实际效果。大家提前准备1张照片right_bg.png,包括了几个內容的标志,随后根据background-position各个标志对应的a內容。大家应用position: fixed和设定bottom和right值将.side-bar固定不动在右下角,这样不管网页页面怎样翻转,.side-bar将1直在右下角部位不会改变。这里必须提下ie6下fixed实际效果必须独立解决,但本文不做详解,舍弃ie6吧。

拷贝编码
编码以下:

.side-bar a,.chat-tips i {background: url(right_bg.png) no-repeat;}
.side-bar {width: 66px;position: fixed;bottom: 20px;right: 25px;font-size: 0;line-height: 0;z-index: 100;}
.side-bar a {width: 66px;height: 66px;display: inline-block;background-color: #ddd;margin-bottom: 2px;}
.side-bar a:hover {background-color: #669fdd;}
.side-bar .icon-qq {background-position: 0 ⑹2px;}
.side-bar .icon-chat {background-position: 0 ⑴30px;position: relative;}
.side-bar .icon-blog {background-position: 0 ⑴98px;}
.side-bar .icon-mail {background-position: 0 ⑵66px;}

这里也有个电脑鼠标滑向手机微信标志的实际效果,当电脑鼠标hover时,.chat-tips的display特性设定为block,而且设定精准定位部位,1下编码还包括了1个箭头的CSS写法:


拷贝编码
编码以下:

.side-bar .icon-chat:hover .chat-tips {display: block;}
.chat-tips {padding: 20px;border: 1px solid #d1d2d6;position: absolute;right: 78px;top: ⑸5px;background-color: #fff;display: none;}
.chat-tips i {width: 9px;height: 16px;display: inline-block;position: absolute;right: ⑼px;top: 80px;background-position:⑻8px ⑶50px;}
.chat-tips img {width: 138px;height: 138px;}


简易的几行CSS编码就进行了1个简约的右下角飘浮实际效果,快去试下吧。

上一篇:CSS进阶指引 返回下一篇:没有了