移动到导航栏时显示二维码

最新推荐文章于 2021-11-12 19:40:04 发布

高级项目经理

最新推荐文章于 2021-11-12 19:40:04 发布

阅读量543

点赞数

分类专栏： web前端 vue功能实现案例文章标签： vue

本文链接：https://blog.csdn.net/weixin_43837268/article/details/87342174

版权

web前端同时被 2 个专栏收录

419 篇文章 10 订阅

订阅专栏

vue功能实现案例

26 篇文章 2 订阅

订阅专栏

1.index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <div class="toolbar">
        <a href="javascript:;" class="toolbar-item toolbar-item-weixin">
            <span class="toolbar-layer"></span>
        </a>
        <a href="javascript:;" class="toolbar-item toolbar-item-feedback"></a>
        <a href="javascript:;" class="toolbar-item toolbar-item-app">
            <span class="toolbar-layer"></span>
        </a>
        <a href="javascript:;" class="toolbar-item toolbar-item-top"></a>
    </div>
    <script src="js/require.js" data-main="js/main"></script>
</body>

</html>

2.index.scss

.toolbar-layer {
  position: absolute;
  right: $toolbar-size;
  bottom: 0;
  width: 172px;
  background-image: url(../img/toolbar.png);
  background-repeat: no-repeat;
  opacity: 0;
  filter: alpha(opacity=0);
  transform: scale(0.01);
}
.toolbar-item {
  position: relative;
  display: block;
  width: $toolbar-size;
  height: $toolbar-size;
  background-image: url(../img/toolbar.png);
  background-repeat: no-repeat;
  margin-top: 1px;

  &:hover{
    .toolbar-layer{
      opacity: 1;
      filter: alpha(opacity=100);
      transform: scale(1);
    }
  }
}

高级项目经理

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
移动到导航栏时显示二维码

1.index.html&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0&qu
复制链接

扫一扫

专栏目录