返回顶部小按钮

最新推荐文章于 2021-06-03 07:54:23 发布

泡泡菌

最新推荐文章于 2021-06-03 07:54:23 发布

阅读量591

点赞数

分类专栏： HTML CSS 文章标签： html CSS

本文链接：https://blog.csdn.net/junpaopao/article/details/78022562

版权

CSS 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

HTML

3 篇文章 0 订阅

订阅专栏

1、Html部分

<div class="upBox">
    <a class="scrollUp" href="#top" title="返回顶部"></a>
</div>

2、Less部分

.upBox{
  position: fixed;
  right: 20px;
  bottom:20px;
  width: 40px;
  height: 40px;
  background: #eee;
  z-index: 99;
  .scrollUp{
    position: fixed;
    right:33px;
    bottom:33px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 12px solid #777;
    z-index: 100;
  }
}

.upBox:hover {
  .scrollUp {
    border-bottom: 12px solid #333;
    background: #e9e9e9;
  }
}