鲁先生曾经说过："html和css都不能算一门语言..."
html确实不能算一门语言，他只是二三十个英语单词而已，但是css不一样，css是==艺术==

骚操作

上图的12个图标每一个用一个div和两个伪类和动画实现的，很秀
来自一个大佬是教程，，代码我就不复制了
B站视频地址上集
B站视频地址下集
12个文件在github，自行下载

来自另一个大佬的，同样是伪类，动画的使用
链接不是原作者的，原作者没效果图

除了上面这些还有

各自模式的纯css加载中的样式

伪类去做优惠卷样式

视差滚动的页面（这个很好玩，代码太多自己去百度）

高级骚操作

不使用js做一个页面浏览进度条（用不滚动的after去挡住滚动的before）

body { position: relative; margin: 0; } body:before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; z-index: -2; left: 0; background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%); background-size: 100% calc(100% - 100vh + 5px); background-repeat: no-repeat; } body:after { content: ""; position: fixed; width: 100%; height: 100%; top: 5px; left: 0; z-index: -1; background-color: white; }

css验证表单（使用 pattern + required+ :valid + :invalid ）

input:valid ~ button{ pointer-events: all; cursor: pointer; } input:valid ~ button:after{ content: "提交" } input:invalid ~ button{ /* 禁止点击 */ pointer-events: none; } input:invalid ~ button:after{ content: "未通过验证" } <input type="text" name="tel" placeholder="请输入手机号码" pattern="^1[3456789]\d{9}$" required="required"> <button type="submit"></button>

自定义滚动条样式

div.container { height: 200px; width: 300px; overflow: scroll; margin: 10px; border: 1px solid #000 } div.content { height: 1000px; } .container::-webkit-scrollbar { width: 13px; display: block !important; } .container::-webkit-scrollbar-thumb { border: 4px solid rgba(0, 0, 0, 0); background: rgba(0, 0, 0, 0.05) padding-box; border-radius: 6px; -webkit-border-radius: 6px; } .container::-webkit-scrollbar-thumb:hover { background: rgb(187, 187, 187) padding-box; } <div class="container"> <div class="content"></div> </div>

还有在掘金有个文章是css实现评分功能

css冷知识，干货
掘金的大佬
第21题（饼状图）
第26题（用outline向内描边）
第28题（pre自动缩进n个字符长度）
第29题（暂停css3动画效果）
第32题（CSS滤镜实现背景虚化）
第39题（利用CSS精灵实现逐帧动画）
第43题（CSS可以设置动画开始前和结束时所保持的状态，自定义样式的使用）
第46题（水波效果原理）
第48题（outline属性的妙用，这个是真的秀）