【译】如丝般顺滑-使用css3实现60帧的动画

原文: Smooth as Butter: Achieving 60 FPS Animations with CSS3

在移动端上实现动画很简单。

如果采取我们的建议的话,在移动端正确的实现动画也会比较容易。

虽然现在很多人在手机上运用CSS3动画,但许多人用的都不够恰当。很多应加以考虑的最佳实践常常被忽略,因为仍然有人不明白这些最佳实践的真正意义。

如今有这么多的设备规范,如果还不有针对性地优化你的代码,糟糕的用户体验将让你死无葬身之地。

Read more

background滤镜效果及高斯模糊

background滤镜效果

场景及实现:父级div嵌套子div,父div有背景图片,子div中有文字,需要实现背景图加黑色半透明遮罩,不影响子div中文字的显示效果。

CSS的filter滤镜效果的Brightness属性可以实现遮罩效果,但是类似于opacity属性,这种效果会影响子div的显示效果:

解决方法:

1
2
3
4
<div id="section1">
<div id="content">
</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#section1 {
background: url('../images/bg-img.jpg') center center no-repeat;
background-size: cover;
position: relative;
}
#content {
position: absolute;
}
#section1::before {
content: '';
display: block;
position: absolute;
background-color: #000;
opacity: 0.5;
width: 100%;
height: 100%;
}
Read more