CSS 世界博大精深，写过 css 的都知道，很多时候总是出现一些莫民奇妙的状况，你写的代码最后实现出来跟你预想的完全不同，特别是有时在那里悲催地找原因找了一下午，最后才发现是某个变量某个字符写错而导致，真 skr 惨。今天介绍几个有趣的 css 效果，是从书上看来的，有些可能你以前都没想到这么实现过，可以学习下作者的思路，对你以后写出更好的 css 代码会有帮助。
- 显示/收缩效果
这个效果比较常用到，具体效果如下：
gif动图
1
2
3
4
5
6
7
8
9
10
| /* HTML 代码 */
<div class="demo">
<input type="checkbox" id="check" style="display:none">
<p>HTC 计划在 10 月 22 日推出区块链智能手机</p>
<div class="element">
<p>该公司一个有趣的发展方向就是决定推出名为 Exodus 的区块链智能手机 ... 该手机制造商在照片分享应用 Instagram 上为这个即将推出的区块链智能手机建造了一个新的页面</p>
</div>
<label for="check" class="check-in">更多↓</label>
<label for="check" class="check-out">收起↑</label>
</div>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| /* CSS 代码 */
.demo{width: 200px;padding-left:100px;padding-top: 10px;}
.element{
width: 200px;
padding-top: 15px;
max-height: 0;
overflow: hidden;
transition: max-height .25s;
}
:checked ~ .element{
max-height: 666px;
}
:checked ~ .check-out{
display: block;
}
:checked ~ .check-in{
display: none;
}
.check-in,.check-out{
color: blue;
cursor: pointer;
margin-top: 15px;
}
.check-out{
display: none;
}
|
- 正在加载中动画
在加载网页时经常会用到这个动画，为了缓解图片文字资源未加载时用来过渡，极大地增强了用户体验，效果大致如下：
正在加载中
1
2
| /* HTML 代码 */
正在加载中<dot>...</dot>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| /* CSS 代码 */
dot{
display: inline-block;
height: 1em;
line-height: 1;
text-align: left;
vertical-align: -.25em;
overflow: hidden;
}
dot::before{
display: block;
content: '...\A..\A.';
white-space: pre-wrap;
animation: dot 2s infinite step-start both;
}
@keyframes dot{
33% {
transform: translateY(-2em);
}
66% {
transform: translateY(-1em);
}
}
|
- css 自行实现小图标
在日常开发的过程中经常会用到小图标，除了可以去 阿里图标 下载之外，一些较简单的图标可以自己用 css 实现，方法是利用 border 和 background 属性，效果如下：
宽高扩大了 10 倍显示
1
2
3
| /* HTML 代码 */
<i class="icon-menu"></i>
<i class="icon-dot"></i>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| /* CSS 代码 */
.icon-menu{
display: inline-block;
width: 140px; height: 10px;
padding: 35px 0;
border-top: 10px solid;
border-bottom: 10px solid;
background-color: currentColor;
background-clip: content-box;
margin: 50px 0 0 100px;
}
.icon-dot{
display: inline-block;
width: 100px; height: 100px;
padding: 10px;
border: 10px solid;
border-radius: 50%;
background-color: currentColor;
background-clip: content-box;
}
|
- border 实现边框
很多时候会遇到需要有一个上传按钮，点击按钮后上传文件，如下面这样的效果：
按钮
此时可以用 a 标签来承载，在通过 border 属性来定义虚线框，利用伪元素来定位，使中间的 + 号能水平垂直居中。1
2
| /* HTML 代码 */
<a href class="add" title="继续上传">添加图片</a>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| /* css 代码 */
.add{
display: inline-block;
width: 76px; height: 76px;
color: #ccc;
border: 2px dashed;
text-indent: -12em;
transition: color .25s;
position: relative;
overflow: hidden;
margin: 50px 100px;
}
.add:before, .add:after{
content: '';
position: absolute;
top: 50%;
left: 50%;
}
.add:hover{
color: #34538b;
}
.add::before{
width: 20px;
border-top: 4px solid;
margin: -2px 0 0 -10px;
}
.add::after{
height: 20px;
border-left: 4px solid;
margin: -10px 0 0 -2px;
}
|
- 纯 css 实现自适应的弹框
弹框，也就是 dialog ，经常也是在网页中看到，例如有些网页点击登录注册时就会跳出一个弹框来显示登录注册页面，而下面的效果是使用 css 完成的，并且可以自适应，无论窗口的大小，始终能保持水平垂直居中，很好的一个实现方法。
水平垂直居中弹框
1
2
3
4
5
6
7
8
| /* HTML 代码 */
<div class="container">
<div class="dialog">
<div class="content">
我是内容
</div>
</div>
</div>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| /* css 代码 */
.container{
position: fixed;
top:0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,.5);
text-align: center;
white-space: nowrap;
z-index: 99;
}
.container:after{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.dialog{
background-color: #fff;
display: inline-block;
vertical-align: middle;
border-radius: 6px;
text-align: left;
white-space: normal;
width: 400px;
height: 250px;
}
|
参考资料
张鑫旭——《 css 世界》
PS：最近 Chrome 70 正式发布了，不得不说，谷歌这波更新的真快，不过我下载体验了一下，整体跟 69 版本没什么大的变化，至于新增的那些画中画、拖拽 API 什么的目前也没用得上什么，感兴趣的直接去 官网 下载最新的版本就好，目前只有桌面版，移动端版本的还要等些时间。
最后更新时间：
欢迎关注微信公众号，分享原创技术文章，见下方二维码。
gif动图
正在加载中
宽高扩大了 10 倍显示
按钮
水平垂直居中弹框
