High一下!

css揭秘中的一些技巧

纸上得来终觉浅,绝知此事要躬行

前言

看完css揭秘,对表现和结构分离的理解更加深刻,之前写样式只求能做出来,对于结构有多复杂,代码有多冗余,并没有太多考虑,或者心有余而力不足,之前也没有真正认真进阶学习过css,读完此书,css magical不虚此名。

偷师技巧一二

个人总结了下,让css变得如魔法一般的有以下几个:

  1. 巧用渐变

  2. 善用阴影

  3. 令人激动的动画和过渡的一些部位常人熟知的属性:animation-play-state;animation-direction;steps()

毛玻璃效果

要点:父元素背景,子元素模糊(半透明处理,溢出隐藏,伪元素模糊放filter:blur()在子元素下面,负边距处理边缘)

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
32
33
34
35
36
37
38
39
40
41
/**
* Frosted glass effect
*/

body {
min-height: 100vh;
box-sizing: border-box;
margin: 0;
padding-top: calc(50vh - 6em);
font: 150%/1.6 Baskerville, Palatino, serif;
}

body, main::before {
background: url("http://csssecrets.io/images/tiger.jpg") 0 / cover fixed;
}

main {
position: relative;
margin: 0 auto;
padding: 1em;
max-width: 23em;
background: hsla(0,0%,100%,.25) border-box;
overflow: hidden;
border-radius: .3em;
box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,
0 .5em 1em rgba(0, 0, 0, 0.6);
text-shadow: 0 1px 1px hsla(0,0%,100%,.3);
}

main::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
margin: -30px;
z-index: -1;
-webkit-filter: blur(20px);
filter: blur(20px);
}

blockquote { font-style: italic }
blockquote cite { font-style: normal; }

文本行的斑马纹效果

斑马纹可以帮助把人们视线保持在长条水平空间内,众所周知表格的斑马纹可使用伪类选择器tr:nth-child(even)实现,文本行的可以使用渐变背景实现

1
2
3
4
5
6
padding:.5em;
line-height:1.5em;
background:beige;
background-size:auto 3em;
background-origin:content-box;/*背景相对content-box定位,从而保持和文本对齐*/
background-image:linear-gradient(rgba(0,0,0,.2) 50%, transparent 0);/*渐变第二个角标中0表示和前面角标的值相同*/

自适应内部元素

如果不给内部元素制定一个height,他就会自动适应内容高度,而块级元素通常独占一行,如果我们希望它也这样 max-width:min-content;

满幅背景

很多时候我们希望背景满幅,内容定宽

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!--1.0-->
footer {
background: #333;
}
.wrapper {
max-width: 900px;
margin: 1em auto;
}
<!--2.0-->
footer {
padding: 1em;
padding: 1em calc(50% - 450px);
background: #333;
}

2.0中减少了内层多余的一层结构样式

这是一种常见的布局,之前我们会使用计算高度min-height:calc(100vh-footer),但是每当我们改变页脚尺寸或者折行时就会出现问题;更好的方法是使用flex布局,非footer部分设置flex:1;即可

逐帧动画

animation:loader 1s inifinite steps(8)硬切为8部分,仅用css制作动图(动图切成多帧合并在一幅图上)

闪烁效果

1
2
3
4
5
6
7
8
9
10
/*1.平滑闪烁*/
@keyframes blink-smooth {to {color:transparent;}}
.highlight {
animation:.5s blink-smooth 6 alternate;/*alternate为animation-direction*/
}
/*2.普通闪烁*/
@keyframes blink {50% {color:transparent;}}
.highlight {
animation:1s blink 3 steps(1);
}

状态平稳动画

有一些动画,比如交互性的:鼠标hover时动画,离开终止,我们希望动画暂停而不是突兀切回初始状态,可使用animation-play-state:pause/running;控制

打字效果

利用动画逐渐增加文本宽度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@keyframes typing {
from { width: 0 }
}
@keyframes caret {
50% { border-color: transparent; }
}
h1 {
width: 15ch; /* 文本的宽度 可能有兼容问题,可设置固定来优雅回退*/
overflow: hidden;
white-space: nowrap;
border-right: .05em solid;
animation: typing 6s steps(15),
caret 1s steps(1) infinite;
}
1
2
3
4
5
6
//js
$$('h1').forEach(function(h1) {
var len = h1.textContent.length, s = h1.style;
s.width = len + 'ch';
s.animationTimingFunction = "steps("+len+"),steps(1)";
});
1
<h1>hello awesome css</h1>

写在后面

对css越来越感兴趣,前端的三把利器真是样样都要行,之前很厌烦来回调样式,说到底还是没有好好学习,功夫到了很多样式往往几行代码就能产生魔法般的效果,fighting!!!!!

坚持原创技术分享,您的支持将鼓励我继续创作!

热评文章