一些有趣的 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 特效,也欢迎一起探讨学习哈~
岗位内推
莉莉丝游戏招 中高级前端工程师
啦!!!
你玩过《小冰冰传奇([刀塔传奇])》么?你玩过《剑与家园》么?
你想和 薛兆丰老师 成为同事么?有兴趣的同学,可以 关注下面的公众 号加我微信 详聊哈~