翻译 标签

在之前一段时间看了个首屏优化细节的文章,然后在自己项目里实际操作了下。

现在的业务逻辑涉及移动端支付,所以第一个需要考虑的就是首屏时间,如果首屏时间过长,用户体检是十分差的。其实就做了很简单一件事,在移动端将涉及页面渲染的样式表写成了内联样式。

大家都知道,请求了html之后才回根据html里面的链接去请求相应的样式,图片,视屏种种。而首屏时间就是将涉及页面渲染的种种全部加载完毕,浏览器render完毕之后的时间。这里也就能够理解要将样式表写在head里面,而把js写在</body>之前的原因了。因为css涉及页面渲染,而js大多是业务逻辑,大多数不涉及页面渲染,所以完全可以把js的解析放在页面渲染之后。当然,你也注意到,大多数js不涉及页面渲染,而少数js也涉及页面渲染的,这时候可以把js放在<body>后面,另外这里也要注意,dom节点可能还没有生成,所以操作上一般是在<body>上加class,然后配合css的子父选择器。

本文翻译自 12 little known css facts(the-sequel)
原作者是Natalia Balska

原作者在一年前也发表过一篇12个鲜为人知的css现象,然后这篇文章现在也还很受欢迎,有时间的同学可以看看。原作者又收集了更多的鲜为人知的css性质,也就是这篇文章的来源。

1、border-radius 有“/”的语法

首先,下面这个你信或则不信它都是一条border-radius的正确的代码:

1
2
3
.box {
border-radius: 35px 25px 30px 20px / 35px 25px 15px 30px;
}

如果你没见过,可能会有些困惑,下面是一些介绍:

如果给定的值中有“/”,则在“/”前面的值是指定水平方向的半径(radius),在“/”后面的就是指定垂直方向的半径(radius)。如果没有“/”,就是同时指定水平和垂直方向的半径(radius)。

demo和原文在这

今天分享一个有趣的小动画。主要的想法是在切换导航(navigating)图片时模拟蹦床的弹性效果。其中的图片拖拽效果我们使用的是Elastic STack。而svg的动画,我们使用了snap.svg。当然我们在整个过程中会使用css 的transitions属性。

demo中的图片使用得是Leonard Nimoy,是为了向他致敬,其上周逝去了。(外国程序员好有情怀)

今天我们将看看如何实现像Serge Thoroval’s Atelier中的全屏背景滑动特效。
demo和原来译文

标签

为了达到这个滚动效果,我们需要一个能让我们构造4个不同“瓷砖”效果的特别标签结构,它们将使用同一张图片的不同部分。因为我们这是一个全屏滚动效果,所以我们需要确保让所有元素都延伸至全屏。为了使得我们能制定那个图片被可见,我们需要定义一个简单的初始结构并构建我们“瓷砖”的重复结构。初始结构就像这样:

1
2
3
4
5
6
<div id="boxgallery" class="boxgallery" data-effect="effect-1">
<div class="panel"><img src="img/1.jpg" alt="Image 1"/></div>
<div class="panel"><img src="img/2.jpg" alt="Image 2"/></div>
<div class="panel"><img src="img/3.jpg" alt="Image 3"/></div>
<div class="panel"><img src="img/4.jpg" alt="Image 4"/></div>
</div>

为了去将一张图片分成4个小瓷砖,我们为每个面板构建如下的重复结构:

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
<div id="boxgallery" class="boxgallery" data-effect="effect-1">
<div class="panel current">
<div class="bg-tile">
<div class="bg-img"><img src="img/1.jpg" /></div>
</div>
<div class="bg-tile">
<div class="bg-img"><img src="img/1.jpg" /></div>
</div>
<div class="bg-tile">
<div class="bg-img"><img src="img/1.jpg" /></div>
</div>
<div class="bg-tile">
<div class="bg-img"><img src="img/1.jpg" /></div>
</div>
</div>
<div class="panel">
<div class="bg-tile">
<div class="bg-img"><img src="img/2.jpg" /></div>
</div>
<div class="bg-tile">
<div class="bg-img"><img src="img/2.jpg" /></div>
</div>
<div class="bg-tile">
<div class="bg-img"><img src="img/2.jpg" /></div>
</div>
<div class="bg-tile">
<div class="bg-img"><img src="img/2.jpg" /></div>
</div>
</div>
<div class="panel">
<!-- ... -->
</div>
<div class="panel">
<!-- ... -->
</div>
<nav>
<span class="prev"><i></i></span>
<span class="next"><i></i></span>
</nav>
</div>

今天我们将尝试去将在html中单独的一张图片利用css变换出堆叠的效果。关键的地方就是伪元素。

同时我们将看到,在我们实现的过程中,我们将会很快遇到一些混乱的代码,然后我们将使用一些方法使得代码变得整洁。