标准链官网：
官网
新闻页
设计预览在站酷：标准链官网设计稿
兼容：PC 端 / 手机端 /Pad 端、中英文双语版
技术要点：
粒子动画：使用 particles 做的首屏粒子动画；
因为 PC 和 phone 的粒子数量不同，所以根据 userAgent 来定义粒子数量
滚动条样式：重写了 CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
/*滚动条样式*/
.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/ 火狐没问题）！！！！！