一些有趣的 CSS 魔法和布局（下）（结尾有岗位内推哦~）

前言

上一篇 一些有趣的 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 特效，也欢迎一起探讨学习哈~

岗位内推

莉莉丝游戏招 中高级前端工程师 啦！！！

你玩过《小冰冰传奇（[刀塔传奇]）》么？你玩过《剑与家园》么？

你想和 薛兆丰老师 成为同事么？有兴趣的同学，可以 关注下面的公众 号加我微信 详聊哈~