一些有趣的 CSS 魔法和布局（下）（结尾有岗位内推哦~）
SuiKaSan的自学室 2019-07-01
前言
上一篇 一些有趣的 CSS 魔法和布局（上） 中，我们聊了一些有趣且实用的布局。今天，将呈现一些 CSS 带来的魔法特效，有部分特效可以帮我们省去不少工作量。
鼠标悬浮使内容自撑开
在以前遇到这个需求的时候，我们可能会想到用 JS 来操作内容的显式与否。现在，CSS3 的 transition 可以帮我们更简单地实现。
<ul>
<li style="padding-bottom: 20px;">
<div class="head">
列表1
</div>
<div class="body">
列表内容<br>
内容列表内容<br>
内容列表内容<br>
内容
</div>
</li>
<li>
<div class="head">
列表2
</div>
<div class="body">
列表内容<br>
内容列表内容<br>
内容列表内容<br>
内容
</div>
</li>
</ul>.body {
max-height: 0;
overflow: hidden;
transition: all 1s ease-out;
}
li:hover .body {
max-height: 300px;
transition-timing-function: ease-in;
}transition: all 1s ease-out; 这是一种简写，transition 有 4 个过渡属性：transition-property、transition-duration、transition-timing-function、transition-delay。transition-timing-function 规定了速度效果的速度曲线，它有以下几种约定的属性。
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
让图片变成黑白色
有一些特殊的时段，比如需要降半旗，在大环境下，各大网站为了表示默哀，会把颜色鲜艳的图片变灰变暗，过了这段时间后再恢复原本的颜色。
过去，会让 UI 同学临时赶工改图，然后再上传更新，过程麻烦，还会造成存储空间的浪费。现在，CSS3 的 filter (滤镜) 属性可以更快地实现该需求。UI 同学改的，其实也是源图片的滤镜。所以，可以这样实现：
.header {
background: no-repeat center center;
background-color: #ccc;
background-attachment: scroll;
background-size: cover;
margin-bottom: 0;
background-image: url(xxx.jpg);
filter: grayscale(100%);
}未加 filter 的效果如下：
加了 filter 的效果：
filter 的属性还有很多，其中 blur 可以实现高斯模糊，类似 IOS7 的毛玻璃效果。contrast 可以调整图片的对比度。drop-shadow 会在图片的下方合成阴影效果，等等。
自定义输入框光标的颜色
之前遇到过一个需求，注册登录界面的整体色调偏蓝色，连输入框的边框色都偏蓝。所以，产品希望输入框的颜色和光标都变为蓝色。
设置文本的颜色方便，但光标该怎么设置颜色？CSS3 的 caret-color 可以解决这个问题。
input, textarea {
caret-color: blue;
}它不仅对于原生的输入控件有效，对设置 contenteditable 的普通 HTML 标签也适用。
不过兼容性上，safari 的 PC 版从 V11.1 开始支持，wap 版从 V11.4 也开始支持了。当然 IE 目前还没有支持。
禁用文本选中
在以前，如果不想让别人选中你的页面里的内容，可以用 JS 来阻止鼠标事件。而现在，只需要一句 user-select:none; 的样式就可以搞定了。
body {
user-select: none; // 页面中的文本不能被选中
}除了 IE，兼容性都不错。在 IE 6-9 上，可以通过给 body 添加 JS 代码 onselectstart="return false;" 来解决。
反过来，对于无法被选中文本的页面，如果真想复制，也是有技巧的。方法很简单：打开 chrome 的 debug 模式，在 console 下输入 document.body.innerText，回车后就能愉快地复制了，嘿嘿~
控制表格单元格宽度
手写原生 table 的时候，直接给单元格设置宽度并没什么作用，因为单元格的宽度是根据其内容进行调整的。但是，在使用 element-ui 的 el-table 组件时，却可以给每个单元格设置宽度。这是如何做到的呢？
打开 debug，看 table 的结构，会发现在 CSS 上有个属性：table-layout: fixed;。
table-layout 的默认值是 auto，当设置为 fixed 时，在 单元格 td 上设置的宽度就起作用了。用法很简单：
table {
table-layout: fixed;
width: 100%;
}流光效果
某个商城上曾看到过的，鼠标 hover 出现一道流光划过的效果。用到了 CSS3 的 transform、linear-gradient、transition 等特性。
<div class="img-light">
<img src="xxx.jpg" width="640" height="384">
</div>.img-light {
position: relative;
width: 640px;
height: 384px;
}
.img-light::after {
content: "";
height: 100%;
width: 100px;
transform: skewX(-25deg) translateZ(0);
background-image: linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.3) 50%, hsla(0, 0%, 100%, 0));
position: absolute;
left: -150%;
top: 0;
z-index: 2;
}
.img-light:hover::after {
transition: left 2s ease-in-out;
left: 150%;
}透传事件层
遇到过一种情况，点击当前层无需触发自己的事件，但可以触发下面那层的事件，我把这种情况理解为“透传”。也就是，点击自身并无反应，相当于直接点击在了下面那层上。
用 CSS3 的 pointer-events 实现很简单：
div {
pointer-events: none;
}设置为 none，在 MDN 上的解释是：元素永远不会成为鼠标事件的 target。但是，当其后代元素的 pointer-events 属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。
美化表单的 radio 和 checkbox
在某个博客中看到的美化 radio 和 checkbox 的写法。
.radio-beauty-container {
font-size: 0;
$bgc: green;
%common {
padding: 2px;
background-color: $bgc;
background-clip: content-box;
}
.radio-name {
vertical-align: middle;
font-size: 16px;
}
.radio-beauty {
width: 18px;
height: 18px;
box-sizing: border-box;
display: inline-block;
border: 1px solid $bgc;
vertical-align: middle;
margin: 0 15px 0 3px;
border-radius: 50%;
&:hover {
box-shadow: 0 0 7px $bgc;
@extend %common;
}
}
input[type="radio"]:checked+.radio-beauty {
@extend %common;
}
}其原理是：
- 伪类选择器 :checked，表示对应控件元素（单选框或是复选框）选中时的样式
- 加号 + 相邻兄弟选择器，这个符号表示选择后面的兄弟节点
- 两者配合，就可以轻松自如控制后面元素的显示或者隐藏，或是其他样式了
- 用 label 标签控制单/复选框的选中与否，for 属性锚定对应的单选框或是复选框，然后点击这里的 label 标签元素的时候，对应的单/复选框就会选中或是取消选中。
总结
CSS3 有许多很赞的特性，可以呈现非常神奇且炫酷的效果。在这儿仅展示了一些我搜罗到的，觉得有意思的特效。大家如果有值得推荐的 CSS 特效，也欢迎一起探讨学习哈~
岗位内推
莉莉丝游戏招 中高级前端工程师 啦！！！
你玩过《小冰冰传奇（[刀塔传奇]）》么？你玩过《剑与家园》么？
你想和 薛兆丰老师 成为同事么？有兴趣的同学，可以 关注下面的公众 号加我微信 详聊哈~
