阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      标准链 canonchain 官网

      标准链官网:

      官网

      新闻页

      设计预览在站酷:标准链官网设计稿

      兼容:PC 端 / 手机端 /Pad 端、中英文双语版

      技术要点:

      • 粒子动画
      • 滚动条自定义

      粒子动画:使用 particles 做的首屏粒子动画;

      因为 PC 和 phone 的粒子数量不同,所以根据 userAgent 来定义粒子数量

      滚动条样式:重写了 CSS

      /*滚动条样式*/
      .item-des-wrap::-webkit-scrollbar {/*滚动条整体样式*/
          width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
          height: 2px;
      }
      .item-des-wrap::-webkit-scrollbar-track {/*滚动条里面轨道*/
          -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.1);
          border-radius: 0;
          background: rgba(255,255,255,1);
      }
      .item-des-wrap::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
          border-radius: 5px;
          -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
          background: rgba(255,255,255,0.2);
      }
      

      踩到的坑:safari 对 flex 兼容不好(一行 item,设置 flex 属性无法自动换行,chrome/ 火狐没问题)!!!!!

      目录
      本文目录
      目录