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

SuiKaSan的自学室 2019-07-01

一些有趣的 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-propertytransition-durationtransition-timing-functiontransition-delaytransition-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 的效果如下:

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

加了 filter 的效果:

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

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 特效,也欢迎一起探讨学习哈~

岗位内推

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

你玩过《小冰冰传奇([刀塔传奇])》么?你玩过《剑与家园》么?

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

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

相关推荐