CSS项目展示

1.Grid布局

简单的CSS Grid在线编辑网站

2.视差特效

在B站上找到了个很高级的视差特效制作教程，是用js实现的视差特效，实现效果，感谢作者的源代码。

后续更新源代码解析

3.隐藏页面滚动条

html {
    overflow: -moz-hidden-unscrollable;
    height: 100%;
}

body::-webkit-scrollbar {
    display: none;
}

body {
    -ms-overflow-style: none;
    height: 100%;
	width: calc(100vw + 18px);
	overflow: auto;
}

以上代码即可实现主流浏览器的滚动条隐藏

4.页面黑白滤镜

html{
    filter: url("data:image/svg xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);
}s