css的艺术

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

骚操作

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

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

除了上面这些还有

1. 各自模式的纯css加载中的样式
2. 伪类去做优惠卷样式
3. 视差滚动的页面（这个很好玩，代码太多自己去百度）

高级骚操作

不使用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属性的妙用，这个是真的秀）

后续补充链接
灵活运用CSS开发技巧

原文地址：https://www.cnblogs.com/pengdt/p/12037525.html