css如何实现客服悬浮效果


本文摘自PHP中文网,作者V,侵删。

我们首先来看一下效果图:

658bd1edfaa4bac11551a11f0e3d366.png

(推荐教程:CSS教程)

接着我们来看一下实例代码:

html

1

2

3

4

5

6

7

8

9

10

11

12

<div class="sideBar">

    <div>

        <div class="tips">在线客服</div>

        <ul class="list">

            <li>QQ:1846492969</li>

            <li>QQ:1846492969</li>

            <li>QQ:1846492969</li>

            <li>QQ:1846492969</li>

            <li>QQ:1846492969</li>

        </ul>

    </div>

</div>

css

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

.sideBar {

 position:fixed;

 right:-182px;

 top:50px;

 background-color:#ffffff;

 border:#eea236 solid 1px;

 transition:right 0.5s;

 border:solid 1px red;

}

.sideBar:hover {

 right:0;

}

.sideBar>div {

 position:relative;

}

.sideBar .tips {

 position:absolute;

 height:120px;

 line-height:25px;

 background-color:#eea236;

 width:40px;

 left:-40px;

 top:50px;

 text-align:center;

 box-sizing:border-box;

 padding:10px 10px;

 border-top-left-radius:5px;

 border-bottom-left-radius:5px;

 font-weight:bold;

 color:#ffffff;

}

.sideBar .list {

 padding:0;

 list-style:none;

 width:180px;

 margin:0;

}

.sideBar .list>li {

 padding:15px;

 border-top:#eea236 dashed 1px;

}

.sideBar .list>li:hover {

 background-color:#f0ad4e;

 color:#ffffff;

}

.sideBar .list>li:first-child {

 border-top:none;

}

相关视频教程推荐:css视频教程

以上就是css如何实现客服悬浮效果的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

jsp怎么引入css

css怎么取消颜色

css怎么设置字体间隔

如何选择web前端模板引擎(推荐)

css可以使用变量吗

css首行缩进怎么弄

css如何实现不显示table的边框

css letter-spacing属性怎么用

如何只使用1个css属性来创建响应式网站?

css如何让块无间隙

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...