鲁先生曾经说过:"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冷知识,干货
掘金的大佬
第21题(饼状图)
第26题(用outline向内描边)
第28题(pre自动缩进n个字符长度)
第29题(暂停css3动画效果)
第32题(CSS滤镜实现背景虚化)
第39题(利用CSS精灵实现逐帧动画)
第43题(CSS可以设置动画开始前和结束时所保持的状态,自定义样式的使用)
第46题(水波效果原理)
第48题(outline属性的妙用,这个是真的秀)
后续补充链接
灵活运用CSS开发技巧