css布局实现网站右侧悬浮菜单返回顶部app下载微信公众号效果代码

代码语言:html

所属分类:菜单导航

代码描述:css布局实现网站右侧悬浮菜单返回顶部app下载微信公众号效果代码

代码标签: 网站 右侧 悬浮 菜单 返回 顶部 app 下载 微信 公众 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <style>

        * {

            margin: 0;

            padding: 0;

            border: none;

            zoom: 1;

        }

        ul li {

            list-style: none;

        }

        .box {

            width: 52px;

            height: 162px;

            border: 1px solid #ccc;

            margin-left: 30%;

            margin-top: 10%;

            position: relative

        }

        .box ul li {

            width: 48px;

            display: block;

            height: 50px;

            padding: 2px;

            overflow: hidden

        }

        .weixin {

            background: url(//repo.bfw.wiki/bfwrepo/icon/60d2b3a74ff65.png) no-repeat;

            background-position: 0 77%;

            -webkit-transition: all .3s;

            -moz-transition: all .3s;

            -ms-transition: all .3s;

            -o-transition: all .3s;

        }

        .weixin:hover {

            background-position: 0 88%

        }

        .weixin:hover .weixin-logo {

            width: 170px;

            height: 204px;

        }

        .idea {

            background: url(//repo.bfw.wiki/bfwrepo/icon/60d2b3a74ff65.png) no-repeat;

            background-position: 0 43.8%;

            -webkit-transition: all .3s;

            -moz-transition: all .3s;

            -ms-transition: all .3s;

            -o-transition: all .3s;

        }

        .idea:hover {

            background-position: 0 55%;

        }

        .app {

            background: url(//repo.bfw.wiki/bfwrepo/icon/60d2b3a74ff65.png) no-repeat;

            background-position: 0 21.5%;

            -webkit-transition: all .3s;

            -moz-transition: all .3s;

            -ms-transition: all .3s;

            -o-transition: all .3s;

        }

        .app:hover {

            background-p.........完整代码请登录后点击上方下载按钮下载查看

网友评论0